サイトアイコン ライティング攻略研究室

[WordPress]リンクページを別窓(別タブ/別ウインドウ)で開く方法

こんにちは、4ミニ.net運営の北です!

ワードプレスを使ってサイトやブログの記事を作っている時、

「このリンクは<別窓=別ウインドウ=別タブ>で表示させたいな」と思うことがあります。

具体的にどういうことかといいますと、読者がリンクをクリックして画面を開いた時に、

クリックした元画面を残しつつ、その上に新しい画面(リンク先の別窓)を表示させたい。

目次

なぜ別窓(別ウインドウ)を使うのか?

今開いている窓で、そのままリンク先のページを表示するとどうなるのか? 読者がリンク先を訪れたまま、元ページに帰ってこない恐れがあります。

元ページに帰ってこない…。これは実際に多い模様です。私自身、もしも別窓ではないページにリンクした場合、

「←マークを押して元ページに戻るのは面倒くさいなあ」だとか、

「×マークを押し、ブラウザを閉じてしまったよ…。元ページに戻りたいけど面倒くさいなあ」

と思ってしまいます。

例えば問い合わせのあるページやランディングページなどに、どうしてもリンクを設置せざるをえない場合。

せっかく問い合わせページまで誘導できたのに、リンクページに移っていったまま「さようなら…」となってしまう可能性が非常に高くなります。

別窓の設置とは、『別窓の情報を確認してもらったら、サクッと窓を閉じてもらって元ページに再訪してもらう』。つまり読者の「戻れないので、さようなら…」を防ぐための防御策でもあるのです。

別窓の設置方法・その1

今開いているページはそのままに、リンク先ページを別窓で表示する方法はとっても簡単です。

ワードプレスの場合、

ページ作成画面にあるチェーンのアイコン「リンクの挿入/表示」を表示させます。

次にリンク先のURLとリンク文字列(表示させる文字)を入力し、「リンクを新しいタブで開く」にチェックを入れ、青い「リンク追加」ボタンを押します。

サイトやブログの中にある既存ページにリンクさせたい場合は、一覧(緑の囲み)から選択します。

「下書きとして保存」し、別窓で開くかをチェックしましょう。

別窓の設置方法・その2

リンク先を別窓にするためには、直接タグを埋め込む方法もあります。

例えば上記で作業した箇所を「ビジュアル」ではなく「テキスト」に切り替えて見てみましょう。

別窓にする前

リンクタグの<a href=”~”>に注目してください(水色下線の箇所)。

別窓に設定したところ

このタグに

target=”_blank”

が追加記述されているのが分かります(赤下線の箇所)。

ワードプレス以外のサイトで別窓を設定する場合は、FTPサーバーなどでHTMLに上記のタグを直接埋め込んでみてください。

【埋め込み例】

別窓に設定する前

別窓に設定したところ

追記するだけで簡単に別窓設定ができます。

モバイルバージョンを終了