Blogger のコメントにはリンクを張るためのa
タグが使えますが、新しいタブで開かせるためのtarget="_blank"
属性は使えません。せめて外部リンクだけは別タブで開くようにしたいところ。
JavaScript を使えば出来るのでは?と調べてみたら最適なコードが見つかりました。
DUB DESiGNJavaScriptの.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 は画像を除外するための措置です。
実装後のスクショ
F-light 以外のフルページ / ポップアップでは、コメント投稿リンクにもアイコンが付き、フルページは別タブで開くようになります。
F-light ライトモード |
F-light ダークモード |
QooQ 埋め込み |
QooQ フルページ / ポップアップ |
最後に
今回のカスタマイズがどなたかのお役に立てれば幸いです。
さて、昨年は自作テーマ F-light のリリースも相まって Blogger やカスタマイズ関連の記事ばかりになってしまいました。今年は日記的な内容の雑記や趣味の音楽や写真記事等、もっと自分本位?の記事の割合を増やしたいな、と思ってはいるものの、正直ここではちょっと書きづらくなってきたなと…。
ここは Blogger 関連に特化して、それ以外の記事は別タブ…じゃなくて別ブログを立ち上げてそっちでこっそりひっそりと書くのもありかも、なんて思ってたりもします。
まだ何も決めてなくてどうなるかはわかりませんが、いずれにしてもこの「ふじろじっく」はこれからもマイペースで続けていくつもりですので、今年もどうぞよろしくお願い致しますm(_ _)m
コメントを投稿
別ページに移動します4 件のコメント (新着順)
ふじやん
> djug さん
今回のカスタマイズがお役に立てれば幸いです。
私もカスタマイズは楽しくて好きですが、お互いカスタマイズの沼にハマり過ぎて記事を書くのがおろそかにならないように気をつけましょう(笑)
djug
早速僕のブログでも、導入させていただきました。
テーマをカスタマイズすると楽しいですね!
ふじやん
> BINUBALL さん
あけましておめでとうございます。
昨年は Blogger カスタマイズで色々お世話になりました。
今年もよろしくお願いします。
BINUBALL
2023年明けましておめでとうございます