リンク先や拡張子ごとにアイコンを表示する方法

PDFの場合はPDFアイコン、メーラーが起動する場合はメールアイコンなどのように、各リンク先の種類に応じてアイコンを表示させる方法を紹介します。
個人的に普通のリンクだと思ってクリックしたら突然PDFが開いたり、メーラーが起動したりでイライラしたことが何度かあったので、ユーザーに同じような思いをさせないためにもこういう細かいところにも気を配りたいですね。

HTMLについて

ここでは基本的に下記のようなHTMLを使用する想定になっています。

<!-- 通常のリンク -->
<a href="http://www.example.com">http://www.example.com</a>

<!-- mailto -->
<a href="mailto:example@example.xxx.com">example@example.xxx.com</a>

<!-- Excel -->
<a href="example.xls">example.xls</a>

<!-- PDF -->
<a href="example.pdf">example.pdf</a>

例えば、PDFの場合<a class="pdf" href="example.pdf">example.pdf</a>のように個別にclassやidを指定してCSSで背景画像を指定していく方法もあるのですが、今回は上のサンプルコードのようにclassやidをHTMLには直接記述せずにアイコンを表示する方法を3パターン紹介します。

CSSのみで指定（IE6非対応）

target="_blank"有無で識別

<!-- target="_blank" 有 -->
<a href="http://www.example.com">http://www.example.com</a>

<!-- target="_blank" 無 -->
<a href="http://www.example.com" target="_blank">http://www.example.com</a>

上記HTMLの場合、下記のCSSでアイコンを指定することができます。

a[target="_blank"] {
  display: inline-block;
  padding-right: 20px;
  background: url(../images/icon_external.png) no-repeat right center;
}

上記CSSセレクタは、リンクにtarget="_blank"が指定されている場合にアイコンを付けるというものになっています。
このサンプルの場合、上にはtarget="_blank"が記述されていないのでアイコンは付かず、下には記述されているためにアイコンが付くようになり、ブラウザで確認すると以下のように表示されます。

URLで識別

<a href="http://www.nxworld.net/">http://www.nxworld.net/</a>
<a href="http://www.example.com">http://www.example.com</a>

上記HTMLの場合、下記のCSSでアイコンを指定することができます。

a[href^="http://"] {
  display: inline-block;
  padding-right: 20px;
  background: url(../images/icon_external.png) no-repeat right center;
}

上記CSSセレクタで、リンクがhttp://から始まる場合にアイコンを付けるというものになっています。
ただ、このままだとhttp://から始まる全てのリンクに対してアイコンが付いてしまい、アイコンを付けたくない箇所にも付いてしまいますので、アイコンを付けたくないURLに対してのスタイルも同時に指定します。

a[href^="http://"] {
  display: inline-block;
  padding-right: 20px;
  background: url(../images/icon_external.png) no-repeat right center;
}

a[href^="http://www.nxworld.net/"] {
  padding-right: 0;
  background: none;
}

上記CSSを追記することで、URLがhttp://から始まっている場合でも、http://www.nxworld.net/の場合はアイコンが付かないようになり、ブラウザで確認すると以下のように表示されます。

また、先ほどはリンクがhttp://から始まっていてもhttp://www.nxworld.net/に対してはアイコンを付けないということでしたが、逆に特定のURLに対してはこのアイコンを使用するといった指定もできます。

<!-- リンク先がGoogle -->
<a href="http://www.google.co.jp/">Google</a>

<!-- リンク先がYahoo! -->
<a href="http://www.yahoo.co.jp/">Yahoo!</a>

<!-- リンク先がFlickr -->
<a href="http://www.flickr.com/">Flickr</a>

<!-- リンク先がWordPress -->
<a href="http://wordpress.org/">WordPress</a>

上記HTMLの場合、下記のCSSで各アイコンを指定します。

a[href^="http://www.google.co.jp/"] {
  display: inline-block;
  padding-right: 20px;
  background: url(../images/icon_google.png) no-repeat right center;
}

a[href^="http://www.yahoo.co.jp/"] {
  display: inline-block;
  padding-right: 20px;
  background: url(../images/icon_yahoo.png) no-repeat right center;
}

a[href^="http://www.flickr.com/"] {
  display: inline-block;
  padding-right: 20px;
  background: url(../images/icon_flickr.png) no-repeat right center;
}

a[href^="http://wordpress.org/"] {
  display: inline-block;
  padding-right: 20px;
  background: url(../images/icon_wordpress.png) no-repeat right center;
}

http://www.google.co.jp/の場合はGoogleアイコン、http://wordpress.org/の場合はWordPressのアイコンというように、URLごとにそれぞれアイコンを付けることができます。
有名なサイトである場合はロゴなどのアイコンを付けることによって、ユーザーが一目でリンク先がどこなのかがわかります。
ブラウザで確認すると以下のように表示されます。

mailto:で識別

<a href="mailto:example@example.xxx.com">example@example.xxx.com</a>

上記HTMLの場合、下記のCSSでアイコンを指定することができます。

a[href^="mailto:"] {
  display: inline-block;
  padding-right: 20px;
  background: url(../images/icon_mail.png) no-repeat right center;
}

上記CSSセレクタで、リンクにmailto:が指定されている場合にアイコンを付けるというものになっており、ブラウザで確認すると以下のように表示されます。

拡張子で識別

.xlsの場合はExcelアイコン、.pdfの場合はPDFアイコンというように、拡張子によって（リンク文字列の末尾によって）アイコンを付ける方法です。

<!-- Excel -->
<a href="example.xls">example.xls</a>
<a href="example.xlsx">example.xlsx</a>

<!-- PDF -->
<a href="example.pdf">example.pdf</a>

<!-- Zip -->
<a href="example.zip">example.zip</a>

<!-- JPG -->
<a href="example.jpg">example.jpg</a>

上記HTMLの場合、下記のCSSでアイコンを指定することができます。
複数の拡張子に対して同じ指定をしたい場合は、Excelのように複数のセレクタを記述するだけです。

a[href$=".xls"], a[href$=".xlsx"] {
  display: inline-block;
  padding-right: 20px;
  background: url(../images/icon_excel.png) no-repeat right center;
}

a[href$=".pdf"] {
  display: inline-block;
  padding-right: 20px;
  background: url(../images/icon_pdf.png) no-repeat right center;
}

a[href$=".zip"] {
  display: inline-block;
  padding-right: 20px;
  background: url(../images/icon_zip.png) no-repeat right center;
}

a[href$=".jpg"] {
  display: inline-block;
  padding-right: 25px;
  background: url(../images/icon_jpg.png) no-repeat right center;
}

上で紹介したサンプル全て＋αをブラウザで確認すると、表示は以下のようになります。

CSS＋JavaScriptで指定（IE6対応）

先ほどの方法を使えばほとんどのブラウザで実装できるんですが、IE6には対応していません...。
シェアも減ってきてクライアントによってはIE6を無視してOKという案件も増えてきてはいますが、まだまだ無視できないのが現状だと思います。
先ほどの方法を使いつつもIE6で表示させる場合は、「IE7.js」を使用することで解決できます。

HTML - head

<!--[if lt IE 7]>
  <script type="text/javascript" src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->

head内に上記を記述することでIE6でも正しく表示されるようになり、このサンプルコードの場合はGoogleコードを読み込んでいます。

CSS＋jQueryで指定（IE6対応）

上2つはCSSのセレクタを使用してHTMLにクラス等を付けない方法でしたが、今度はjQueryを使用してそれぞれにクラスを付ける方法です。
また、パスの指定方法やURLによってtarget="_blank"を付ける方法も紹介します。

jQueryを使う準備をする

これから紹介する方法はjQueryを使用するので、まずはライブラリを読む込み必要があります。
ファイルをダウンロードして使用する場合は「Downloading jQuery」から、Minified（圧縮版）もしくはUncompressed（非圧縮版）のいずれかをダウンロードして読み込ませるだけです。
一般的には読み込み速度が早いMinified（圧縮版）を使用することが多いです。
例えば、バージョン1.7のMinified（圧縮版）を読み込む場合は、HTMLのheadに下記のように記述します。

HTML - head

<script type="text/javascript" src="js/jquery-1.7.min.js"></script>

上の方法はダウンロードする方法でしたが、先程の「IE7.js」のようにGoogle Libraries APIを利用する方法もあります。
ダウンロードのときと同じライブラリをGoogle Libraries APIから読み込む場合は、HTMLのheadに下記のように記述します。

HTML - head

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

上記いずれかの方法で、jQueryが使えるようになります。

リンク先がhttp://から始まる場合、target="_blank"とclassを付加

jQueryを使って、リンク先がhttp://から始まるような外部リンクにだけtarget="_blank"とclassを付けます。

<!-- 相対パス指定 -->
<a href="../../">NxWorld</a></li>

<!-- http://www.google.co.jp/を指定 -->
<a href="http://www.google.co.jp/">Google</a>

コードを見ると、どちらのリンクにもtarget="_blank"とclassが付いていないのがわかると思います。
このままではブラウザで確認しても、どちらも同じウィンドウでリンク先に移動し、アイコンも付いていない表示となりますので下記jQueryを記述します。

jQuery

$(document).ready(function(){
  $('a[href^="http://"]').attr("target", "_blank").addClass("external");
});

記述した内容を簡単に説明すると「http://から始まるa要素があれば、そこにtarget="_blank"とexternalというclassを付加する」というものになっています。
これを記述した状態で再度先ほどのHTMLをブラウザで確認すると、下記のようにhttp://から始まっているGoogleへのリンクのみにtarget="_blank"とclass="external"が付いているのが確認できます。

<!-- 相対パス指定 -->
<a href="../../">NxWorld</a></li>

<!-- http://www.google.co.jp/を指定 -->
<a class="external" href="http://www.google.co.jp/" target="_blank">Google</a>

あとは、CSSでclass="external"に対してアイコンを背景指定するだけです。

a.external {
  display: inline-block;
  padding-right: 20px;
  background: url(../images/icon_external.png) no-repeat right center;
}

ブラウザで確認すると表示は以下のようになります。

URLで識別して、target="_blank"とclassを付加

上の方法では、http://から始まる全てのリンクにtarget="_blank"とclassが付いてしまいます。
先程のサンプルのように、内部リンクは相対パスで外部リンクは絶対パスとなっていればこのままで良いのですが、そうでない場合であったり、絶対パスで記述はしているが同ウィンドウでリンクさせたいときなどに困ります。

リンク先がhttp://から記述されていても、このURLにはtarget="_blank"もclassも付けたくないという場合や特定のURLに対しては他と違うアイコンを表示させたいという場合などは、次のような方法で表示できます。

<!-- target="_blank"とclassを付けたくない -->
<a href="http://www.nxworld.net/">NxWorld</a></li>

<!-- target="_blank"とclassを付けたい -->
<a href="http://www.example.com">http://www.example.com</a>
<a href="http://www.google.co.jp/">Google</a>
<a href="http://www.yahoo.co.jp/">Yahoo!</a>
<a href="http://www.flickr.com/">Flickr</a>
<a href="http://wordpress.org/">WordPress</a>

例えば、上記のようなすべてのリンクが絶対パスで記述されたコードがあるとします。
このNxWorldにはアイコンを付けずに同ウィンドウでリンクさせ、その他については各アイコンを付けて別ウィンドウでリンクさせたい場合は下記jQueryを記述します。

jQuery

$(document).ready(function(){
  $('a[href^="http://"]').not('[href*="https://www.nxworld.net/"]').attr("target","_blank").addClass("external");
  $('a[href^="http://www.google.co.jp/"]').addClass("google");
  $('a[href^="http://www.yahoo.co.jp/"]').addClass("yahoo");
  $('a[href^="http://www.flickr.com/"]').addClass("flickr");
  $('a[href^="http://wordpress.org/"]').addClass("wordpress");
});

具体的な動きとしては「http://から始まるa要素があればtarget="_blank"とclass="external"を付加するが、http://www.nxworld.net/に対しては付加しない」というものになっています。
また6行目からは、URLがhttp://www.google.co.jp/のときはclass="google"を付加し、http://www.yahoo.co.jp/のときはclass="yahoo"を付加というような内容になっています。
これを記述した状態でHTMLをブラウザで確認すると下記のようなコードに変化しています。

<!-- target="_blank"とclassを付けたくない -->
<a href="https://www.nxworld.net/">NxWorld</a></li>

<!-- target="_blank"とclassを付けたい -->
<a class="external" href="http://www.example.com" target="_blank">http://www.example.com</a>
<a class="external google" href="http://www.google.co.jp/" target="_blank">Google</a>
<a class="external yahoo" href="http://www.yahoo.co.jp/" target="_blank">Yahoo!</a>
<a class="external flickr" href="http://www.flickr.com/" target="_blank">Flickr</a>
<a class="external wordpress" href="http://wordpress.org/" target="_blank">WordPress</a>

あとは、CSSで各クラスにclassを背景指定します。

a.external {
  display: inline-block;
  padding-right: 20px;
  background: url(../images/icon_external.png) no-repeat right center;
}

a.google {
  display: inline-block;
  padding-right: 20px;
  background: url(../images/icon_google.png) no-repeat right center;
}

a.yahoo {
  display: inline-block;
  padding-right: 20px;
  background: url(../images/icon_yahoo.png) no-repeat right center;
}

a.flickr {
  display: inline-block;
  padding-right: 20px;
  background: url(../images/icon_flickr.png) no-repeat right center;
}

a.wordpress {
  display: inline-block;
  padding-right: 20px;
  background: url(../images/icon_wordpress.png) no-repeat right center;
}

ブラウザで確認すると、表示は以下のようになります。

mailto:で識別

<a href="mailto:example@example.xxx.com">example@example.xxx.com</a>

上記コードの場合、下記のjQueryとCSSの記述でアイコンを指定することができます。

jQuery

$(document).ready(function(){
  $("a[href^=mailto]").addClass("mail");
});

a.mail {
  display: inline-block;
  padding-right: 20px;
  background: url(../images/icon_mail.png) no-repeat right center;
}

まずjQueryでmailtoが指定されているa要素があればmailというclassを付加するという内容を記述し、その後CSSでアイコンを指定します。
ブラウザで確認すると、表示は以下のようになります。

拡張子で識別

CSSセレクタを使ったときと同様で、.xlsの場合はExcelアイコン、.pdfの場合はPDFアイコンというように、拡張子によって（リンク文字列の末尾によって）アイコンを付ける方法です。

<!-- Excel -->
<a href="example.xls">example.xls</a>
<a href="example.xlsx">example.xlsx</a>

<!-- PDF -->
<a href="example.pdf">example.pdf</a>

<!-- Zip -->
<a href="example.zip">example.zip</a>

<!-- JPG -->
<a href="example.jpg">example.jpg</a>

上記コードの場合、下記のjQueryとCSSの記述でアイコンを指定することができます。
複数の拡張子に対して同じ指定をしたい場合は、Excelのように複数の拡張子を記述します。

jQuery

$(document).ready(function(){
  $("a[href$=xls], a[href$=xlsx]").addClass("xls");
  $("a[href$=pdf]").addClass("pdf");
  $("a[href$=zip]").addClass("zip");
  $("a[href$=jpg]").addClass("jpg");
});

a.xls {
  display: inline-block;
  padding-right: 20px;
  background: url(../images/icon_excel.png) no-repeat right center;
}

a.pdf {
  display: inline-block;
  padding-right: 20px;
  background: url(../images/icon_pdf.png) no-repeat right center;
}

a.zip {
  display: inline-block;
  padding-right: 20px;
  background: url(../images/icon_zip.png) no-repeat right center;
}

a.jpg {
  display: inline-block;
  padding-right: 25px;
  background: url(../images/icon_jpg.png) no-repeat right center;
}

上で紹介したサンプル全て＋αをブラウザで確認すると、表示は以下のようになります。