つなろっく

イロトリドリな毎日

外部リンクを新しいタブ(別タブ)で開きたい理由とやり方

f:id:pea-nut:20181121185649j:plain

おすっ!つな(@tu_na_69)です(・∀・)

みなさんは、外部リンクをどのタブで開く設定をしていますか?

特別な理由がない限りは、外部リンクは「新しいタブ」で開くのがおすすめです。

外部リンクをクリックしてみると…

 先日、久しぶりにサイトチェックをしていたところ、リンクが新しいウィンドウで改善点を見つけてしまいました。

pea-nut.hatenablog.com
ブログにTwitterの「フォローする」ボタンを設置する方法を説明している、つなろっくの人気記事です。これまでにたくさんの方に読んでいただき、たくさんの「はてなスター」をいただきました。

ありがとうございます。

ところが・・・。

ところがなのです・・・。

 

重要なポイントが使いづらかったのです。

↓こちらの画像を見てください。

f:id:pea-nut:20181118204636p:plain

「Twitter publish」というサイトへのリンクを設置しているのですが、

これをクリックすると、いま見ているページがリンク先に変更されてしまいます。

これでは、つなろっくのページを参考にしながら埋め込みコードを作ることができないじゃないですか!!

本当にすみません<(_ _)>

「参考になりました」

「わかりやすかったです」

など、うれしいコメントもいただき、完全に舞い上がっていた自分を深く反省しています_(:3 」∠)_←反省しているとは思えないポーズ

 

リンクを挿入する際に「新しいタブで開く」設定にするのを忘れたようです。

新しいタブのことを別タブともいいます。


リンクを新しいタブで開くとはどういう意味か?

リンクを新しいタブで開くというのは、リンクをクリックするとウインドウ内にいま見ているページとは別の新しいページが自動的に開いてリンク先が表示されるようにすることです。

外部リンクを新しいタブで開く理由①

外部リンクを新しいタブで開く理由…
それはずばり!!

いま見ているページがそのままリンク先に切り替わってしまうと、自分のサイトから読者が離れていってしまうことになり、寂しいからです(T_T)

あなたがサイトを見ていて、リンクをクリックしたら別のページに切り替わったとします。

その場合、またわざわざ元のサイトに「戻る」ことって少ないですよね。

よほど、元サイトにほしい情報がある場合はわざわざでも戻るでしょうけれども。

そのままのタブで外部リンクを開くと、そのまま、読者が別のサイトへ移動してしまう確率が高くなります。

もちろん、読者もいつかは別のサイトに移動していくんです。

むしろ、いつまでもこのサイトに留まっている人がいるとしたら、それはもうストーカーかもしれない(@_@。

だから、別のサイトに移動してしまうのは仕方がないことですが、できれば少しでも長く自分のサイトでゆっくりしていってほしいですよね。

外部リンクを新しいタブで開く理由②

外部リンクを新しいタブで開きたいもうひとつの理由は「読みやすさ」です。

つなろっくは、ブログ運営やサイトづくりのコツをメモした記事が多く、文章の中にリンクを入れる際にも、記事を読みながら作業を進めてもらえるように工夫しているつもりです。

リンク先を新しいタブで開くことで、両方のページを見ながら作業しやすくなります。

説明しているページが別のページに切り替わってしまったら、使いづらいですよね。

読者に読みやすく使いやすいサイトであるために、外部リンクを新しいタブで開くことは大事なポイントです。

というわけで、さっそく、修正してみましょう。

* リンクを新しいタブで開く方法

リンクを新しいタブで開くには、リンク部分にtarget="_blank"のコードを書き加えます。

まずは記事をHTML編集で開きます。

先ほどの画像のリンクに当たる箇所を見てください。

 

<a href="https://publish.twitter.com/">Twitter Publish</a>

このように表示されています。 targetが指示されていない場合は、現在のタブで開きます。ここに先ほどのタグを追加します。追加する箇所は、a href=""の後ろです。

 

<a href="https://publish.twitter.com/" target="_blank"> Twitter Publish</a>

これでOKです。

タグを書き加えたら、更新してリンクを確認します。

新しいタブのほかに、現在のタブ、フレームを指定して、など設定することができます。
HTMLタグはこちらのサイトを参考にしています。

まとめ

外部リンクはできるだけ新しいタブで開く設定をして、読みやすい記事にしておきたいですね。

それから、よく読まれている記事にもミスがあります。新しい記事も大事ですが、たくさん読まれている記事のチェックも怠らずに。

今回はじめてソースコードの表示に挑戦してみました。

ソースコードの表示の関係で、一度投稿した記事を書き直して、こちらの記事を新規投稿させていただきました。←詳しくは、また記事にします。

前回の記事にはてなスターくださった方、すみません。