先日phpspot開発日誌さまの記事の中で、
便利なjQueryプラグインをいくつか見つけましたが、
今回はそのうちの一つ、favicoを使わせてもらうことにしました。
これは自動でリンク先のfavicon.icoを表示してくれる優れもの。
今まではタイトル - サイト名という感じで、
ともすれば2行をまたぐ長々としたリンクになってしまっていたのを、
アイコンを利用することですっきりと纏めることが出来ます。
jQueryの導入についてはGoogleが提供している、
AJAX Libraries APIを使わせてもらいましょう。
そうしたらまずはこちらの記事内にあるdownloadを右クリックし、
jquery.favoriteIcon.jsを保存します。
Seesaaであればファイルマネージャを使って、
本jsファイルをアップロードし、アップ先のアドレスをメモ。
次に、<head>タグ内に以下を追記。
<script src="http://Your Domain/jquery.favoriteIcon.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('a').favoriteIcon({ iconClass : 'favoriteIcon' });
});
</script>1行目のYour Domainの部分は、適宜変更します。
そのまま適用してしまうと色々面倒ですので、
$('a').favoriteIcon({ iconClass : 'favoriteIcon' });
の「'a'」を適当なクラス名に変えておくと良いです。
例えばこのブログでは、アイコンを付けたいリンク先には
"favurl"クラスを指定していますが、
その場合は上記「'a'」を「'a.favurl'」とします。
後はcssの方で調整します、例えばこのような感じで…
.favurl a{
color:#333;
text-decoration:none;
}
.favurl img{
width:16px;
height:16px;
border:none;
padding-left:3px;
vertical-align:top;
}以上で完了です。上のリンクにも使っていますが、
Ajax
Yahoo! JAPAN
２ちゃんねる掲示板へようこそ
こんな具合になってます。
