【Blogger】JavaScript でコメント内の外部リンクを別タブで開くようにする

2023/01/01 ｜2023/09/28 ｜4

Blogger のコメントにはリンクを張るためのaタグが使えますが、新しいタブで開かせるためのtarget="_blank"属性は使えません。せめて外部リンクだけは別タブで開くようにしたいところ。

JavaScript を使えば出来るのでは？と調べてみたら最適なコードが見つかりました。

DUB DESiGN
JavaScriptの.match()で外部リンクのaタグにtarget="_blank"とrel属性を付与
以前作成した a タグに target="_blank"とrel属性を付与するスニペットに、「外部リンクの時だけ」という条件をつけたスニペットを作りました。
https://dubdesign.net/javascript/matchlink-targetblank/

という訳で、Blogger で適用出来るようにカスタマイズしたコードを紹介したいと思います。今回のカスタマイズでは、コメント内の外部リンク(自ブログ以外の URL のリンク)だけアイコンが付いて新しいタブで開くようになります。

F-light、 QooQ、公式のシンプル、Contempo で問題なく機能することを確認しましたが、それ以外のテーマでもコードを弄れば適用できるかも？

カスタマイズ手順

HTMLを編集しますので必ず予めバックアップを取ってから行って下さい。もしくはテスト用の環境(別ブログ)を用意してそちらで試されることをおすすめします。

JavaScript の設置

以下のコードを</body>の上に設置します。

<b:if cond='data:view.isSingleItem'>
<script>/*<![CDATA[*/
const hrefLink = document.querySelectorAll('.comments p a, .comment-body a'); //対象範囲
window.addEventListener("DOMContentLoaded", () => {
  for (i = 0; i < hrefLink.length; i++) {
    const urlAdd = hrefLink[i].href;
    console.log(urlAdd)
    /*]]>*/
    if (urlAdd.match('^<data:blog.homepageUrl/>')) {}
    /*<![CDATA[*/
    else if (urlAdd.match(/^https?:\/\//)) {
      hrefLink[i].target = "_blank";
      hrefLink[i].rel = "noopener";
      hrefLink[i].insertAdjacentHTML('beforeend', '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin:0 3px;vertical-align:-5%"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>');
    }
  }
});
/*]]>*/</script>
</b:if>

以上です。HTML や CSS の追記は不要です。

他のテーマで機能しない場合は3行目の対象範囲のクラス名を変更すれば機能するかもしれません。

const hrefLink = document.querySelectorAll('コメント本文のクラス名 a');//対象範囲

記事本文にも

対象範囲に記事本文のクラス名を追加すれば、記事内の外部リンクにも適用できます。

例:
const hrefLink = document.querySelectorAll('.comments p a, .comment-body a, .post-body a:not(.separator a):not(.tr-caption-container a)');//対象範囲

.separator a と .tr-caption-container a は画像を除外するための措置です。