忘備録として書いておきます。
そのままのタブで開かせる方法
今開いているタブでそのまま開かせたい場合、たとえば、、、
→詳細はこちらから！
みたいなリンクを作りたい場合は、
<a href="リンクしたいURL">→詳細はこちらから！</a>と書けばいい。
これをHTMLブロックを使って、p要素やdiv要素内に記述すればOK！
新規タブ（別タブ）で開かせる方法
今度は別タブで開きたい場合に、
→詳細はこちらから！
というリンクを作りたいときは、、、
<a href="リンクしたいURL" target="_blank" rel="noopener noreferrer">→詳細はこちらから！</a>と書けばいい。
＜※補足＞
→別タブで開きたいときはtarget="_blank"だけを入れればいいという認識は2019年8月まで。
これだけだと脆弱性があるので、rel="noopener noreferrer"も追加し、target="_blank" rel="noopener noreferrer"として対策するのです。
わざわざHTMLブロックに記述する理由
実はリンクの開かせ方「そのままのタブで開かせる」「新規タブで開かせる」は、WordPressを使っていればこんなことしなくても簡単に、、、
リンクにしたい文章を選択後、[⌘＋k]を押せば簡単に設定できます！
ではなぜ、そうしないでわざわざHTMLブロックに記述するのかというと、、、
- rel属性を自分で制御したいから
- 記事内 or ブログ内のリンクを検索できるようにしたいから
です。
rel属性を自分で制御したいから
今のところ、上記黄色枠内に書いた方法でリンクを作って別タブで開くようにすると、rel="noopener noreferrer"が自然と付与されます。
ですが自動付与ということは、いつか違う内容になる可能性もあるということ。そもそも自分で制御できない点で、ぼく的には完全にアウト。
そもそもリンクジュース渡したくない（渡さない方がいいと思われる）ときに使うrel="nofollow"や、スポンサーリンクやアフィリエイトリンクへのrel="sponsored"の付与ができないので、やはり自分でHTMLブロックに手書きするのが最もいい方法なのです。
記事内 or ブログ内のリンクの検索をできるようにしたいから
HTMLブロックを使って記述しておけば、記事内やWordPress内の検索するときに「href」と入力すれば、一発でリンクを探せるからです。
これを黄色枠内の方法でやってしまうと、リンクだけを探すことができなくなってしまう。
しかもリンクだけを検索したいときって結構ありまして、たとえば、、、
- アフィリエイトリンク自体を変更したいとき
- アンカーテキストを変更したいとき
- リンク先URLを変更したいとき
などがあります。
地味に感じるかもですが、リンクだけを検索できないのって、結構ストレスになりますよ。。。
まとめ
今はさらっとした忘備録に留めておきます。
では(^O^)/
