backyard.weblog

Main Contents

リンク先のfaviconをiconみたく表示する

/ jQuery, Web / ,

Post

記事内のリンク先などのFaviconを表示する方法が CSS-Tricks に紹介されていたのでやってみた。

方法はいろいろ書かれていますが、とりあえずわたしはGoogleの「Favicon Service」を使用して、jQueryでiconを表示する方法を選びました。深い意味はありません。参考にしたのはこれ↓

このブログでは下記のようにしています。
エントリーの外部リンクだけでいいのでセレクタをちょっと変えました。

$('#mainBox a[target=_blank]').not('.shareBtns a').each(function() {
  $(this).css({
    background: 'url(http://www.google.com/s2/u/0/favicons?domain=' + this.hostname + ') left center no-repeat',
    'padding-left': '20px'
  });
});
  • Check
  • このエントリーをはてなブックマークに追加
  • Clip to Evernote

Similar Posts

Add Comment

WP-SpamFree by Pole Position Marketing

Comments

From:technodoor
July 13, 2012 (Fri)

“リンク先のfaviconをiconみたく表示する :: backyard.weblog” http://t.co/UghfSKVy

Trackbacks

Trackback URL