はてブのぶ

はてブ大好きの覚え書き

はてなブログ<a>リンクが別タブで開くように設定する方法【コードrel属性あり】

はてなブログ外部リンクを新規タブで開く

記事のリンクをクリックした時に、外部サイトは「新しいタブ」で開きたい。

 

はてなブログは、デフォルトで、リンクが全て同じページで開いてしまうようなので、
外部サイトへのリンクを別タブで開くようにします。

 

headerに記載するコード

target="_blank"を使用します。フィッシング詐欺対策でrel="noreferrer noopener"も<a>タグに付与するようにしました。

コードはheaderに記載します。

【記載するコード】

<!-- リンクを別タブで開く -->
<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',
rel: 'noreferrer noopener'
});
})
</script>

【コードを記載する場所】

「設定」→「詳細設定」で設定します。

はてなブログ詳細設定のheader設定

スクロールして下の方に出てくる「<head>要素にメタデータを追加」欄にコードを記載します。

はてなブログheaderにコードを記載

ページ下部の「変更する」ボタンを押して、変更を確定します。

これで、外部サイトへのリンクが別タブで開くようになります。