Movable Type 備忘録

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

Dec162007
Author: bzbell
Categories: Customize
Tags: CSS, Customize

Next Page: フィード読込んで気になるサイトチェック！
Prev Page: ウェブページのテンプレートを切り替える２

こんばんわ^^

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

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 属性を利用して、外部リンクにアイコンを表示するには以下のようにします。
```
a[target="_blank"] {
    padding-left: 13px;
    background: transparent url(exlink.gif) no-repeat center left;
}
```
上記では属性セレクタを使って、外部リンクの前にアイコンを表示させてます。
ただし、すべての外部リンクには target 属性が指定されていることが前提となります。
URL( http://～ )で識別する
先ほども言ったように、XHTML 1.1 では target 属性は非推奨です。そんな時は以下のようにします。
```
a[href^="http:"],
a[href^="https:"]{
    padding-left: 13px;
    background: transparent url(exlink.gif) no-repeat center left;
}
a[href^="http://●●●.com"],
a[href^="https://●●●.com"] {
    padding-left: 0;
    background: none;
}
```
まず、青い字の部分ですべてのリンクにアイコン表示させておいて、赤い字の部分で自サイトの URL を指定することでアイコンを表示しないようにします。

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

before 擬似要素を使う
before 擬似要素を使ってリンクの前にアイコンを表示します。
```
a[href^="http:"]:before,
a[href^="https:"]:before {
    margin: 0 2px;
    content: url(exlink.gif);
    vertical-align: middle;
}
a[href^="http://●●●.com"]:before,
a[href^="https://●●●.com"]:before {
    margin: 0;
    content: "";
}
```
先ほどと同様に、まず青い字の部分ですべてのリンクにアイコン表示させておいて、赤い字の部分で自サイトの URL を指定することでアイコンを表示しないようにします。

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

div.asset-body
a[href^="http:"]:before,
div.asset-body
a[href^="https:"]:before {
    margin: 0 2px;
    content: url(exlink.gif);
    vertical-align: middle;
}
div.asset-body
a[href^="http://●●●.com"]:before,
div.asset-body
a[href^="https://●●●.com"]:before {
    margin: 0;
    content: "";
}

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

Iconize Textlinks with CSS

- 2007.12.16 追記 -

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

<span class="mt-enclosure mt-enclosure-image"><a href="http://●●●.com/"><img src="http://●●●.com/image.gif" width="200" height="200" alt="" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;"></a></span>

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

div.asset-body a[href^="http:"]:before,
div.asset-body a[href^="https:"]:before,
div.asset-more a[href^="http:"]:before,
div.asset-more a[href^="https:"]:before {
    margin: 0 2px;
    content: url(exlink.gif);
    vertical-align: middle;
}
div.asset-body .mt-enclosure-image a:before,
div.asset-more .mt-enclosure-image a:before {
    content: "";
    margin: 0;
}

Trackback Pings(1)

TrackBack URL for this entry:

from Tips Community: Share This ...
Tracked on December 23, 2007

Comments(2)

#1: Posted by uzu [RES]: いつも拝見させてもらっております。
記事の通りCSSに追加してみたのですが、画像リンクにもアイコンが表示されてしまいます。
貴サイトでは、画像リンクにはアイコンが表示されてないようですがどのように対応されてるのでしょうか。
よろしくお願い致します。
Posted on December 16, 2007

#2: Posted by bzbell [RES]