Blog::R.1000Leaf

favicon付きのリンクを超簡単に作れるJavaScriptライブラリを発見したので、早速、このブログの下のほうにある「この記事に関連するブックマーク」っていうリストに適用してみた。

Favicon API javascriptライブラリ

リンクに貼られた任意のCSSのclassにFavicon（フェイバリットアイコン、ファビコン）をPNG画像として表示するものです。

jigelog

これは面白い。

1. ダウンロードしてきた.jsファイルをサーバにアップロードして、
2. scriptタグで読み込ませて、
3. favicon表示したいaタグにclass="favicon_m"をつけるだけ

で、超簡単にこんなリンクが作れちゃう。

Google
Yahoo!JAPAN
Technorati

ソースは、

<a href="http://www.google.co.jp" class="favicon_m">Google</a><br>
<a href="http://www.yahoo.co.jp/" class="favicon_m">Yahoo!JAPAN</a><br>
<a href="http://www.technorati.jp/" class="favicon_m">Technorati</a>

これだけ。超簡単。

ついでにもう一手間

liタグのcss設定で下記のようにすれば、faviconをリスト先頭のマーカーにしたかっこいい（と思うんだけど、どうかな）リストも簡単に作れちゃうね。

list-style:none;
margin-left:20px;
text-indent:-20px;  /*marginとindentは微調整が必要*/

早速、このブログの下のほうにある「この記事に関連するブックマーク」っていうリストに適用してみた。
なかなか見栄えがするようになったんじゃなかろうか。

ちなみに

「この記事に関連するブックマーク」は、自分のはてなブックマークのRSSをmagpieって言うPHPスクリプトで解析して表示しています。
それだけじゃなんなので、記事に割り当てたタグとはてブのタグが一致するものを抽出して表示させてます。

javascript,favicon