はてなブログの記事内の外部リンクにtarget="_blank"を自動で追加する

はてなブログを始めたはいいのですが、外部リンクを別タブを開かせる方法が分からず調べていました。

一番単純な方法は<a href="" target="_blank"></a>を使う方法ですが、せっかくMarkdownで書いているのに残念感が漂います。

で、調べてみるとやはり同じ問題に突き当たっている方は多くおり、解決方法も紹介されてました。

• markdown記法でリンクをtarget="_blank"にする - エンジニアをリングする
• はてなブログでMarkdown記法の時にリンクにtarget="_blank"を付加する方法 - ひびきあい。
• はてなブログで「はてな記法」「markdown記法」のどちらも別窓リンクを設定する方法

毎年誰かしら書いてるんですねw

で、参照先の記事を見れば解決できるんですが、スクリプトが若干古い感じがするので、今バージョンを残しておきます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {
    $('a[href^="http"]:not([href*="' + location.hostname + '"])').attr('target', '_blank').attr('rel', 'noopener noreferrer');
})
</script>

これを設定 > 詳細設定 > headに要素を追加にコピペすれば、外部リンクが別タブで開かれるようになります。

主な変更点。

• jQueryのバージョンを上げた
• rel="noopener noreferrer"も付与されるようにした

ぜひお試しあれ。

• HTML
• JavaScript