リンク先を別タブで表示させる方法

2020-04-08

HTMLで作成されるWebサイトとWordPressの記事において、それぞれリンク先を別タブで表示させる方法について記載します。

別タブを見る女の子

効果について

Webサイトに他のサイトのリンクを設置する場合は少なくないと思いますが、リンク先を別タブで表示させない場合、現在見ているページに上書きされる形でリンク先のページが表示されます。

Webサイトの管理者側の立場からすると、利用者がせっかくページを見てくれているのに別ページに上書きされてしまい、利用者が再び元のWebサイトを見る機会を減らしてしまいます。

またサイト利用者の立場からしても、リンク前のページを再度見たいときにブラウザバックを行うなどページを開きなおす必要があり、手間がかかります。

上記を改善するために、他のWebサイトへのリンクを張る場合は別タブで開くように設定を行いましょう。

HTMLの場合

htmlでサイト制作を行う場合、リンクは<a>タグを使用しますが、そのaタグ内に
「target="_blank"」
という属性の記述を追加することで、指定のページが別タブで開かれます。

<a href="#" target="_blank">リンク</a>

▼ターゲット属性記載前
グーグルへのリンク


▼ターゲット属性記載後
グーグルへのリンク

WordPressの記事の場合

WordPressの場合、リンクを貼るには、テキストからリンク元にする範囲を選択した後に、クリップのような形の「リンク設定ボタン」を押すか「ctrl+k」入力でリンク先を入力できるウィンドウが開きます。

その後、ウィンドウにリンク先を入力して下向きボタンを押すと「新しいタブで開く」という選択肢が適用されたボタンが出現します。

このボタンをクリックしてボタンを色付き=有効にし、矢印ボタンを押すことでリンク先のページが新しいタブで開くように設定することができます。

その他

ちなみにWebサイトの設定に関わらず、リンク元でマウスのホイールをクリックすることで、リンク先を新しいタブで開くことができます。

知らなかった方は是非試してみてください。

以上となります。