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

2024/10/054
アイキャッチ

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 で問題なく機能することを確認しましたが、それ以外のテーマでもコードを弄れば適用できるかも?

CONTENTS

カスタマイズ手順

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 は画像を除外するための措置です。

実装後のスクショ

F-light 以外のフルページ / ポップアップでは、コメント投稿リンクにもアイコンが付き、フルページは別タブで開くようになります。

F-light ライトモード コメント外部リンクアイコン
F-light ライトモード
F-light ダークモード コメント外部リンクアイコン
F-light ダークモード
QooQ 埋め込みコメント外部リンクアイコン
QooQ 埋め込み
QooQ フルページコメント外部リンクアイコン
QooQ フルページ / ポップアップ

最後に

今回のカスタマイズがどなたかのお役に立てれば幸いです。

さて、昨年は自作テーマ F-light のリリースも相まって Blogger やカスタマイズ関連の記事ばかりになってしまいました。今年は日記的な内容の雑記や趣味の音楽や写真記事等、もっと自分本位?の記事の割合を増やしたいな、と思ってはいるものの、正直ここではちょっと書きづらくなってきたなと…。

ここは Blogger 関連に特化して、それ以外の記事は別タブ…じゃなくて別ブログを立ち上げてそっちでこっそりひっそりと書くのもありかも、なんて思ってたりもします。

まだ何も決めてなくてどうなるかはわかりませんが、いずれにしてもこの「ふじろじっく」はこれからもマイペースで続けていくつもりですので、今年もどうぞよろしくお願い致しますm(_ _)m