【はてなブログ-カスタマイズ】外部リンクを別タブで開くようにしてみる（JavaScript対応）

せっかくHTML5の資格を取得したので、JavaScriptを追加して外部リンクを別タブで開く対応をしてみようと思います。
※HTML5の資格、”HTML”と言いつつレベル2はほぼJavaScriptなのです。

ちなみに今回の対応、ネットで検索すると既にいくつか記事がヒットします。
なのでそれらの記事からのコピペ対応でもおそらく対応できたのですが、せっかくなので自力でJavaScriptを書いてみました。

なお、HTML5の合格体験記は投稿済みです。こちらも良ければぜひ。
※JavaScriptはどちらかというとレベル2の領域です。

こちらも良ければ

ではどんな対応をしたか書いていきます。

リンクについて
対応前後の挙動
JavaScript
JavaScriptの適用手順
注意事項
おわりに
関連記事

リンクについて

まず、はてなブログにはリンクが３種類あり、

URL：別タブで開かない
タイトル：別タブで開かない
埋め込み：別タブで開く

という仕様のようです。

なので今回の対応対象はURL・タイトルの２つになります。
埋め込みは元々別タブで開くようなので挙動は変えません。

「全部、埋め込みにすればいいんじゃない？」という話ではあるのですが、そうするとちょっとゴチャつきそうだなーという感じがしており。
リンク割とたくさん貼るので使い分けたいな。でも外部リンクは別タブにしたいな。という謎のこだわりが今回の記事となります。

対応前後の挙動

まずは手っ取り早く、対応前後の挙動を載せます。

対応前（困っている挙動）

「タイトル」が別タブで開いてくれない。。（「URL」も同様の挙動。）

対応後

JavaScirpt適用後、「タイトル」が別タブで開くようになりました。（「URL」も同様の挙動。）

補足

上記の挙動は外部リンクに関してです。
内部リンク（自ブログ内）に関しては別タブで開くと個人的にちょっとウザい。。
なので別タブで開かないようにしています。

JavaScript

今回適用したJavaScriptはこちらです。
リンクの中で「外部サイトだけ」別タブで開くようにしたJavaScriptです。

<script>
window.addEventListener("load", function() {
    const aTags = document.querySelectorAll("a[href^='http']");
    aTags.forEach((aTag) => {
        if (aTag.href.indexOf(location.hostname) === -1) {
            aTag.setAttribute("target", "_blank");
        }
    });
});
</script>