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

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

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

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

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

21-7

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

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

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

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

21-9

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

21-10

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

と思ってしまいます。

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

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

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

別窓の設置方法・その1

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

ワードプレスの場合、

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

21-5

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

21-6

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

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

21-7

別窓の設置方法・その2

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

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

21-12

別窓にする前

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

21-13

別窓に設定したところ

このタグに

target=”_blank”

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

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

【埋め込み例】

21-0

別窓に設定する前

21-2

別窓に設定したところ

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

北 秀昭

4ミニ.net運営者。サイト運営のほか、専門誌や情報誌のライティングやディレクション、ウェブコンテンツのSEOライティングなども手掛けている。