
こんにちは、のぴたん係長です^^
はてなブログで記事を書いていて困ったことと、その解決方法を書いていきいます。
今回は、外部リンク(外部サイトへのリンク)を別タブで開く方法 です。
注意事項
ここで紹介するやり方は はてなブログPro が前提です。
無料版ではできませんので、ご了承ください。
目次
外部リンクを別タブで開くべき理由
例えば、ゲームを紹介する記事を書いていて、そのゲームのオフィシャルサイトへのリンクを記事に入れたとします。
もし、そのリンクが同じタブ内で開くようになっていると、読者がそのリンクをクリックした時点で、自分のサイトから離脱してしましまい、記事の残りの部分は読まれない可能性が高くなります。
せっかく訪問してくれたのですから、最後まで読んでほしいですよね。
そんな時は、リンク先を別のタブで開くようにすればOKです!
別タブで開けば、元のタブでは自分の記事を開いたままとなります。
以下は、別タブで開くようにしたリンクの例です。(僕の趣味がゲームなので、リンクの例もゲーム関連のサイトでになってます。スミマセン^^;)
試しにクリックしてみてください。
SEKIRO: SHADOWS DIE TWICE のオフィシャルサイトはコチラ
はてなブログの 見たままモード では、URLを張り付けると自動的にリンクを作成してくれます。
とても便利なのですが、タイトル や URL 形式でリンクを挿入した場合、リンク先は同じタブ内で開くようになっていますので、別タブで開くように変更しましょう。
外部リンクを別タブで開く方法
まず、画面左上の HTML編集 をクリックして、HTMLモード にします。

次に、別タブで開きたいリンクの <a> タグを見つけます。

最後に、<a> タグに、リンク先を別タブで開くためのHTMLコードを追加します。

ここでは、以下のHTMLコードを追加しました。
target="_blank" rel="noopener noreferrer"
作業はたったのこれだけ、簡単ですね!
内部リンクはそのままで
外部リンクは別タブで開くべきですが、内部リンク(自分のサイト内へのリンク)は、基本的には同じタブのままでOKです。
自分のサイト内にとどまってくれているのですから、別タブにする理由はありませんね!
逆に、内部リンクを別タブにすると、読者に不快感を与えてしまう可能性がありますので、注意してください!
例えば、あなたが読んでいる記事の中で別の記事が紹介されていて、それも気になってリンクをクリックして読んだとします。
そうやって次々にリンクをたどって幾つかの記事を読んでいたら、いつの間にかタブがいっぱい開いていて、しかもそれらすべて同じサイト内のページを開いていました。
・・・さて、この状況、あなたはどう感じますか?
それでは、今回はこの辺で。