qooq外部リンクアイコン導入

外部リンクアイコンを置く記事を作成しました。修正しているうちに膨大な量になってきたので、あえて分割して覚え書きにする必要性に迫られたので、以下に今まで使用していたコードと新たな最新版を掲載しておきます。

古いコード

<b:if cond='data:view.isSingleItem'>

<script>/*<![CDATA[*/

const hrefLink = document.querySelectorAll('.comments p a, .comment-body a, .post-body a:not(.separator 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>

こちらを  <p id='designed-by'><a href='http://qooq.dododori.com' target='_blank'>QooQ</a></p>の下あたりに貼り付けています。

2026年版のコード

<b:if cond='data:view.isSingleItem'>

<script type='text/javascript'>

//<![CDATA[

window.addEventListener("DOMContentLoaded", function() {

  const hrefLink = document.querySelectorAll('.comments p a, .comment-body a, .post-body a:not(.separator a)');

  // 自分のドメイン名（例: example.blogspot.com）を取得

  const myDomain = window.location.hostname;

  for (let i = 0; i < hrefLink.length; i++) {

    const link = hrefLink[i];

    const url = link.href;

    // 1. リンク先が自分のドメインを含んでいるか？

    // 2. もしくは、リンクが「/」から始まる内部パスか？

    // これら（内部リンク）の場合はアイコンを付けずにスキップ

    if (url.indexOf(myDomain) !== -1 || url.indexOf('/') === 0 || !url.startsWith('http')) {

      continue;

    }

    // 上記以外（完全に外のサイト）の場合のみ処理

    link.target = "_blank";

    link.rel = "noopener";

    link.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>