7月1日 14:00 サンブレイクに対応しているMODまとめ
7月4日 01:00 HunterPieのサンブレイク対応版、パトロン向けにプレリリース

外部リンクに自動で矢印アイコンを付けるCSSテクニック

2011年11月21日

外部リンクをtarget"_blank"にするかどうかはサイト運営者なら一度は悩んだことがあると思います。
個人的に外部リンクは新しいウィンドウで開いてくれたほうが楽でいいですが、これをユーザーに知らせる方法もユーザービリティ的に必要となってきます。
そこで、外部リンクには矢印アイコンを付けて区別できるようにします。

サンプル: Yahoo! JAPAN

quivr
Creative Commons License photo credit: Pickersgill Reef

CSSなら自動でアイコンを付けれる

  • http://で指定する方法
  • target="_blank"で指定する方法
  • rel="external"で指定する方法

いくつかのやり方がありますがWordPressで運営している人には下二つがオススメ。
手打ちでサイトを作ってる人ならいいのですがWordPressはサイト内リンクも全てhttpからの指定になってしまうので。

rel="external"は苦肉の策というかJavaScriptをON時にだけ新しいウィンドウで開いてくれるのでtarget指定するよりも好きです。

targetとrelタグを指定して表示

背景画像で矢印アイコンを指定し、横のラインは一番右で縦のラインでは中央に表示。
padding-rightで画像の横幅+文字と画像の間に欲しいマージンを指定。
アイコンは12pxでピッタリくっつけるよりも3pxぐらい空けたほうが見やすいかも。
[CSS]
a[target="_blank"],
a[rel="external"],
a[rel="external nofollow"] {
background: url(img/external.gif) right center no-repeat;
padding-right: 15px;
margin-right: 3px;
}
[/CSS]

特定の場所にだけ適用

コンテンツ部分(div#main)だけにしたいならこんな感じにする。
[CSS]
div#main a[target="_blank"],
div#main a[rel="external"],
div#main a[rel="external nofollow"] {
background: url(img/external.gif) right center no-repeat;
padding-right: 15px;
margin-right: 3px;
}
[/CSS]

ダウンロードリンクにアイコンを表示

番外編。
zlib1.dll.zipなどのダウンロードリンクにも画像を表示することも可能。
拡張子でZIPやRARなど自分のよく使うものを指定してください。応用も出来て楽しい。

[CSS]
div#main a[href$=".zip"],
div#main a[href$=".rar"] {
background: url(img/dl1.png) right center no-repeat;
padding-right: 103px;
margin-right: 3px;
}
div#main a[href$=".zip"]:hover,
div#main a[href$=".rar"]:hover {
background: url(img/dl2.png) right center no-repeat;
}
[/CSS]