3/3 別ウインドウで開くリンクにアイコンを付加 [ホームページ作成] All About

新規ウインドウを表すアイコンを用意する

ここでは、以下のようなアイコンを用意しました。何でも好きなようにアイコン画像を作って下さい。

アイコン画像（newwinicon.gif）：「」

必要であれば、上記のアイコン画像をコピーしてお使いいただいても構いません。（横16px×縦14px）

新規ウインドウで開くリンクにアイコンを付加するソース

前ページでご紹介した「属性セレクタ」と「after疑似要素」を使って、実際に「新規ウインドウで開くリンクに限定してアイコンを付加する」ソースを書くと、以下のようになります。
※アイコン画像ファイル名が「newwinicon.gif」の場合

<style type="text/css">
   a[target="_blank"]:after {
      content: url(newwinicon.gif);
      margin: 0px 2px;
   }
</style>

●a[target="_blank"]:after
この箇所は前のページで解説した通り、「a要素のうち、target="_blank"が指定されている箇所の直後」に装飾を加えるという指定です。

●content: url( newwinicon.gif );
加える内容をcontentプロパティで指定します。ここでは、newwinicon.gifという画像を表示するよう指定しています。

●margin: 0px 2px;
そのままではリンク文字とアイコン画像との間隔が詰まりすぎるので、画像の左右に2ピクセルの余白を設けています。
※marginプロパティに値を2つ指定すると、「上下の余白」→「左右の余白」を指定したことになります。

上記のスタイルシートを使って作ったサンプルページはこちら。

対象ブラウザ

このように便利な「属性セレクタ」と「after疑似要素」ですが、残念ながら古いブラウザでは解釈されない場合があります。 Internet Explorerの場合は、以下のような対応になっています。
※Firefox、Opera、Safari、Google Chromeではどちらも使えます。

Internet Explorer 8 ：「属性セレクタ」と「after疑似要素」共に利用可能
Internet Explorer 7 ：「属性セレクタ」のみ利用可能
Internet Explorer 6 ：どちらにも非対応

したがって、今回ご紹介した方法は、Internet Explorerの場合は最新のVer.8でないと表示されません。
IE7でも表示できるようにしたい場合は、after疑似要素の代わりにbackground-imageプロパティを使って「背景画像」としてアイコンを表示させるような方法があります。その方法は、記事「リンク文字の直後にアイコンを加える」でご紹介していますのでご参照下さい。
IE6でも表示できるようにしたい場合は、（属性セレクタが使えないので）対象とするリンクすべてにclass属性を付加するなどの方法を使うしかないでしょう。