【JavaScript】ブランクが入っているアンカーリンクに自動的に別タブリンクアイコンを付与する

2026年06月01日

WEBサイト制作

#HTML
#css
#JavaScript
#tips

こんにちは！
上毛印刷WEB制作担当のソーヤです。

みなさん、CMSは使っていますか？
弊社は基本的にWEBサイトにはCMSを導入しています。

CMSを導入するメリットの一つに、
お客様がページ更新をできるようにするというものがあります。

WYSIWYGエディタやブロックエディタで更新しますよね。
でもその際、リンクを_blankにしたとき、どうしてますか？
マニュアルでタグを挿入してますか？
エディタをカスタマイズしてclassをつけていますか？

結構面倒ですよね。
そんな貴方に便利なtipsを紹介します。

実装例

HTML例

<ul class="list">
    <li><a href="https://www.kosho.or.jp/abouts/?id=12031530" type="link" id="https://www.kosho.or.jp/abouts/?id=12031530" target="_blank" rel="noreferrer noopener">◇上毛書店</a></li>
    <li><a href="https://www.kosho.or.jp/abouts/?id=12031530" type="link" id="https://www.kosho.or.jp/abouts/?id=12031530" rel="noreferrer noopener">◇戸田工場</a></li>
    <li><a href="https://www.kosho.or.jp/abouts/?id=12031530" type="link" id="https://www.kosho.or.jp/abouts/?id=12031530" target="_blank" rel="noreferrer noopener">◇池袋パレス</a></li>
  </ul>

CSS例

.blankIcon{
  position: relative;
}
.blankIcon::before {
  content: '';
  position: absolute;
  top: 0px;
  right: -35px;
  width: 16px;
  height: 11px;
  background: #fff;
  border: 1px solid #000;
  z-index: 2;
}
.blankIcon::after {
  z-index: 1;
  content: '';
  position: absolute;
  top: 4px;
  right: -30px;
  width: 16px;
  height: 11px;
  background: #fff;
  border: 1px solid #000;
}

JavaScript例

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('a[target="_blank"]').forEach(function(a) {
    a.insertAdjacentHTML('beforeend', '');
  });
});

target=”_blank”がはいったアンカーリンクに自動的に別タブアイコンが入るようになります。