はてなブログのリンクの開き方をデフォルトで新規タブ(ウィンドウ)で開くように設定してみた

広告

ブログをやっていて一番うれしいのが、見てますと言われること。
ほとんとうにありがとうございます。

 

それと同じくらい嬉しいのがPCとスマホをあまり使いこなせていない方からの操作性や視認性に対する率直な意見。

 

カスタマイズネタも書きたいので、非常にありがたい。

 

今回頂いたのは、記事内のリンクを開く時にページの切り替えではなく、新規タブ(ウィンドウ)で開くようにしてくれた方が良いという意見でした。

 

スポンサーリンク

知っていたけど気にしていなかった

PCもスマホもですが、割と使いこなしているという方はリンク先ページを見たい時に「新規タブで開く」という方法を自然にやっていると思います。
ブログなどを読んでいると、参考にした記事や引用元のサイトなどがよく掲載されていますよね。

 

あれを単純にクリックしてしまって同一タブのまま切り替わってしまうと、戻るのが面倒だし、読み比べたりすることが億劫になります。
なので、私はかならず「新規タブで開く」行為を無意識にしていました。

 

google chromeでいうところの「右クリック」→「新規タブで開く」です。

f:id:dagasoregae:20160603121531j:plain

 

ちなみにgoogle chromeはドラッグ&ドロップでも開けますね。結構便利。

youtu.be

動画とるときに使ったのはちょど読んでいた、こちらのブログです。
ekarisodami.hatenadiary.jp

でいつもこうやって開く癖がついていたので、はてなブログの場合はブログカード内のリンクは新規タブで開かれるけど、それ以外のリンクは同ページで切り替わってしまうというのを知ってはいたものの特に不便にも感じていませんでした。

 

でも違った。わたしは良くても不便に感じている人はいました。

 

なので変更してみます。

はてなブログの機能では一括設定はできない

サクッと探してみましたが、はてなブログの設定画面でリンクの開き方を設定するような項目はありませんでした。

 

ではどうするかというと、2つの方法を思いつきました。

 

1つは、毎回リンク部分をHTMLタグで編集して target=”_blank”を追記する方法
でも、これ相当面倒です。
なので却下。

 

もう1つは、スプリクトを埋め込む方法
デフォルトですべてのリンクに target=”_blank”を追記するようなスクリプトを書いちゃえばいいわけです。

 

よし!やるか!
javascript苦手や・・・・。

 

そうだ!どうせ誰かがすでにやっているだろう!

ということで探しました。

 

するとすぐに見つかりました。

q.hatena.ne.jp

 

こちらに書かれている下記のコードをコピペするだけ。

リンクをすべて新規タブ(ウィンドウ)で開くためのスクリプト

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($){
$(function() {
/*
            question:1423594976
            記事内のリンクに target='_blank' を設定する
        */
var forEach = Array.prototype.forEach;
var changeTarget = function(ctx) {
forEach.call(document.body.querySelectorAll('article.entry div.entry-content a'), function (item) {
if (item.target == '') {
item.target = '_blank';
}
});
};
changeTarget(document.body);
});
})(jQuery);
</script>

引用元:はてなブログで、リンクを設定する際に、「新しいタブで開く」よ… – 人力検索はてな

すごい!ありがとうございます!

 

コードをコピーしたら、ダッシュボードから「デザイン」→「カスタマイズ」→「ヘッダ」を開きタイトル下にペーストします。
ペーストしたら変更を保存。

f:id:dagasoregae:20160603124847j:plain

 

これだけ!

【追記】スマホにも適用させる方法

スマホでも設定したいというご意見をいただきましたので、追記します。

上記と同じコードをコピーしたら、スマホの場合はダッシュボードの「デザイン」→「スマートフォン」→「ヘッダ」に移動します。
最初に、タイトル下の項目の「スマートフォン用にHTMLを設定する」のラジオボタンをチェックしてください。
そして、下のテキストボックスにコピーしたコードをペーストし、変更を保存をします。
f:id:dagasoregae:20160606114824j:plain

f:id:dagasoregae:20160606114830j:plain

 

これで、スマホでも新規タブで開く設定が有効になります。

おわりに

仕事でも趣味でもそうですが、自分ができるようになってしまうとやり始めたばかりの時に感じた疑問や不満などは自然と忘れてしまいます。

 

なんでもかんでも初心者に合わせる必要はないと思いますが、ブログに関しては読者目線を忘れないことが非常に大事だと思っているので、PCやスマホ操作がさほど得意ではない方にも見てもらえるよう注意を払うべきだと感じました。

 

こういった意見をいただけると、ブログネタにもなるので非常に助かります。

 

今後も精進していきます!

 

おしまい!

 

 

スポンサーリンク