おはこんばんわ。むつ丸です。
はてなブログでいじったことの備忘録置き場です。
今回は、「外部リンクを別窓で開く方法」
どこかの誰かのお役に立てば、これ幸い。
外部リンクは、別窓で開きたい派のようです。
※ちなみに、窓=ウィンドウ、別窓=別ウィンドウ=新規タグの意です
自サイトで設定するときは、数が少ないのでその都度「target=”_blank”」を組み込むとできますが、ブログでやるにはこれは面倒だと思って検索しました。
はてなブログ 外部リンク 別窓
結果、はてなブログでは4パターンあることがわかりましたので、ちょこっと手を加えたのを備忘録がてらまとめてみました。
追加した要素
<rel="noopener noreferrer">
<rel="noopener noreferrer">ってなに？
そのまま別窓で開くと、「別窓で開いたリンク先が悪意のあるものだったら、サイトを改ざんされてしまう恐れがある」から、それを防ぐためのタグなんだって
記述の仕方はこのあと説明しますが、これがどういう意味のタグなのか、詳しくはこちらのサイト様が説明してくださっているので、読んでみてください。
ただ、上記サイト様をごらんになればわかりますが、現在は「既にブラウザー側で rel=noopener を自動的につけ加えるセキュリティ対策が施されている」ようですので、追記するのは念のため的な意味合いが強いです。
まぁ、ないよりかはあった方がマシだろうという精神でやっております。
なので、必要ないって方は「rel="noopener noreferrer"」を消して使って下さい。
さて、本題に移ります。
【1】ひとつずつ設定する
これは先述した方法で、リンクごとに「target=”_blank”」を追記することでできます。
<a href="URL" target="_blank" rel="noopener noreferrer">リンク文字列</a>
【方法】
リンクを貼る → 「HTML編集」タブ → 直接編集
【メリット】
任意のリンクに設定できる
【デメリット】
別窓にしたいリンク全てに手動で設定しないといけない
ひとつずつ設定しなくてはいけないので、面倒。
なので、面倒くさい人は次に行きましょう。
【2】全てのリンクを別窓で開くに設定する
上記の方法では面倒なので、ええい！まとめてやっちゃおう！って方法です。
これはとても簡単。
head要素にタブを追記するだけです。
【方法】
①はてなブログ ダッシュボード「設定」→「詳細設定」タブを開く
②下の方にある「検索エンジン最適化」内の「headに要素を追加」へ下記コードをコピペする
<base target="_blank" rel="noopener noreferrer">
③「変更する」ボタンを忘れずにクリック
これで、「はてなブログ内の全てのリンクが別窓で開く」の設定の出来上がりです。
設定を戻したければ、追記したコードを削除すればいいだけです。
【メリット】
最初の設定だけで、全てのリンクが別窓で開くようになる。
【デメリット】
自分の記事でも別窓で開いてしまう。
その結果、やたらと別窓を作ってしまう事態を引き起こす。
別窓を量産したくないって方は、次の方法もあります。
【3】全てのリンクを別窓にするが、開くタブは1つだけ
なんのこっちゃと思うかもしれませんが･･････
まずは、設定の仕方から。
前述のタグの「_blank」を適当な文字列に変えるだけ、です。
「適当な文字列」なので、"_new" とか "_nekonikoban" でも大丈夫だそうですが、ここでは例として "_new" としておきますね。
<base target="_new" rel="noopener noreferrer">
他は【2】と同じ。だけど、元のページのリンクから開かれる窓はひとつだけになります。
【メリット】
開かれる窓はひとつだけなので、見た目はすっきり。
【デメリット】
開いたリンクが上書きされてしまうので、後で見ようと思ったものが埋もれてしまう。
【2】と【3】の違いは？
同じように見える【2】と【3】ですが、違いはなんでしょうか。
ブログ内のリンクを全て別窓に開くことは一緒ですが、開き方に違いがあります。
【2】の_blankの場合
【3】の_newの場合
こんな感じです。
わかりますでしょうか？
【4】自分の記事は同一窓内に、外部リンクのみ別窓にする
最後は jQueryを使った方法です。
ちなみに私もこの方法をとっています。
参考にしたサイト様>
【方法】
①【2】【3】でも使った「headに要素を追加」に以下コードをコピペする
※すでに記述済みであれば不要です。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
赤字の数字は 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>
③最後に忘れずに「変更を保存する」をクリックしましょう。
これで自分のサイト（ブログ）の記事以外へのリンクを別窓で開く設定ができました。
1、自分の過去記事へのリンクは、同一窓内になってしまうので、別窓にしたければ【1】の個別にタグをつける方法でやってください。
2、「:not( )」の記述は、（）内の要素以外という意味。
3、「 + location.hostname + 」は、現在開いているページURLのホスト名を参照するという意味。このブログでは「blog.cafebabymilk.com」の部分。
【メリット】
自分の記事は同一窓内に表示され、外部リンクは別窓で開かれる。
【デメリット】
自分の記事を別窓で開かせたいときは、個別にタグを追記する必要がある。
むりくりデメリットも書きましたが、自分の記事を別窓で開かせたいっていうのは稀だと思うので、デメリットではないんじゃないかなーと思っております。（個人の意見）
まとめ
さて、どうでしたでしょうか。
外部リンクを別窓で開く最大のメリットは「ブログからの離脱率（他のサイトに行ってしまって戻ってこない）を下げる」ことです。
ここに書いたのはすべて「リンクを別窓で開く」方法で、【1】～【4】の違いは、どのリンクを対象にするかというところだけ。
どうぞ、あなたのブログにあった方法を選んでください！！
以上、【はてなブログ】外部リンクを「別窓で開く」ように設定してみた、でした。
最後までお読みいただき、ありがとうございました。
