Mutter
編集

【Blogger】リンクアイコンを自動で貼り付ける

｜2024/11/03
アイキャッチ画像
よそ様のブログやサイトを見ていると、、、

リンクのアイコンが付いてる

リンクアイコン
こういう奴

自分もやりたいな、、、と思いつつも

やり方が解らないからやってませんでした

んが

ChatGPTに聞いたら出来るかな？

ちょっと聞いてみるか。。。


※注意
この記事はBlogger、テーマはF-Lightでのカスタマイズです
他のテーマ、ブログサービスでは確認できておりません
Blogger、F-Light以外の方は参考までに

リンクアイコンを自動で貼付け

聞いてみたら意外とあっさり元となる答えを教えてくれたんですが、、、

それからの調整で苦労しました

素人で知識がないから、、、

ChatGPTに聞く～やってみる～ChatGPTに聞く～やってみる、、、

なんとかできました

外部リンク
※自分のXに飛びます

内部リンク
※当ブログのホームに飛びます

ブログ全体ではなく、記事内にリンクアイコンが付くようにしました

ホームでもアイコン付くようにすると処理が面倒臭いのよ、、、

今後、変更して新たな要素が出てきたらまた処理、、、

面倒なんでホーム（ＴＯＰページ）はやめました(^^;


アイコン付くようにするだけで出来る男感がでるな（笑）


アイコンの準備

アイコンはSVGを使うのですが、、、

F-Lightは標準でSVGアイコンが幾つかアップされてます

その中に外部リンクのアイコンはあったのでそれを使いました

内部リンクアイコンはなかったので

Fontawesomeからダウンロード

Fontawesome、Link検索
linkで検索すると一番に出てきました
コレ使います

Linkアイコンダウンロード
ダウンロードしてください

それをメモ帳で開いてください
テキストとして見たいわけです 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>

これをBloggerにアップする為に少し書き換え

<symbol id='svg-internal-link' viewBox='0 0 640 512'><path d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/></symbol>

これをHTMLの編集で <!-- SVG --> に追加します

HTML内SVG

SVGの所に<symbol>でアイコンがアップされてます
ここに追加します
ちなみに、、、
尚、このようにダウンロードしたアイコンコードを個別に使用する場合は、HTML内や専用ページ内等にライセンスを記載しておいたほうが無難なようです。
F-Light製作者／ふじやんさん

F-Lightは記載されていますのでなにもしなくてもOKです


HTML編集

アイコンの準備ができたらHTMLの編集です

というかF-Light使ってる方ならコピペで終わります


まず外部も内部も両方アイコンが付くコード
　<!-- リンクアイコン自動追加 -->
<script>
  document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    // 記事内のすべてのリンクを取得
    const articleLinks = document.querySelectorAll(&#39;.post-body a&#39;);
    const currentDomain = window.location.hostname;  // 現在のドメインを取得

    articleLinks.forEach(link =&gt; {
      try {
        const url = new URL(link.href);  // URLオブジェクトを作成

        // figure、separator、#tocタグを含むリンクを除外
        if (!link.closest(&#39;figure&#39;) &amp;!link.closest(&#39;.separator&#39;) &amp;!link.closest(&#39;#toc&#39;)) {

          // 内部リンクの場合&#65288;同じドメイン&#65289;
          if (url.hostname === currentDomain) {
            link.classList.add(&#39;internal-link&#39;);  // 内部リンク用のクラスを追加

            // 内部リンク用のSVGアイコンを作成
            const svgIcon = document.createElementNS(&#39;http://www.w3.org/2000/svg&#39;, &#39;svg&#39;);
            svgIcon.setAttribute(&#39;aria-label&#39;, &#39;内部リンク&#39;);
            svgIcon.classList.add(&#39;svg&#39;, &#39;svg-internal-link&#39;);

            const use = document.createElementNS(&#39;http://www.w3.org/2000/svg&#39;, &#39;use&#39;);
            use.setAttributeNS(&#39;http://www.w3.org/1999/xlink&#39;, &#39;href&#39;, &#39;#svg-internal-link&#39;);
            svgIcon.appendChild(use);

            // アイコンをリンクに追加
            link.appendChild(svgIcon);

          // 外部リンクの場合&#65288;異なるドメイン&#65289;
          } else {
            link.classList.add(&#39;external-link&#39;);  // 外部リンク用のクラスを追加

            // 外部リンク用のSVGアイコンを作成
            const svgIcon = document.createElementNS(&#39;http://www.w3.org/2000/svg&#39;, &#39;svg&#39;);
            svgIcon.setAttribute(&#39;aria-label&#39;, &#39;外部リンク&#39;);
            svgIcon.classList.add(&#39;svg&#39;, &#39;svg-external-link&#39;);

            const use = document.createElementNS(&#39;http://www.w3.org/2000/svg&#39;, &#39;use&#39;);
            use.setAttributeNS(&#39;http://www.w3.org/1999/xlink&#39;, &#39;href&#39;, &#39;#svg-external-link&#39;);
            svgIcon.appendChild(use);

            // アイコンをリンクに追加
            link.appendChild(svgIcon);
          }
        }
      } catch (error) {
        console.error(&#39;リンクの解析中にエラーが発生しました:&#39;, link.href, error);
      }
    });
  });
</script>
これを</body>の前に貼付けてください


外部リンクだけにアイコンが付くコード
  <!-- 外部リンクアイコン自動追加 -->
<script>
  document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    // 記事内のすべてのリンクを取得
    const articleLinks = document.querySelectorAll(&#39;.post-body a&#39;);
    const currentDomain = window.location.hostname;  // 現在のドメインを取得

    articleLinks.forEach(link =&gt; {
      try {
        const url = new URL(link.href);  // URLオブジェクトを作成

        // figure、separator、#tocタグを含むリンクを除外
        if (url.hostname !== currentDomain &amp;!link.closest(&#39;figure&#39;) &amp;!link.closest(&#39;.separator&#39;) &amp;!link.closest(&#39;#toc&#39;)) {

          link.classList.add(&#39;external-link&#39;);  // 外部リンク用のクラスを追加

          // SVGアイコンを作成
          const svgIcon = document.createElementNS(&#39;http://www.w3.org/2000/svg&#39;, &#39;svg&#39;);
          svgIcon.setAttribute(&#39;aria-label&#39;, &#39;外部リンク&#39;);
          svgIcon.classList.add(&#39;svg&#39;, &#39;svg-external-link&#39;);

          const use = document.createElementNS(&#39;http://www.w3.org/2000/svg&#39;, &#39;use&#39;);
          use.setAttributeNS(&#39;http://www.w3.org/1999/xlink&#39;, &#39;href&#39;, &#39;#svg-external-link&#39;);
          svgIcon.appendChild(use);

          // アイコンをリンクに追加
          link.appendChild(svgIcon);
        }
      } catch (error) {
        console.error(&#39;リンクの解析中にエラーが発生しました:&#39;, link.href, error);
      }
    });
  });
</script>
お好きな方を使ってください
figure でブログカードに .separator  で画像に #toc で目次に
アイコンが付かないようにしてます

作っている途中に<more>タグにもアイコンが付くけど、、、

<span>で除外してみたり、、、

tocで目次も除外したいのに消えない、、、

あっ、Google先生に全く聞いてないわ！！

そういやぁ、誰か同じ事やってる人いるだろう。。。

なんで最初にGoogle先生に聞かなかったんだろう。。。

もしかしたら今までの時間は無駄だったのかも。。。

その時に参考にしたのが

【 QooQ カスタマイズ 】 Blogger ブログでリンクの装飾を CSS でカスタマイズ 【 外部リンクアイコン他 】

【 QooQ カスタマイズ 】 Blogger ブログでリンクの装飾を CSS でカスタマイズ 【 外部リンクアイコン他 】

ここでは、外部リンクと内部リンクを区別するため、a タグにリンクアイコンを付ける方法を紹介します。また、マウスカーソルがリンクの上に乗ったとき、色が変わる調整も一緒にやっています。

ファビコンindoor-days.blogspot.com

目次を除外するにはtocに#が必要だったとは、、、
ここ見ないとわからなかった。。。

結果的にChatGPTに聞いて作ったコードで上手く動いてます

途中で悩んだ<more>タグに付いてたアイコンは、最終的に<more>タグ指定していないのに消えました。。。

記事内のリンクを取得するコードが変わったのかな？？？



追　記 
<!-- リンクアイコン自動追加 -->
<script>document.addEventListener(&#39;DOMContentLoaded&#39;, function() {const articleLinks = document.querySelectorAll(&#39;.post-body a&#39;);const currentDomain = window.location.hostname;articleLinks.forEach(link =&gt; {try {
const url = new URL(link.href);if (!link.closest(&#39;figure&#39;) &amp;!link.closest(&#39;.separator&#39;) &amp;!link.closest(&#39;#toc&#39;)&amp;!link.closest(&#39;.appreach&#39;)) {if (url.hostname === currentDomain) {const svgIcon = document.createElementNS(&#39;http://www.w3.org/2000/svg&#39;, &#39;svg&#39;);svgIcon.setAttribute(&#39;aria-label&#39;, &#39;内部リンク&#39;);svgIcon.classList.add(&#39;svg&#39;, &#39;svg-internal-link&#39;);const use = document.createElementNS(&#39;http://www.w3.org/2000/svg&#39;, &#39;use&#39;);use.setAttributeNS(&#39;http://www.w3.org/1999/xlink&#39;, &#39;href&#39;, &#39;#svg-internal-link&#39;);svgIcon.appendChild(use);
link.appendChild(svgIcon);} else {link.classList.add(&#39;external-link&#39;);const svgIcon = document.createElementNS(&#39;http://www.w3.org/2000/svg&#39;, &#39;svg&#39;);svgIcon.setAttribute(&#39;aria-label&#39;, &#39;外部リンク&#39;);svgIcon.classList.add(&#39;svg&#39;, &#39;svg-external-link&#39;);const use = document.createElementNS(&#39;http://www.w3.org/2000/svg&#39;, &#39;use&#39;);use.setAttributeNS(&#39;http://www.w3.org/1999/xlink&#39;, &#39;href&#39;, &#39;#svg-external-link&#39;);svgIcon.appendChild(use);link.appendChild(svgIcon);}}} catch (error) {console.error(&#39;リンクの解析中にエラーが発生しました:&#39;, link.href, error);}});});</script>
改行他を削除しまくりで気持ちだけでも圧縮、軽量化で高速化！！（笑）
除外に .appreach を追加しています

アプリーチのレイアウトが気に入らないのでCSS変更 | Trekking from Kochi

アプリーチのレイアウトが気に入らないのでCSS変更 | Trekking from Kochi

アプリーチを使うとレイアウトが、、、標準のCSSを使用せずに好きなレイアウトのCSS使う事にしました

ファビコンkochimountaingo.blogspot.com

アプリーチのレイアウトをCSSで整えました


更に追記

パタゴニア【patagonia】アフィリエイト申請から承認まで | Trekking from Kochi

パタゴニア【patagonia】アフィリエイト申請から承認まで | Trekking from Kochi

パタゴニのアフィリエイトは申請から承認まで時間がかかりますよ。。。

ファビコンkochimountaingo.blogspot.com

パタゴニアのアフィリエイト承認されて記事を書いたんですが
リンクアイコンが付く、、、
class がない、、、
って事で url で除外するようにしました 
<script>document.addEventListener(&#39;DOMContentLoaded&#39;, function() {const articleLinks = document.querySelectorAll(&#39;.post-body a&#39;);const currentDomain = window.location.hostname;articleLinks.forEach(link =&gt; {try {
const url = new URL(link.href);if (!link.closest(&#39;figure&#39;) &amp;!link.closest(&#39;.separator&#39;) &amp;!link.closest(&#39;#toc&#39;)&amp;!link.closest(&#39;.appreach&#39;)&amp;!url.href.includes(&#39;linksynergy&#39;)) {if (url.hostname === currentDomain) {const svgIcon = document.createElementNS(&#39;http://www.w3.org/2000/svg&#39;, &#39;svg&#39;);svgIcon.setAttribute(&#39;aria-label&#39;, &#39;内部リンク&#39;);svgIcon.classList.add(&#39;svg&#39;, &#39;svg-internal-link&#39;);const use = document.createElementNS(&#39;http://www.w3.org/2000/svg&#39;, &#39;use&#39;);use.setAttributeNS(&#39;http://www.w3.org/1999/xlink&#39;, &#39;href&#39;, &#39;#svg-internal-link&#39;);svgIcon.appendChild(use);
link.appendChild(svgIcon);} else {link.classList.add(&#39;external-link&#39;);const svgIcon = document.createElementNS(&#39;http://www.w3.org/2000/svg&#39;, &#39;svg&#39;);svgIcon.setAttribute(&#39;aria-label&#39;, &#39;外部リンク&#39;);svgIcon.classList.add(&#39;svg&#39;, &#39;svg-external-link&#39;);const use = document.createElementNS(&#39;http://www.w3.org/2000/svg&#39;, &#39;use&#39;);use.setAttributeNS(&#39;http://www.w3.org/1999/xlink&#39;, &#39;href&#39;, &#39;#svg-external-link&#39;);svgIcon.appendChild(use);link.appendChild(svgIcon);}}} catch (error) {console.error(&#39;リンクの解析中にエラーが発生しました:&#39;, link.href, error);}});});</script>

除外の項目に url.href.includes('linksynergy') を追加しています
これで楽天LinkShareにはアイコンが付かなくなります
urlの中に linksynergy があると除外されます
他のサービスで linksynergy が付く事はないと思いますが一応注意してください


余談、、、

ウチだけでしょうか？

過去記事の画像classに.separator 付いてなくリンクアイコンが付くんです

なぜ.separator が付いていないのかはわかりません。。。

ウチは山へ遊びに行った日記は画像がめちゃめちゃ多いです

これ全てclass追加は記事数、画像数が多すぎてやってられません

そこで除外の項目にimgを追加しました

url.href.includes('img')

これでurlにimgが含まれる物にはアイコンが付かなくなります

img全て指定になりますのでご注意ください


アイコンのサイズ調整

CSSを追加でサイズ調整できます

SVGのCSS
ここにCSSを追加します 


.internal-link svg {
  margin: 0 4px 0 3px;
  vertical-align: -6%;
  font-size: 1.5m;
}
.external-link svg {
  margin: 0 4px 0 3px;
  vertical-align: -6%;
  font-size: 1.3rem;
}

font-sizeでアイコンの大きさ変えられます
好みのサイズに変えてください


まとめ＆注意点

今のところブログ内を見て回っても変な所はありません

素人がChatGPTに聞いて、こんなもんが作れるとは凄い時代ですね。。。

た～だ～、素人なんでChatGPTに聞いた事が間違っていてもそれを間違いだと気が付いてない可能性もあります

なにか不具合あってもコード修正とか、新たなコードを作るなんて対応はできませんのでご自身で解決してください

それと、、、

不具合ではないんですがチェックしている時に気になったのは、、、

画像のすぐあとにリンク貼ってたり、引用や枠の後にリンク貼っている場合

記事書いている時の改行の仕方によるんですが、、、

記事HTML注意点
画像要素を閉じる</div>が文章のあとにきてしまっている時
そうすると文字も画像要素と捉えてリンクアイコン付きません

改行HTML
画像の所で改行するとclassがseparatorになったりします
こうなるとその行は画像要素と判断してリンクアイコン付きません
これ作成ビューで見てても全く気が付きません
HTMLビューで見ないと判らないので注意してください

画像アップしてShift押しながら改行したりするとこんな感じになる場合があると思います

玄人さんはHTMLビューで記事を書くようなんですが、自分みたいな素人は作成ビューで記事を書くのでHTMLビューでチェックするまで気が付きません

今回のコード作ってテストしている時、これがどうしてか理解できず慌てました。。。

普通？は作成ビューで記事書く人が多いと思います

アレ？と思ったら、こういう所をチェックしてみてください


昔の記事をチェックしてみたら、、、

何故か <separator> タグが付いてない画像がめちゃめちゃある、、、

山の日記なんか画像ばっかりです、、、

全て手作業で <separator> タグをつけるなんて嫌だ、、、

ちょっとお見苦しい記事もありますが勘弁ししてください(^^;

<separator> タグが付いてない画像の除外の仕方がわからない。。。



素人がChatGPTに聞いて作った物です

何か間違い等があったら教えてください

m(__)m


Bloggerカスタマイズ

ZEROからF-lightへBloggerテーマ変更 | Trekking from Kochi

ZEROからF-lightへBloggerテーマ変更 | Trekking from Kochi

BloggerのテーマをZEROからF-liteへ変更、カスタマイズの記事もここにまとめてます

ファビコンkochimountaingo.blogspot.com
その他のカスタマイズはコチラにまとめてます