HOME
HTML/CSS
外部リンクや各ファイルに合ったアイコンを自動的につける

外部リンクや各ファイルに合ったアイコンを自動的につける

CSSで外部リンク、PDF、Excel、Word、zipなどのファイルへのリンクにアイコンを自動的に付ける方法です。

HTML

 
<p><a href="http://webbibo.com/">ホームに戻る</a></p> 
<p><a href="http://www.google.co.jp/" target="_blank">GoogleのTOPページ</a></p> 
<p><a href="test.pdf">Webアンケート結果</a></p> 
<p><a href="test.doc">FAX送付状</a></p> 
<p><a href="test.xls">月別売上集計表</a></p> 
<p><a href="test.zip">アクセス解析プログラム</a></p>

CSS

 
p a{
    padding:4px 20px 4px 0;
}
 
a[href^="http"]{background:url(images/tips/external.png) no-repeat 100% 50%;}	/*モダンブラウザ向け*/
* html a.external{background:url(images/tips/external.png) no-repeat 100% 50%;}	/*IE向け*/
 
a[href$=".pdf"]{background:url(images/tips/pdf.png) no-repeat 100% 50%;}
* html a.pdf{ background:url(images/tips/pdf.png) no-repeat 100% 50%;}
 
a[href$=".doc"]{background:url(images/tips/word.png) no-repeat 100% 50%;}
* html a.doc{ background:url(images/tips/word.png) no-repeat 100% 50%;}
 
a[href$=".xls"]{background:url(images/tips/excel.png) no-repeat 100% 50%;}
* html a.xls{ background:url(images/tips/excel.png) no-repeat 100% 50%;}
 
a[href$=".zip"]{background:url(images/tips/zipper.png) no-repeat 100% 50%;}
* html a.zip{ background:url(images/tips/zipper.png) no-repeat 100% 50%;}
 
a[href^="http://webbibo.com"],	/*自サイトのURLを記述*/
a[href^="http://www.webbibo.com"]{	/*自サイトのURLを記述*/
    padding:inherit;
    background:transparent;
}
 
* html a{ /* IEのみ */
    behavior: expression(
    this.className += this.getAttribute("href").match(/^http.*/) && (!this.getAttribute("href").match("webbibo.com")) ? " external" : "",
    this.className += this.getAttribute("href").match(/\.pdf$/) ? " pdf" : '',
    this.className += this.getAttribute("href").match(/\.doc$/) ? " doc" : '',
    this.className += this.getAttribute("href").match(/\.xls$/) ? " xls" : '',
    this.className += this.getAttribute("href").match(/\.zip$/) ? " zip" : '',
    this.style.behavior = "none"
    );
}

リンクにアイコンを付けたサンプル

別サイトやリンク先のファイルが直観的にわかるので、便利ですよね。

date 2010.10.25