• HOME > 
  • WordPress > 
  • ワードプレスでリンクを別タブで開くように指定する方法【画像付...

ワードプレスでリンクを別タブで開くように指定する方法【画像付きで解説】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

リンクを別タブで開くとは?

ユーザーがページ内のリンクをクリックした際には、

A.その画面が切り替わってリンク先のページが表示される

B.新しいタブが開いてリンク先のページが表示される

C.新しいウインドウが開いてリンク先のページが表示される

といういずれかの形でリンク先のページを表示させることになります。

特に指定しない限りaタグによるリンクは同じ画面が切り替わる形になるため、新しいタブを開くようにしたい場合には追加で指定を行う必要があります。

別タブで開くイメージ

リンクを別タブで開くメリット

外部サイトへリンクさせたい時に、そのまま(同一タブ)遷移させた場合、元のサイトに戻り為にはブラウザの戻るボタンを使います。1ページ程度であればすぐに戻れますが、外部サイト内を何ページも移動していると元のサイトまで戻るボタンで遡るのはとてもわずらわしく、戻ってきてくれない可能性が高まり、せっかく訪れたユーザーを逃してしまいます。

一方で外部サイトを別タブで開けば自分のサイトへはタブ切替で簡単に戻ってくることができるだけでなく、ユーザー自身も外部サイトへ移ったのだということがすぐわかります。

反対に同じサイト内で遷移させる際に意味もなく別タブで開くようにしてしまうとユーザーの混乱を招きかねないので注意が必要です。

別タブで開く指定の方法

ワードプレスであれば標準の機能としてリンクを挿入するときに別タブで開くかどうか簡単に設定できます。

エディターでリンクを挿入時に設定する

ワードプレスはver5.8を使用しています。お使いのバージョンによっては表示が異なっていたり、機能が使用できない場合があります。

リンク先のサムネイル
ワードプレスのエディターの使い方

ワードプレスで投稿ページや固定ページを新規作成し公開するために必要な編集画面でのエディターの使用方法や設定、一覧画面でのページ管理の仕方を説明します。...【もっと読む】

ページ編集画面でビジュアルエディターを選択し、リンクを貼るテキストを指定して「リンク挿入ボタン」を押します。

リンクを挿入

リンク先をURLで指定して、「別タブで開く」を有効にします。

リンクを挿入

実際にサイトで確認するとリンクが別タブで開きました。

HTMLのaタグに記述する

HTMLで記述する場合にはaタグに追記することで指定が可能です。

先程のリンクを「HTMLとして編集」で切り替えてソースコードを確認してみて下さい。

aタグの記述

リンクのコードは下図のような記述になっています。

aタグの記述

この中で別タブで開く指定をしている部分は、target="_blank" rel="noreferrer noopener"です。

HTMLで直接リンクを記述している場合は、aタグに対してこのように追記を行うことで別タブで開く指定をすることができます。

HTML

 <a href="###" target="_blank" rel="noreferrer noopener" >リンクを開く</a>

まとめ

以上がワードプレスでリンクを別タブで開くように指定する方法です。小さなことですがユーザビリティを高めることが出来ますので使い分けましょう。

関連する記事

サムネイル

ワードプレスの固定ページにPHPファイルを読み込む方法【ショ……

2023年12月04日
ワードプレスの固定ページ(投稿ページ)内にPHPを書いたり、PHPファイルを読み込ませることができたら便利ですよね。「PHPファイルを作成して、ショートコードを使って固定ページ内に読み込ませる」という方法をご紹介します。
サムネイル

コンタクトフォーム7のショートコードをテーマファイル内に埋め……

2023年11月24日
テーマファイル(PHPファイル)内にコンタクトフォーム7のショートコードをそのまま記述しても、フォームを呼び出すことはできません。
サムネイル

ワードプレスで前後の記事の公開日を取得して表示する方法【ge……

2023年10月01日
最終更新日:2023年09月12日
ワードプレスの投稿ページで前後の記事の公開日を表示させたいときはget_previous_postとget_next_post関数を使います。
サムネイル

Elementor(エレメンター)の使い方を徹底解説【ページ……

2023年03月09日
最終更新日:2023年03月10日
Elementorは直感操作でワードプレスのサイトを構築できるページビルダープラグインです。ウィジェットをドラッグアンドドロップしていくだけでページのレイアウトを作成することが可能です。
サムネイル

ワードプレスのログイン画面をカスタマイズする方法【プラグイン……

2023年03月07日
最終更新日:2023年12月08日
ワードプレスのログイン画面はカスタマイズしてロゴや背景を変更することができます。ログイン画面のカスタマイズはプラグインを使うかfunctions.phpを編集して行います。
サムネイル

ワードプレスのコンタクトフォーム7で自動返信メールを設定する……

2023年02月28日
最終更新日:2023年03月10日
ワードプレスのContact Form 7プラグインを使って自動返信メールを設定する手順を解説します。フォームの編集画面で「メール(2)を使用」にチェックを入れると、設定項目が表示されて自動返信ができるようになります。
サムネイル

ワードプレスでログイン履歴を確認する方法【SiteGuard……

2023年01月26日
最終更新日:2023年03月10日
多くのセキュリティ対策プラグイン「SiteGuard WP Plugin」を使ってログイン履歴を確認する方法について解説します。