【aタグの使い方】新規ウィンドウで開く、同じウィンドウで開くの使い分け | 元WEBデザイナーのブログ

元WEBデザイナーのブログ

元WEBデザイナーのブログ

こんにちは、Webデザイナーの梨沙です


aタグとは


aタグとは、リンクを貼るためのタグです。
他のページを見てもらいたいとき、このaタグを使うことで
「ページとページを繋げる=リンクを貼る」ことが出来ます。

リンクを貼るためには、貼りたいサイトのURLを調べる必要があります。
URLとは、ネットを開いた時に上のほうの窓に出てくる

URLとは
http://~ から始まるサイトの住所のことです。


aタグの書き方


<a href="リンクしたいURL">リンクしたい文字(サイト名など)</a>

a href= のあとにURLを貼りつけます。
URLの前後にダブルクォーテーション「"」を付け忘れないようにしましょう


新規ウィンドウで開く、同じウィンドウで開くの違い


リンクは、新しい窓(新しいタブ)を開いて表示する場合と
新しい窓(タブ)は作らず、今の画面のままページを切り替えて表示する場合があります。

実際に、以下のリンクをクリックしてその違いを体験してみてください。

<例>

新規ウィンドウで開く

同じウィンドウで開く

「新規ウィンドウで開く」のときは新しい窓(タブ)が開き、
「同じウィンドウで開く」のときは同じ画面のままページが切り替わったでしょうか?

ウィンドウの開き方は、使う場面に合わせて設定したほうが
サイトを見ている人にとって使いやすいため、
どのような場面でどちらを使ったらいいのかをお伝えしていきます。


他サイトへリンクを貼るときは「新規ウィンドウで開く」を設定する


友達のサイトや、紹介したいサイトなど
“自分のサイト以外の他サイト”を見てもらいたい場合は、

「新規ウィンドウで開く」を設定しましょう。


なぜかというと、新規ウィンドウで開くことで

「このサイトから他のサイトへ移動しますよ」と
読者に伝えることが出来るから
です。


あと、記事を読んでいてリンクが気になったものの
まだ記事は読み進めていきたいから、

とりあえずリンクは開いておいて、記事を読み終わったあとに
リンク先の記事を読みにいく、という読み方をしたい人も多いからです。


アメブロでは、リンクのアイコンをクリックした後に出てくる
「リンク先の表示方法」を「新しいウィンドウ」に設定します。

新規ウィンドウで開く

htmlタグで表す時は、target="_blank"を付け足します。
<a href="ここにURL" target="_blank">ここに文字</a>



自分のサイト内のページへリンクを貼るときは「同じウィンドウで開く」を設定する


ブログ内の他の記事を読んでもらいたいときや
サイト内の他のページを見てもらいたいときは、

「同じウィンドウ」を設定しましょう。


なぜかというと、同じウィンドウで開くことで

「このサイトの違うページへ移動しますよ」と
読者に伝えることが出来るから
です。


あと、自分のサイトのページを「新規ウィンドウ」で開いてしまうと
読者さんが「このサイトの記事、全部読みたい!」と思ったとき、
リンクを開く度に新ウィンドウが増えていってしまいます。

読み終わったときに、ウィンドウを閉じるのが手間になってしまうのです

なので、同じサイト内の違うページに移動するときは、
「同じウィンドウで開く」に設定することをオススメします。


アメブロでは、リンクのアイコンをクリックした後に出てくる
「リンク先の表示方法」を「同じウィンドウで開く」に設定します。
同じウィンドウで開く

htmlタグで表す時は、target="_self"を付け足します。
<a href="ここにURL" target="_self">ここに文字</a>


まとめ



リンクで飛ぶときのウィンドウの開き方は、
使う場面に合わせて設定したほうがサイトを見ている人にとって使いやすいため、

・他サイトへリンクを貼るときは「新規ウィンドウで開く」

・自分のサイト内のページへリンクを貼るときは「同じウィンドウで開く」


に設定しましょう。


ただ、自分のサイト内のページでも
「新規ウィンドウ」で開いたほうが親切かも・・・?と思うような場面があったら
新規ウィンドウに設定したほうが良いと思います。

どちらが、読んでいる人にとって見やすいか?
という視点で、ウィンドウの開き方を工夫しましょう