2009 年 12月 18 日 09:00
CSSと画像ファイルだけで外部リンクにアイコンを付加する
Wikipediaやニコニコ大百科などでは、外部Webサイトへのリンクにアイコンが付加され、ひと目で外部リンクだとわかるようになっています。これ、結構重宝しますよね。ちょっと調べてみると、外部リンクのアイコン付加はCSSと画像ファイルだけでできることがわかったので、今回、それをNBTKLOGに導入してみました。
その際、以下のWebサイトを参考にしました。
また、外部リンク用アイコンはCool Web Window様からお借りしました。
外部リンクのアイコンを付加する方法は簡単で、外部リンク用アイコンを適当な場所にアップロードし、CSSで以下の内容を記述するだけです。
/* external hyperlink icon */
a[href^="http"]{
background:url(img/arrow001_blue.gif) no-repeat right center;
padding-right:15px;
margin-right:3px;
}
a[href^="http://nbtklog.jp"],
a[href^="https://nbtklog.jp"]{
padding-right:inherit;
background:transparent;
}
* html a.external{ /* IE-expression (attr-selector) */
background:url(img/arrow001_blue.gif) no-repeat right center;
padding-right:15px;
margin-right:3px;
}
* html a{ /* IE-expression (attr-selector) */
behavior: expression(
this.className += this.getAttribute("href").match(/^http.*/) && (!this.getAttribute("href").matc("nbtklog.jp")) ? " external" : "",
this.style.behavior = "none"
);
}
/* END:external hyperlink icon */
このCSSを自分のWebサイトで使用したいとお考えの人は、コード中のnbtklog.jpを自分のWebサイトアドレスに変更してください。それと、background:の画像ファイルパスも変更してください。あとは各自好みでCSSに変更を加えます。各CSSの詳細については上で挙げたサイトで説明されていますので、そちらを参照してください。
これでこのサイトでも外部リンクかどうかの判断がしやすくなりました。
最近のコメント