CSS で外部リンクのみアイコン表示

• Dec162007
• Vote:
  http://bizcaz.com/archives/2007/12/16-054333.php
• Categories: Tools
• Tags: CSS
• Social Bookmark

• Prev Page: イラストレーターを勉強しよう
• Next Page: 参考になりそうな CSS リファレンス（Resetting Again）

こんばんわ^^

ついさっき見つけた気になる記事。

• VoxもmixiもGmailも早くなる!?　JavaScriptのおまじない

Windows XP に限った話のようですが、jscript.dll というファイルを更新すると体感的にページの表示が早くなるとのことです。

で、jscript.dll のバージョンを確認したら、わたしのパソコンでは既に更新済み( 5.6.0.8834 )になってました。
わたしは体感的に速くなった!? ことに気づかなかったようで、速くなったという満足感を逃してしまいました (;￣∇￣A 残念

さて、今回は CSS で外部リンクにだけアイコン表示する方法のご紹介です。 具体的には以下のように、アンカー(リンク)の前( わたしの場合 )にアイコンを表示します。

• Movable Type MEMO

わたしのサイトでは、記事本文と追記の中だけ、アンカーのすべてにアイコン表示させてます。
でも、本来はユーザビリティの観点から、外部リンクなのか内部リンクなのかを訪問者さんが識別しやすいようにするのがいいらしいです。
たとえば、外部リンクを別窓で開く( target="_blank" )ようにしてた場合、目印(アイコン)をつけとくのが本来の目的なんだとか。

でも、XHTML1.1 からは target 属性( target="_blank" )を付けることは非推奨とされてますので、わたしのサイトでは外部／内部リンク無関係に表示させちゃってます。

外部リンクにだけアイコン表示

• target 属性を利用する
  target 属性を利用して、外部リンクにアイコンを表示するには以下のようにします。

  1. a[target="_blank"] {
  2.     padding-left: 13px;
  3.     background: transparent url(exlink.gif) no-repeat center left;
  4. }

  上記では属性セレクタを使って、外部リンクの前にアイコンを表示させてます。
  ただし、すべての外部リンクには target 属性が指定されていることが前提となります。

• URL( http://～ )で識別する
  先ほども言ったように、XHTML 1.1 では target 属性は非推奨です。そんな時は以下のようにします。

  1. a[href^="http:"],
  2. a[href^="https:"]{
  3.     padding-left: 13px;
  4.     background: transparent url(exlink.gif) no-repeat center left;
  5. }
  6. a[href^="http://●●●.com"],
  7. a[href^="https://●●●.com"] {
  8.     padding-left: 0;
  9.     background: none;
  10. }

  まず、青い字の部分ですべてのリンクにアイコン表示させておいて、赤い字の部分で自サイトの URL を指定することでアイコンを表示しないようにします。

上記の方法だと、Firefox などのモダンブラウザ含め、IE でも同様の表示が可能です。
以下の方法は IE ではアイコン表示できません。

• before 擬似要素を使う
  before 擬似要素を使ってリンクの前にアイコンを表示します。

  1. a[href^="http:"]:before,
  2. a[href^="https:"]:before {
  3.     margin: 0 2px;
  4.     content: url(exlink.gif);
  5.     vertical-align: middle;
  6. }
  7. a[href^="http://●●●.com"]:before,
  8. a[href^="https://●●●.com"]:before {
  9.     margin: 0;
  10.     content: "";
  11. }

  先ほどと同様に、まず青い字の部分ですべてのリンクにアイコン表示させておいて、赤い字の部分で自サイトの URL を指定することでアイコンを表示しないようにします。

以上で外部リンクにだけアイコン表示させられます。
実際には特定のブロック内のみにスタイルが適用されるように、セレクタを使って適用範囲を絞って使用します。

以上です。
ちなみにリンク先のファイルを、拡張子に合わせてアイコンを表示する方法もあります。

• Iconize Textlinks with CSS

- 2007.12.16 追記 -

イメージリンクにアイコンを表示させないようにするには、わたしの場合イメージリンクを <span class="mt-cenclosure-image">～</span> で囲うことで対応しています。

そうすると、以下の青い字の部分を追加することでイメージリンクにはアイコン表示されなくなります。

• Related Entries
• 09/04/15CSS 内で PHP を使う
• 09/01/18画像を右にレイアウトする理由
• 09/01/18ナイスアイデアな背景画像の見せ方
• 08/11/30IE でも CSS Sprite を使ってみる
• 08/10/02CSS でクールなボタンを表示してみる
• 08/02/23CSS ファイルの圧縮転送
• 08/02/18MTSetVar / MTGetVar を使ってデザインする
• 08/02/09参考になりそうな CSS リファレンス（Resetting Again）
• 07/06/30Windows XP と Mac OS X のフォント一覧
• 07/06/17CSSでバーグラフ表示

• Edit
• Permalink
• 2 Comments
• 1 TrackBack