2009年06月30日

jQueryでfavicon付きリンクを作る

Add a favicon near external links with jQuery

先日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
2ちゃんねる掲示板へようこそ
こんな具合になってます。


タグ:jquery favico
posted by garni at 03:23 | Comment(0) | TrackBack(0) | IT関連 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。