はてなブログの小技

【はてなブログの小技】外部リンクを別タブで開く方法 - 別タブで開くべき理由とは?

2020-10-20

はてなブログの小技 タイトル

こんにちは、のぴたん係長です^^

はてなブログで記事を書いていて困ったことと、その解決方法を書いていきいます。

今回は、外部リンク(外部サイトへのリンク)を別タブで開く方法 です。

注意事項

ここで紹介するやり方は はてなブログPro が前提です。

無料版ではできませんので、ご了承ください。

外部リンクを別タブで開くべき理由

例えば、ゲームを紹介する記事を書いていて、そのゲームのオフィシャルサイトへのリンクを記事に入れたとします。

もし、そのリンクが同じタブ内で開くようになっていると、読者がそのリンクをクリックした時点で、自分のサイトから離脱してしましまい、記事の残りの部分は読まれない可能性が高くなります。

せっかく訪問してくれたのですから、最後まで読んでほしいですよね。

そんな時は、リンク先を別のタブで開くようにすればOKです!

別タブで開けば、元のタブでは自分の記事を開いたままとなります。

以下は、別タブで開くようにしたリンクの例です。(僕の趣味がゲームなので、リンクの例もゲーム関連のサイトでになってます。スミマセン^^;)

試しにクリックしてみてください。

SEKIRO: SHADOWS DIE TWICE のオフィシャルサイトはコチラ

SEKIRO: SHADOWS DIE TWICE | 隻狼

はてなブログの 見たままモード では、URLを張り付けると自動的にリンクを作成してくれます。

とても便利なのですが、タイトルURL 形式でリンクを挿入した場合、リンク先は同じタブ内で開くようになっていますので、別タブで開くように変更しましょう。

外部リンクを別タブで開く方法

まず、画面左上の HTML編集 をクリックして、HTMLモード にします。

リンクを別タブで開く①

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

リンクを別タブで開く②

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

リンクを別タブで開く③

ここでは、以下のHTMLコードを追加しました。

target="_blank" rel="noopener noreferrer"

作業はたったのこれだけ、簡単ですね!

内部リンクはそのままで

外部リンクは別タブで開くべきですが、内部リンク(自分のサイト内へのリンク)は、基本的には同じタブのままでOKです。

自分のサイト内にとどまってくれているのですから、別タブにする理由はありませんね!

逆に、内部リンクを別タブにすると、読者に不快感を与えてしまう可能性がありますので、注意してください!

例えば、あなたが読んでいる記事の中で別の記事が紹介されていて、それも気になってリンクをクリックして読んだとします。

そうやって次々にリンクをたどって幾つかの記事を読んでいたら、いつの間にかタブがいっぱい開いていて、しかもそれらすべて同じサイト内のページを開いていました。

・・・さて、この状況、あなたはどう感じますか?

それでは、今回はこの辺で。

-はてなブログの小技
-, , , , , , , ,

© 2021 のぴたん係長のブログ