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

Tips

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

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

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

  1. CSSのみで指定(IE6非対応)
  2. CSS+JavaScriptで指定(IE6対応)
  3. CSS+jQueryで指定(IE6対応)
  4. 注意事項

1. CSSのみで指定(IE6非対応)

target="_blank"有無で識別

HTML

<!-- 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でアイコンを指定することができます。

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"が記述されていないのでアイコンは付かず、下には記述されているためにアイコンが付いています。
ブラウザで確認すると、表示は以下のようになります。

target="_blank"有無で識別

URLで識別

HTML

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

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

CSS

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

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

CSS

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

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

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

URLで識別

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

HTML

<!-- リンク先が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で各アイコンを指定します。

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ごとにそれぞれアイコンを付けることができます。
有名なサイトである場合はロゴなどのアイコンを付けることによって、ユーザーが一目でリンク先がどこなのかがわかります。
ブラウザで確認すると、表示は以下のようになります。

URLで識別

mailto:で識別

HTML

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

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

CSS

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

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

mailto:で識別

拡張子で識別

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

HTML

<!-- 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のように複数のセレクタを記述するだけです。

CSS

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のみで指定(IE6非対応)

実際の表示確認は以下。

目次へ

2. 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]-->

※2.1(beta4)の部分は、この記事を書いた時点での最新バージョンです。

※上記サンプルではGoogleコードを読み込んでいます。

head内に上記を記述することで、IE6でも正しく表示されるようになります。
以下より実際の表示確認ができますので、先程のサンプルと合わせて確認してみてください。

目次へ

3. 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"とクラスを付加

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

HTML

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

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

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

jQuery

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

記述した内容を簡単に説明すると、http://から始まるa要素があれば、そこにtarget="_blank"を付け、更にexternalというクラスを付加するというものになっています。
これを記述した状態で、再度先程のHTMLをブラウザで確認すると下記のようなソースに変化しています。

※実際に確認をする場合は、ブラウザのソース表示ではなくFirebugなどで確認してください。

HTML

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

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

http://から始まっているGoogleへのリンクのみにtarget="_blank"class="external"が付いているのが確認できます。
あとは、CSSでclass="external"に対してアイコンを背景指定するだけです。

CSS

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

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

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

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

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

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

HTML

<!-- target="_blank"とclassを付けたくない -->
<a href="https://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にはアイコンを付けずに同ウィンドウでリンクさせ、その他については各アイコンを付けて別ウィンドウでリンクさせたいとします。
その場合は、head内に以下を記述します。

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");
});

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

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>

http://から始まっているリンクにtarget="_blank"class="external"が付いていおり、更にGoogleからWordPressまでのリンクにはそれぞれ指定したclassも付いたのが確認できます。
あとは、CSSで各クラスにclassを背景指定します。

CSS

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;
}

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

URLで識別して、target="_blank"とクラスを付加

mailto:で識別

HTML

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

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

jQuery

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

CSS

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

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

mailto:で識別

拡張子で識別

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

HTML

<!-- 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");
});

CSS

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;
}

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

CSS+jQueryで指定(IE6対応)

以下より実際の表示確認ができ、こちらの方法はIE6でもちゃんと表示されます。

目次へ

4. 注意事項

以上、3パターンの方法を紹介してみましたが、いずれの方法にもちょっとした注意が必要になります。
上で紹介したCSSやjQueryをそのまま使うと、サイト内の全ての要素に対して適用されてしまうので、必要のないところにまで余計なアイコンが付いてしまったりしてしまいます。
なので、この要素内にあった場合にこれらを付加するという記述をする必要があります。

例えば<id="section"> ... </div>という要素があり、この要素内の外部リンクにのみアイコンを付加させたい場合は、それぞれ以下のような記述をします。

CSS - CSSのみで指定(IE6非対応)

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

jQuery - CSS+jQueryで指定(IE6対応)

$(document).ready(function(){
  $('#section a[href^="http://"]').addClass("external");
});

※別途CSSでclass="external"に背景画像を指定。

上記のように指定しても意図しない箇所に適用されてしまう場合は#sectionの部分を更に狭い範囲へ変更したり、CSSでアイコンを付加させたくない要素に対して追記したりします。
また、jQueryで指定の要素内でもこの要素に関しては適用しないようにする方法などもあります。

目次へ

参考サイト

使用した素材

目次へ

Close the search window,
please press close button or esc key.