【はてなブログ】外部リンクを新しいタブで開くようにした。

自分で書いたはてなブログを見てみると、外部リンクをクリックしても、同じタブから遷移してしまっていることに気付いた。

せっかくなら別タブ(新しいタブ)を開いてほしい。

f:id:gerres72:20190821062213p:plain
リンクをクリックすると

f:id:gerres72:20190821062318p:plain
新しいタブで開いてくれる

これもまたWordpressだと簡単に設定できるものなのだが、はてなブログは若干手間取った。

ちなみに私は最近『見たまま編集』から『はてな記法』に切り替えた。はてな記法だとURL貼ったら自動でリンクの貼り方を選ぶ画面を表示してくれたりと、慣れれば書きやすい記法であることに気付いたからだ。

外部リンクを新しいタブで開くための設定方法

で、以下記事の設定値をヘッダーに貼り付ける手段が最も効率が良いため、こちらを採用した。

以下のコードをヘッダーに貼り付けるだけ。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script language="JavaScript">
$(document).ready( function () {
   $("a[href^='http']:not([href*='" + location.hostname + "'])").attr('target', '_blank');
})
</script>

ヘッダーは『設定』→『詳細設定』→『headに要素を追加』欄にコピペすればオーケー。
f:id:gerres72:20190821062815p:plain

この手法の良い所は、リンク先のドメインが異なる場合のみ新しいタブに遷移してくれる点だ。

すなわち、内部リンク(自ブログの他ページへのリンク)は同じタブで遷移してくれる。ただし、ブログカードの場合は内部リンクであろうと新しいタブになる。

【はてなブログ】子カテゴリを作りカテゴリを階層化させてみた。 - 傷鴨日記