インサイド シーナ

日々の備忘録(40代男性の場合)

2018年 はてなブログで外部リンクを別ウィンドウで開くようにしました

はてなブログ外部リンクを開く

こんにちは。シーナと申します。

ブログのカスタマイズ、第4弾になります。

 

私はウェブサイト内のリンクをクリックするとき、別ウィンドウ(タブ)で開きます。

そうしないと、リンク先でさらにリンクを開いていくと元のページに戻ることが難しくなるためです。 

PC であれば慣れていますので特に問題は無いのですが、スマホだと操作が面倒です。

 

そんなとき、予めサイト側で設定してあると助かります。 

そう考えている私が、自分のブログで設定していないのは、いかがなものかと。

 

今更ながらその考えに至った私は、「リンクを別ウィンドウで開く」設定をすることにしました。

 

いつものように先人のお知恵に頼りながら設定しました。

以下が調べた結果になります。少しでもあなたの参考になれば幸いです。 

ブログ(サイト)側が設定する理由

さっそく方法を調べたのですが、そもそも設定する(したほうがよい)理由が説明されていました。

自分のブログ(サイト)から記事の途中で人が離れないようにするため

というもので、最初から意識しなければならないものだったようです・・・・・・。

 

確かにせっかく奇跡的に当ブログに辿り着いてくれた方には、

最後まで読んで欲しいです。

やはり設定しておいたほうがよいようです。

 

さて、方法はいくつかありました。

しかし、代表的な「target="_blank"」と「base target="_blank"」は、

私にはデメリットが致命的であったため採用は見送りました。

今回は別の方法で実装しました。  

はてなブログで「リンクを別ウィンドウで開く」ようにするのに必要な2ステップ

最初に私が採用した方法の設定に必要なことを記載します。 

はてなブログを利用中で、「リンクを別ウィンドウで開く」を設定だけしたい方は、そのまま指定の場所にコピペしていただければ動作すると思います。

コードの意味や他の方法は後ほど簡単に説明しています。

興味がある方はそこまでお付き合いください。

Point

紹介するコードをコピペする前にすでにあるコードのバックアップ(どこかにコピペ)を取っておくことをお勧めします。

ステップ1 事前準備

今回も jQuery というプログラムを使用します。

jQuery については、以下の記事で説明しています。

www.inside-shiina.com

 

自分のブログで 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"」を自動で設定するという処理になります。 

  1. リンクの指定(href)が「http」で始まる
    ※「https」も含まれます
  2. リンク先 URL のホスト(ドメイン)名部分が自分のブログと同じもの以外
    ※ホスト名とは、当ブログでは「inside-shiina.hatenablog.jp」の部分です
     location.hostnameでホスト名を取得しますので修正する必要はありません。

 

この設定をすることで、

過去に作成した記事も、

これから作成する記事も、

特に意識することなく、

外部のリンクは別ウィンドウで開いて、

自分のブログの別記事は同じウィンドウで開く

ということになります。 

自分のブログの別記事も別ウィンドウで開かせたい

はてなブログで「リンク」を設定する方法には、以下の4つがあります。

  • 埋め込み
  • タイトル
  • 選択範囲
  • URL

「リンク」を設定する方法により、リンクの仕方が異なるようです。

先ほどの条件1を付けたのは、この方式の違いを利用するためです。

 

以下のような「埋め込み」方式の場合は、同じホスト名でも(つまり、自分のブログ記事でも)別ウィンドウで開きます。

※参考のために、すべて同じ記事へのリンクにしています。

www.inside-shiina.com

以下のような「タイトル」や「選択範囲」、「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">」のタグを入れるだけで、

ブログ内のリンクは全て別のウィンドウで開くようになります。

最初はこれでよいなと思いました。

 

しかし、説明をよく読むと記事内のリンクだけでなく、

サイドバーのカテゴリも、

プロフィールも、

記事内の目次も、

何から何までリンクは全て

別のウィンドウで開く

とのこと。

いやがらせでしかないですね。

ブログの構成次第では問題ないのでしょうが、大部分のブログでは適さない方法だと思います。 

以上のことから私は先に記載した方法を採用することにしました。

終わりに

暑くなったと思ったら涼しくなり、体調管理に気を付けないといけません。

この年になるとちょっとした体調不良でも不安になってしまいます。

やりたいことがたくさんありますので健康第一です。

 

それでは、また。

おすすめ記事です。

ブログ更新のお供に体重に優しい飲み物はいかがでしょうか。

www.inside-shiina.com

おやつもあります。特にラスクはおすすめです。

www.inside-shiina.com

ローソンにはおいしい低糖質パンもあります。

www.inside-shiina.com

普段の商品選択の参考になれば幸いです。

www.inside-shiina.com

おいしく食べた後はお口のお手入れも忘れずに行いたいです。

www.inside-shiina.com

メインのネット回線を変えることで通信費を下げることに成功しました。

www.inside-shiina.com

ブログ更新のお供にYouTubeはいかがでしょうか。

作業用に雑談がおすすめです。

www.inside-shiina.com

素晴らしい音楽もあります。

www.inside-shiina.com

食事ネタ多めの森羅万象日常系ギャグ漫画です。

www.inside-shiina.com

日常系ギャグ漫画の古典にして名作です。約30年ぶりの新刊も今年発売しています。

www.inside-shiina.com

大号泣間違いなしの名作テニス漫画です。劇場版アニメもおすすめです。

www.inside-shiina.com