こんにちは。シーナと申します。
ブログのカスタマイズ、第4弾になります。
私はウェブサイト内のリンクをクリックするとき、別ウィンドウ（タブ）で開きます。
そうしないと、リンク先でさらにリンクを開いていくと元のページに戻ることが難しくなるためです。
PC であれば慣れていますので特に問題は無いのですが、スマホだと操作が面倒です。
そんなとき、予めサイト側で設定してあると助かります。
そう考えている私が、自分のブログで設定していないのは、いかがなものかと。
今更ながらその考えに至った私は、「リンクを別ウィンドウで開く」設定をすることにしました。
いつものように先人のお知恵に頼りながら設定しました。
以下が調べた結果になります。
少しでもあなたの参考になれば幸いです。
- ブログ（サイト）側が設定する理由
- はてなブログで「リンクを別ウィンドウで開く」ようにするのに必要な2ステップ
- 補足説明
- 自分のブログの別記事も別ウィンドウで開かせたい
- 別のウィンドウで開くための代表的なその他の方法
- 終わりに
- おすすめ記事です。
ブログ（サイト）側が設定する理由
さっそく方法を調べたのですが、そもそも設定する（したほうがよい）理由が説明されていました。
自分のブログ（サイト）から記事の途中で人が離れないようにするため
というもので、最初から意識しなければならないものだったようです・・・・・・。
確かにせっかく奇跡的に当ブログに辿り着いてくれた方には、最後まで読んで欲しいです。
やはり設定しておいたほうがよいようです。
さて、方法はいくつかありました。
しかし、代表的な「target="_blank"」と「base target="_blank"」は、私にはデメリットが致命的であったため採用は見送りました。
そのため今回は別の方法で実装しました。
はてなブログで「リンクを別ウィンドウで開く」ようにするのに必要な2ステップ
最初に私が採用した方法の設定に必要なことを記載します。
はてなブログを利用中で、「リンクを別ウィンドウで開く」を設定だけしたい方は、そのまま指定の場所にコピペしていただければ動作すると思います。
コードの意味や他の方法は後ほど簡単に説明しています。
興味がある方はそこまでお付き合いください。
紹介するコードをコピペする前にすでにあるコードのバックアップ（どこかにコピペ）を取っておくことをお勧めします。
ステップ1 事前準備
今回も jQuery というプログラムを使用します。
jQuery については、以下の記事で説明しています。
自分のブログで jQuery を利用することをhead(ヘッド)タグに記載します。
jQueryには複数のメジャーバージョンがありますが、基本的には最新のバージョン3.x （2018年7月6日現在）を利用しましょう。
デザイン => カスタマイズ => ヘッダ => タイトル下に以下をコピペします。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
※改行されているかもしれませんが1行です。
最新バージョンは、jQuery のサイトで確認できます。
jQuery Core – All Versions | jQuery CDN
※英語のサイトです。
ステップ2 コードのコピペ
ステップ1と同じ場所『デザイン => カスタマイズ => ヘッダ => タイトル下』に、
以下のコードをそのままコピペします。
以下をコピペしたら［変更を保存する］をクリックして確定します。
<script language="JavaScript">
$(document).ready( function () {
$("a[href^='http']:not([href*='" + location.hostname + "'])").attr('target', '_blank');
})
</script>
以下のようになっているはずです。
ブログ内に設置したリンクをクリックしてみましょう。
いかがでしょうか。動作しましたでしょうか。
当ブログはこの設定で動作しています。
補足説明
今回の処理における肝は、以下の1行です。
$("a[href^='http']:not([href*='" + location.hostname + "'])").attr('target', '_blank');
以下の2つの条件を両方満たすリンクに、「target="_blank"」を自動で設定するという処理になります。
- リンクの指定（href）が「http」で始まる
※「https」も含まれます - リンク先 URL のホスト（ドメイン）名部分が自分のブログと同じもの以外
※ホスト名とは、当ブログでは「inside-shiina.hatenablog.jp」の部分です。
location.hostnameでホスト名を取得しますので修正する必要はありません。
この設定をすることで。
過去に作成した記事も。
これから作成する記事も。
特に意識することなく。
外部のリンクは別ウィンドウで開いて、自分のブログの別記事は同じウィンドウで開くということになります。
自分のブログの別記事も別ウィンドウで開かせたい
はてなブログで「リンク」を設定する方法には、以下の4つがあります。
- 埋め込み
- タイトル
- 選択範囲
- URL
「リンク」を設定する方法により、リンクの仕方が異なるようです。
先ほどの条件1を付けたのは、この方式の違いを利用するためです。
以下のような「埋め込み」方式の場合は、同じホスト名でも（つまり、自分のブログ記事でも）別ウィンドウで開きます。
※参考のために、すべて同じ記事へのリンクにしています。
以下のような「タイトル」や「選択範囲」、「URL」方式の場合は、リンクは単純にhrefで始まるため、同じウィンドウで開きます。
「タイトル」方式
足裏（土踏まず）が痛い原因、足底腱膜炎（足底筋膜炎）の痛みが消えました（40代の場合） - インサイド シーナ
「選択範囲」方式
「URL」方式
https://www.inside-shiina.com/entry/Complete-recovery-of-plantar-fasciitis
この違いを利用して制御することができます。
別のウィンドウで開くための代表的なその他の方法
調査した時にすぐに出てきたのは、以下の2つでした。
- 「target="_blank"」
- 「base target="_blank"」
「target="_blank"」を追記する方法
リンクを設定した後に、「HTML編集」モードに変更して、手動で「target="_blank"」を追記するという方法です。
はい。ものすごく面倒ですよね。
しかも過去の記事もすべて手作業で修正する必要があります。
仕事であってもやりたくはありません。
ちなみに、手動で追記する際は、URL との間に半角スペースが必要です。
例えば、以下のように記載します。
<a href="https://inside-shiina.hatenablog.jp" target="_blank">
「base target="_blank"」を追記する方法
こちらは先ほどの最大のデメリットである一つ一つ手作業という点を改善する方法として紹介されています。
「設定」→「詳細設定」から「headに要素を追加」欄に「<base target="_blank">」のタグを入れるだけで、ブログ内のリンクは全て別のウィンドウで開くようになります。
最初はこれでよいなと思いました。
しかし、説明をよく読むと記事内のリンクだけでなく、
サイドバーのカテゴリも、
プロフィールも、
記事内の目次も、
何から何までリンクは全て
別のウィンドウで開く
とのこと。
いやがらせでしかないですね。
ブログの構成次第では問題ないのでしょうが、大部分のブログでは適さない方法だと思います。
以上のことから私は先に記載した方法を採用することにしました。
＝＝＝後日追記ここから＝＝＝
はてなブログProに申し込み後に独自ドメインに移行したため、現在の当ブログのホスト名は「www.inside-shiina.com」になりました。
以下の記事でPro版移行のメリットを紹介しています。
独自ドメインへの移行に必要な作業を以下の記事に纏めています。
はてなブログProの利用は記事数が少ないうちががおすすめです。
後からだと大変になりますよ。
＝＝＝後日追記ここまで＝＝＝
終わりに
あなたの参考になれば幸いです。
それでは、また。
おすすめ記事です。
当ブログ、1年後のアクセス数と収益です。
はてなブログにGoogle検索ボックスを設定できます。
iHerb アフィリエイトの始め方です。
通信費削減のために自宅のネット回線を楽天モバイル（モバイルルーター代わり）にするという選択肢はありですよ。
スキマ時間を使って楽天ポイ活始めませんか。おすすめアプリと獲得ポイント数を見える化しました。
