外部リンクを別タブで開くようにしました（はてなブログ）

私はブログを書く際、様々なサイトを参照させていただき、記事内に参照先へのリンクを貼ることが多いです。ただ、リンク先へ飛ぶと、記事へ戻りにくくなるのが気になっていました。

そこで、別タブ（別ウィンドウ）で記事のリンク先を開けるよう、設定してみました。

下準備：バックアップ
前準備：jQueryの設定
外部リンクのみ別タブで開く設定
- 動作テスト
参考リンク

下準備：バックアップ

サイトの設定をいじるので、まずはバックアップをします。

記事データをエクスポート
各コードをWordにコピペ保存
お試しサイトへ本番サイトの各コードをコピペ

以上をしました。エクスポートとお試しサイト作成の方法は、「サイトのバックアップとテストサイトの作り方」で紹介しています。（今回はお試しサイトへのインポートまではしていません。）

サイトの仕様を変更する際は、一旦非公開サイトで試してみるようにしています。

前準備：jQueryの設定

jQueryの設定が初めてなら、この設定も行ないます。やったことがあれば飛ばして大丈夫です。

私は過去に設定していたのですが、最新版のコードに修正しました。

「設定」「詳細設定」「headに要素を追加」に以下のコードをコピペします。

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

最新のjQueryの最新のバージョンは、下記のサイトで確認できます。
jQuery Core – All Versions | jQuery CDN

この記事では2020年12月14日時点での最新コードを書いていますが、「jquery-3.5.1」より上に新しいバージョンが追加されていれば、その数字に変えてお使いください。

外部リンクのみ別タブで開く設定

準備ができたらいよいよ本題。

「デザイン」「カスタマイズ」「ヘッダ」「タイトル下」に以下のコードをコピペします。

<script language="JavaScript">
$(document).ready( function () {
$("a[href^='http']:not([href*='" + location.hostname + "'])").attr('target', '_blank');
})
</script>

「変更を保存」したら完了！

これで、記事を読んでる途中にリンク先に飛んでも、戻って来やすくなります。

記事にたどり着いていただいただけでもありがたいですが、せっかくなら色々読んでほしいですからねぇ。

動作テスト

埋め込み式（別タブ）

yaanon.hatenablog.com

リンク式（同じタブ）

開閉式の目次を付けました - はんこキャプターやぁのん

参考リンク

今回の設定は以下のリンクを参考にさせていただきました！このコードの意味、選んだ理由などが詳しく書かれていて、大変ありがたいです。
はてなブログで外部リンクを別ウィンドウで開くようにしました - インサイドシーナ

今回設定したコードでは、自分のサイトは同じタブで開かれます（埋め込みを除く）。サイトのリンク内容で判断してくれるコードだそうです。あらまぁかしこい！

もし、自分のサイトであろうが全て別タブで開いてほしい！という方は、上記のサイト内で方法を紹介されているので、そちらを参照ください。

調べればいろんなカスタマイズができて、楽しいしありがたいです。

みなさまありがとうございます！

#はてなブログ #カスタマイズしました
別タブ（別ウィンドウ）で記事のリンク先を開けるよう、設定してみました。記事を読みながらリンクを押した場合でも、戻るのがラクになります。
-
外部リンクを別タブで開くようにしました（はてなブログ） - はんこキャプターやぁ…https://t.co/DN5ewHHcNu
— やぁのん (@yaanon_21) December 14, 2020