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

当サイトの各カテゴリーごとのエントリー数を見ていたら、(X)HTML / CSS に関するエントリーがとっても少ないことに気がついたので、CSS ネタでも書いてみますよ。

で、今回はエントリーなんかでリンクを張るときに、当然外部サイトへのリンクと、自分のサイト内へのリンクが混在することになるかと思いますが、このとき外部リンクだけに 「外部リンクですよ」 とわかるようなアイコンを表示させてみたいと思います。

まずは、アイコンを用意しますね。こんなやつ↓

あとは CSS を書くだけですが、ここは 2段階に分けて考えます。どういうことかというと、まずはすべてのリンクにアイコンをつけてしまって、そのあとで、サイト内リンクのみアイコンを消すといった流れです。

ではまず、すべてのリンクにアイコンを表示させるとこから。

a[href^="http:"]:after,
a[href^="https:"]:after {
  content:url(/img/view.gif);
  vertical-align:middle;
  margin:0 2px;
}

属性セレクタを利用して、href 属性の値に 「http:」、「https:」 を含んだ 「a」 要素にスタイルを指定します。「:after」 を使うことで、該当するリンクタグの後ろに先ほど用意したアイコンを表示。アイコンには前後に 「2px」 のマージンをつけています。

実際は適用範囲を絞る為にセレクタを使って、特定のブロック内のみにスタイルが適用されるようにしておいたほうがいいです。

これだけでも、エントリー内でサイト内リンクを記述する時は絶対 URI は使わず、相対パス、絶対パスでしか記述しませんなんて場合は外部リンクにのみアイコンがつきます。でも、たまに絶対 URI でサイト内リンクを書くとか、MT のようなツールを使っていて、 システムが自動的に書き出す内部リンクが絶対 URI になってしまっているなんて場合は、上記に続けて次のように記述しておきます。

a[href^="http://example.com/"]:after {
  content:"";
  margin:0;
}

「http://example.com/」 の部分には自サイトの URI に変更してください。これで href 属性の値に自サイトの URI が含まれている場合は、「content:"";」 とすることで先ほどのスタイルを上書きしているというわけです。

ちなみに、IE は最新の IE7 でもセレクタへの対応がイマイチで、「:after」 には未対応の為、これを記述しても何も起こりません。Firefox 等、CSS セレクタにしっかりと対応したブラウザでのみ使える方法です。