【はてなブログ】記事内のリンクを別窓で開くようにカスタマイズ!コピペで出来たよ

アイキャッチ どうも!きりゅ(@kiryu_2017)です♪

はてなブログの記事内にリンクを貼ると、デフォルトだと同じタブで開かれちゃいますよね。

できれば、新しいタブ(別窓)で開いてほしい!

ってことで、ググったら出来るようになったので、方法をまとめておきます。

リンクを別窓で開きたいと思った理由

訪問先のブログで記事を読んでいるとき、文中に参考リンクなどが貼ってあることって多くないですか?

その参考リンクをクリックすると、同一タブで開く場合と別窓で開く場合がありますよね。

これは意見が分かれるところだと思うけど・・・

個人的には、もともと読んでいたページと参考リンク先(別サイト)は別窓で開いてほしいんです!

同一タブだと、別サイトの記事を読んだあとに、元の記事に戻るの忘れてタブを閉じて戻れなくなったりするので。

(履歴から開けばいいんだけど・・・)

なので、自分のブログも外部リンクは別窓で開けるようにしたいと思ったわけで・・・

リンクを別窓で開く方法

はてなブログのリンクを別窓で表示させる方法はいくつかあります。

  1. 「target="_blank"」をつける(手動)
  2. [設定]にタグを追加する(自動)
  3. HTMLにコードを追加する(自動)

ちょっと難しそうだけど、どれもコピペで出来るのでむずかしく考えないでくださいね!

一つずつ簡単に解説します!

①「target="_blank"」をつける(手動)

この方法はリンクを追加するたびに、手動で「target="_blank"」をリンクに追記していくということ。

これを毎回やるのは、ちょっと面倒・・・ってことで、次!!

②[設定]にタグを追加する(自動)

<base target=”_blank”>を、[設定]→[詳細設定]→[headに要素を追加]に追加するだけ!

詳しい設定方法はコチラの記事で紹介されてます▼

www.oki-ana.com

さっそく、追加していざテスト!

別窓でひらかないっっっ!!!

調べてみたら、編集モードがMarkdown記法だとこの一文ではダメみたい・・・

編集モードについては、過去記事に書いてます。

よかったらどうぞ▼

www.brave-log.com

一行追加するだけだし、簡単!だと思ったけど残念

③HTMLにコードを追加する(自動)

Markdown記法でも、リンクを別窓で開ける方法がないか探していたら、ありましたっ!!

コチラの記事で紹介されていました▼

yoshiko.hatenablog.jp

紹介されているコードをコピペして、貼り付けます。

※紹介されているコードの一行目は、jQueryなので、一度読み込んでいれば省略可!分からない人は全部貼り付けちゃえばOK!

貼り付ける位置▼

貼り付け位置

わたしは、[フッタ]に追加しました!

HTMLを貼り付けられる場所ならOKなので、[ヘッダ]でも大丈夫だと思います。

スマホの設定は、[フッタ]に記述しました。これは、はてなProじゃないと設定できないみたいです。

②と③の方法の違い

②で紹介した方法だと、リンク全てが別窓で表示されます。記事内の外部リンクだけでなく、サイドバーの注目記事(自分の記事)も別窓に。

③の方法だと、記事内のリンクのみ別窓で開いてくれます!

便利っ!!

まとめ

Markdown記法でつまずいたけど、リンクを別窓で開く設定ができてよかったです。

別窓になりすぎるとウザく感じちゃうこともあるけど、外部リンクは別窓のほうが読んでもらう人にも分かりやすいかと思ってやってみました。

もっとうまく内容をまとめたかったけど、できず(;_;)

もっともっと記事書いて、書くのうまくなるぞーーーー!

よかったら読者登録&Twitterフォローお願いします♪

ではでは、きりゅ(@kiryu_2017)でした^^