WordPress

【HTML5】リンクの開き方

2020年6月28日

執筆者:スティーブ

忘備録として書いておきます。

そのままのタブで開かせる方法

今開いているタブでそのまま開かせたい場合、たとえば、、、

→詳細はこちらから!

みたいなリンクを作りたい場合は、

<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^)/

【ワクワクしないでいいの?】

今しているお仕事、それはあなたが一番やりたかったお仕事ですか?

生活するために、本当は関心も興味もない仕事を続ける、、、それって本当に楽しいです??

人生は一度キリで、巻き戻すことはできない。

ワクワクしないでいいの?

ぼくは、自分が一番ワクワクするものとして「ブログ」を選びました。

ブログって趣味でもできるし、仕事にもできるもの。

だから目標をしっかり見据えて試行錯誤を繰り返し、真面目に運営し続ければ、自分の資産になるものなんです。

パソジユには、こんな記事があります↓↓↓

  • ブログの始め方
  • ブログで使うWordPressの使い方
  • ブログに使うパソコン(主にMac)のこと
  • 「仕事辞めよ。。」「転職しよう!」と思った時に直面したこと
  • ブログ関係なく、何かの役に立つ雑記

まずはサイトマップから、各カテゴリーを見てみて下さい!

それか、このページのもう少し下の方(パソコンから見てる方は、画面右上のサイドバーのとこ)にあるタグから、より直感的に記事を探してみるのもあり!

あなたのお役に立てる記事、パソジユにあります(^o^)/

-WordPress
-