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

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

サンプル: Yahoo! JAPAN

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]

記事に対してコメントする

投稿ルール

• 記事内容に関することであれば特に制限はありません。
• コメントに画像を添付することも可能です。補足説明として使いたいときなど。
• 投稿ボタンを押すとすぐにページ反映されます。
  (URLを含むコメントは安全性確保のためストックに保留されます。)

名前 (Name) ※無記名にすると「匿名さん」になります

内容 (Contents)

10MB以下のJPG/GIF/PNG形式の画像をアップロードできます。

1. ホーム
2. 雑記
3. Web製作メモ
4. 外部リンクに自動で矢印アイコンを付けるCSSテクニック

• メールを送信する
  http://logu.jp/sitemap/mail/
• ツイッターを利用する
  https://twitter.com/logu_jp/