ねこのてもかりたい

子育てとオタクを両立させる方法を日々模索しているアラフォー主腐の雑記帖

【はてなブログ】外部リンクを「別窓で開く」ように設定する方法

おはこんばんわ。むつ丸です。

はてなブログでいじったことの備忘録置き場です。

今回は、「外部リンクを別窓で開く方法」

どこかの誰かのお役に立てば、これ幸い。

 

【はてなブログ】外部リンクを「別窓で開く」ように設定してみた

 

外部リンクは、別窓で開きたい派のようです。
※ちなみに、窓=ウィンドウ、別窓=別ウィンドウ=新規タグの意です

 

自サイトで設定するときは、数が少ないのでその都度「target=”_blank”」を組み込むとできますが、ブログでやるにはこれは面倒だと思って検索しました。 

   はてなブログ 外部リンク 別窓 


結果、はてなブログでは4パターンあることがわかりましたので、ちょこっと手を加えたのを備忘録がてらまとめてみました。

 

 

追加した要素

<rel="noopener noreferrer">

<rel="noopener noreferrer">ってなに?

そのまま別窓で開くと、「別窓で開いたリンク先が悪意のあるものだったら、サイトを改ざんされてしまう恐れがある」から、それを防ぐためのタグなんだって

 

 

記述の仕方はこのあと説明しますが、これがどういう意味のタグなのか、詳しくはこちらのサイト様が説明してくださっているので、読んでみてください。

 

wwg.co.jp

  

ただ、上記サイト様をごらんになればわかりますが、現在は「既にブラウザー側で rel=noopener を自動的につけ加えるセキュリティ対策が施されている」ようですので、追記するのは念のため的な意味合いが強いです。

まぁ、ないよりかはあった方がマシだろうという精神でやっております。

なので、必要ないって方は「rel="noopener noreferrer"」を消して使って下さい。

 

さて、本題に移ります。

 

【1】ひとつずつ設定する

これは先述した方法で、リンクごとに「target=”_blank”」を追記することでできます。

 

コード

<a href="URL" target="_blank" rel="noopener noreferrer">リンク文字列</a>

 

【方法】

リンクを貼る → 「HTML編集」タブ → 直接編集

 

f:id:cafebabymilk:20210307000536j:plain

 

【メリット】

任意のリンクに設定できる

【デメリット】

別窓にしたいリンク全てに手動で設定しないといけない

 ひとつずつ設定しなくてはいけないので、面倒。

 

なので、面倒くさい人は次に行きましょう。

 

【2】全てのリンクを別窓で開くに設定する

上記の方法では面倒なので、ええい!まとめてやっちゃおう!って方法です。

 

これはとても簡単。

head要素にタブを追記するだけです。

 

【方法】

①はてなブログ ダッシュボード「設定」→「詳細設定」タブを開く

f:id:cafebabymilk:20210305011708j:plain

 

②下の方にある「検索エンジン最適化」内の「headに要素を追加」へ下記コードをコピペする

 

コード

<base target="_blank" rel="noopener noreferrer">

f:id:cafebabymilk:20210306153415j:plain



③「変更する」ボタンを忘れずにクリック

 

これで、「はてなブログ内の全てのリンクが別窓で開く」の設定の出来上がりです。
設定を戻したければ、追記したコードを削除すればいいだけです。

 

【メリット】

最初の設定だけで、全てのリンクが別窓で開くようになる。

【デメリット】

自分の記事でも別窓で開いてしまう。

その結果、やたらと別窓を作ってしまう事態を引き起こす。

 

別窓を量産したくないって方は、次の方法もあります。

 

【3】全てのリンクを別窓にするが、開くタブは1つだけ

なんのこっちゃと思うかもしれませんが・・・・・・

まずは、設定の仕方から。

 

前述のタグの「_blank」を適当な文字列に変えるだけ、です。

 

「適当な文字列」なので、"_new" とか "_nekonikoban" でも大丈夫だそうですが、ここでは例として "_new" としておきますね。

 

コード

<base target="_new" rel="noopener noreferrer">

f:id:cafebabymilk:20210306153852j:plain

 他は【2】と同じ。だけど、元のページのリンクから開かれる窓はひとつだけになります。

 

【メリット】

開かれる窓はひとつだけなので、見た目はすっきり。

【デメリット】

開いたリンクが上書きされてしまうので、後で見ようと思ったものが埋もれてしまう。

 

【2】と【3】の違いは?

同じように見える【2】と【3】ですが、違いはなんでしょうか。

ブログ内のリンクを全て別窓に開くことは一緒ですが、開き方に違いがあります。

 

【2】の_blankの場合

f:id:cafebabymilk:20210306160244j:plain

【3】の_newの場合

f:id:cafebabymilk:20210306160312j:plain

こんな感じです。

わかりますでしょうか?

 

【4】自分の記事は同一窓内に、外部リンクのみ別窓にする

最後は jQueryを使った方法です。

ちなみに私もこの方法をとっています。

 

参考にしたサイト様>

www.inside-shiina.com

 

【方法】

①【2】【3】でも使った「headに要素を追加」に以下コードをコピペする

※すでに記述済みであれば不要です。

 

コード

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

f:id:cafebabymilk:20210307151138j:plain

赤字の数字は jQueryのバージョンを示しています。
最新バージョンは、jQuery のサイトで確認できます。

 

② デザイン → カスタマイズ → ヘッダ → タイトル下に以下のコードをコピペする

 

コード

<script language="JavaScript">
$(document).ready( function () {
$("a[href^='http']:not([href*='" + location.hostname + "'])").attr('target', '_blank');
$("a[href^='http']:not([href*='" + location.hostname + "'])").attr('rel', 'noopener noreferrer');
})
</script>

 

f:id:cafebabymilk:20210307001106j:plain

 

 

 

③最後に忘れずに「変更を保存する」をクリックしましょう。

 

 

これで自分のサイト(ブログ)の記事以外へのリンクを別窓で開く設定ができました。

 

  補足

1、自分の過去記事へのリンクは、同一窓内になってしまうので、別窓にしたければ【1】の個別にタグをつける方法でやってください。

2、「:not( )」の記述は、()内の要素以外という意味。

3、「 + location.hostname + 」は、現在開いているページURLのホスト名を参照するという意味。このブログでは「www.cafebabymilk.com」の部分。

 

【メリット】

自分の記事は同一窓内に表示され、外部リンクは別窓で開かれる。

【デメリット】

自分の記事を別窓で開かせたいときは、個別にタグを追記する必要がある。

 

むりくりデメリットも書きましたが、自分の記事を別窓で開かせたいっていうのは稀だと思うので、デメリットではないんじゃないかなーと思っております。(個人の意見)

 

まとめ

さて、どうでしたでしょうか。

外部リンクを別窓で開く最大のメリットは「ブログからの離脱率(他のサイトに行ってしまって戻ってこない)を下げる」ことです。

ここに書いたのはすべて「リンクを別窓で開く」方法で、【1】~【4】の違いは、どのリンクを対象にするかというところだけ。

どうぞ、あなたのブログにあった方法を選んでください!!

 

  

 

以上、【はてなブログ】外部リンクを「別窓で開く」ように設定してみた、でした。

 

最後までお読みいただき、ありがとうございました。