Webサイト内において、外部リンクがある場合、何の注意もないまま外部サイトへリンクしてしまうと、ちょっとした不安感を感じることがあります。そこで「このリンクは外部ページへ移動します。」ということが一目でわかるようにしておくと、ユーザーにとってより安心してサイトを閲覧してくれるひとつの要素になるかと思います。
そこでCSS3で追加定義された属性セレクタ（特定の属性名や属性値に適用可能）を利用します。
通常外部サイトへのリンクは「http://」または「https://」からはじまるので、a要素のhref属性値内に「http://」や「https://」からはじまる値があった場合に外部リンクであると判断するようにして、アイコンを付けるように指定していきましょう。
今回は属性セレクタのひとつ「^」を利用します。
ここでひとつ注意が必要ですが、仮に内部ページへのリンクがある場合には、相対パスでリンク先を指定しておきます。そうしないと内部のリンクにもアイコンが表示されるため、外部リンクと内部リンクの違いがなくなってしまうのでご注意ください。
それでは実際に確認していきましょう。
HTMLを記述
|
1 2 3 4 5 6 7 |
<ul> <li><a href="sample.html">内部へのリンク(sample.html)</a></li> <li><a href="http://www.yahoo.co.jp/">外部へのリンク(Yahoo!JAPAN)はこちら</a></li> <li><a href="sample.html#">内部へのリンク(sample.html)</a></li> <li><a href="https://www.google.co.jp/">外部へのリンク(google)はこちら</a></li> <li><a href="sample.html">内部へのリンク(sample.html)</a></li> </ul> |
CSSを記述
|
1 2 3 4 5 6 7 |
a[href^="http://"]:after, a[href^="https://"]:after { content: url(../images/window-ic.png); vertical-align: middle; margin: 0 2px; } |
また、CMSなどサイト内のリンクを自動的に書き出してしまうシステムにおいては、内部リンクであっても絶対パスでリンクが記載されてしまいます。そこでサイト内リンクの場合にはアイコンを表示させないように追加指定しておきましょう。
|
1 2 3 4 5 |
a[href^="http://あなたのサイトURL/"]:after { content: ""; margin: 0; } |
さらには、サイドバーなどにバナーを配置している場合、CSSの記述において本文内のa要素のみに指定するように記述します。
ここで注意点ですが、IE6などの古いブラウザにはこの属性セレクタは対応していません。どうしてもIE6などにも同じように表示させたい場合はJavaScriptを利用することで可能になります。
|
1 2 3 |
$(function(){ $('a[href^="http://"], a[href^="https://"]').after('<img src="../images/window-ic.png" alt="外部リンク">'); }); |
以上になります。