はんこキャプターやぁのん

好きなものを堂々と好きでいたい。私の興味を綴るブログ。

  ↓各ジャンルの他ブログが読めます↓
にほんブログ村 その他趣味ブログへ にほんブログ村 コレクションブログ スタンプ・風景印へ にほんブログ村 鉄道ブログ 鉄道ぶらり旅へ にほんブログ村 その他趣味ブログ その他珍しい趣味へ

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

記事名と
URLをコピー

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

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

 

下準備:バックアップ

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

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

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

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

前準備: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

リンク式(同じタブ)

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

参考リンク

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

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

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

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

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