TES Blog

株式会社テクニカルエンジニアリングサポートに所属する社員が、自身が携わるテクノロジーやイベントに関する情報を発信しています。

jQuery を使わずに、はてなブログの外部参照リンクを target="_blank" にする方法

はじめに

TES で Web エンジニアをしている Hayato Yamashita です。

最近 TES では、外部情報発信の取り組みとして TES Blog を開設しました。
既にいくつか記事をあげていますので、良かったら他の記事も読んでみてください。

記事一覧 - TES Blog

さて、その開設にあたって私の方でいくつか設定をしていたのですが、社員より以下の要望をもらいました。

href の飛び先を別タブにすることは可能?

こちらの方法を調べましたので、記事として共有します。

外部参照リンクを target="_blank" にする

調べたところ、HTML(JavaScript)を使えばできるみたいです。

主なやり方については、以下の記事を参考にさせていただきました。
ありがとうございます。

yoshiko.hatenablog.jp

こちらの記事は Markdown で書かれていますが、このやり方なら編集モードが「見たまま」でも「はてな記法」でも有効ですね。

しかし、このコードのままだと jQuery を使っています。

別に jQuery がダメってことではありませんし、個人的に嫌いなわけでもないのですが、これをするためだけに jQuery を使わなければならないのは、ちょっと大げさです。

なので、上記の記事を参考にして、jQuery を使わないコードにしました。

その結果がこちらのコードです

<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function () {
    var nodeList = document.querySelectorAll("a[href^='http']:not([href*='" + location.hostname + "'])")
    Array.prototype.forEach.call(nodeList, function (v) {
      v.setAttribute('target', '_blank')
    })
  })
</script>

やっていることは元記事と変わりません。
一応、IE11 でも動くような書き方に対応しているくらいです。

これをはてなブログの

設定 > 詳細設定 > 検索エンジン最適化 > headに要素を追加

に入力して保存すると、リンク先が外部サイトの場合だけ新規タブで開かれるようになります。

おわりに

検証していませんが、Markdown で JavaScript を使いたくない場合には、以下のやり方もあるようです。

tauplank.hatenablog.com

これだと一箇所ずつに書いていかないといけないため、今回は JavaScript による制御としました。

宜しければ、ご活用ください。