« 【最初に読んでね】このブログの使い方 | メイン | 背景色をつけたい »

2012年8月21日 (火)

ラベルのアイコンを変更したい

■ こんな時にどうぞ

Zenbackの「関連する記事」、「関連するみんなの記事」など、ラベル部分のアイコンを変更します。あらかじめ、アイコン画像をどこかにアップロードしてそのURLを取得しておいてください。

16x16サイズのこんなアイコンを用意してみました。
→  ぷちっ。

■ コード

<style>
/* おしらせ欄 */
#zenback #zenback-widget #zenback-news-hasimage .zenback-module-label {
	background-image: url(http://zenback.lekumo.biz/img/icon.png);
}

/* 関連する記事 */
#zenback #zenback-widget #zenback-related-article .zenback-module-label {
	background-image: url(http://zenback.lekumo.biz/img/icon.png);
}

/* 関連するみんなの記事 */
#zenback #zenback-widget #zenback-related-links .zenback-module-label {
	background-image: url(http://zenback.lekumo.biz/img/icon.png);
}

/* Twitter */
#zenback #zenback-widget #zenback-twitter .zenback-module-label {
	background-image: url(http://zenback.lekumo.biz/img/icon.png);
}

/* はてなブックマーク */
#zenback #zenback-widget #zenback-hatena-bookmark .zenback-module-label {
	background-image: url(http://zenback.lekumo.biz/img/icon.png);
}

/* Facebook */
#zenback #zenback-widget #zenback-facebook-comment .zenback-module-label {
	background-image: url(http://zenback.lekumo.biz/img/icon.png);
}
</style>

url()の中に、アップロードした画像のURLを入れてください。

■ で、どうなるの?

関連する記事などのラベルのアイコンがぜんばーどに変わりました。

ここは何のブログ?
ここは、Zenbackっていうブログパーツのデザインカスタマイズをご紹介するブログです。Twitter @zenback のなかのひとが運営しています。

設定方法など、よくわからなくなっちゃったら、「Zenback デザインハックブログ: 【最初に読んでね】このブログの使い方」の記事をご覧ください。

サイト内検索

Twitter

RSS登録