« 関連する記事画像の横幅を調整する | メイン

2013年10月24日 (木)

見出しを女子っぽくハート&点線にしてみる

@tomoko_and さんが運営されている、ネイルやアクセやグルメや旅行ネタのかわいい女子ブログ -&- で、Zenbackの見出しの部分を、とってもかわいくアレンジしてくださいました。

Tomoko_and

小さなハートと点線が、女子っぽくて素敵です。Zenbackも女子分を付加すべく、真似してみます。

コード

<style>
/* ラベルのアイコンと背景色をリセット */
#zenback #zenback-widget #zenback-news-hasimage .zenback-module-label,
#zenback #zenback-widget #zenback-related-links .zenback-module-label,
#zenback #zenback-widget #zenback-related-article .zenback-module-label,
#zenback #zenback-widget #zenback-twitter .zenback-module-label,
#zenback #zenback-widget #zenback-hatena-bookmark .zenback-module-label,
#zenback #zenback-widget #zenback-facebook-comment .zenback-module-label {
  background: none;
  background-color: #ffffff;
}

/* ラベルのテキストの箇所を、サイトの見だし(ここではh3)スタイルに合わせる */
#zenback #zenback-widget .zenback-module-label a,
#zenback #zenback-widget .zenback-module-label span {
  margin::10px 0 0 0;
  padding: 2px 0px 2px 25px;
  color: black;
  font-weight: bold;
  font-size: 16px;
  background: url(http://zenback.lekumo.biz/blog/images/2013/10/heart.png) 5px center no-repeat;
}

/* コンテンツ部分のborder-topに指定されている線を、見出しに合わせる */
#zenback #zenback-widget #zenback-news-hasimage .zenback-module-content,
#zenback #zenback-widget #zenback-related-article .zenback-module-content,
#zenback #zenback-widget #zenback-related-links .zenback-module-content,
#zenback #zenback-widget #zenback-twitter .zenback-module-content,
#zenback #zenback-widget #zenback-hatena-bookmark .zenback-module-content,
#zenback #zenback-widget #zenback-facebook-comment .zenback-module-content {
  border-top:1px dotted #CCC;
}
</style>

で、どうなるの?

この下のZenbackのラベル部分がかわいくなりました。

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

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

サイト内検索

Twitter

RSS登録