« 前後左右の隙間を調整したい | メイン | ラベルの背景色を変更したい »

2012年9月28日 (金)

サイトの見出しのスタイルにぴったり合わせたい

こんな時にどうぞ

Zenbackのスタイルとサイトの見出しとぴったり合わせたい場合、例えばこのサイトの見出しのスタイルに合わせるにはこんなふうに作ります。

2013/08/08 おしらせ欄のラベルのスタイルも変更できるよう、アップデートいたしました。

コード

<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: 30px 0 10px;
  padding: 0 5px 5px;
  color: black;
  font-weight: bold;
  font-size: 116%;
}

/* コンテンツ部分の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: 3px solid #89BC5C;
}
</style>

で、どうなるの?

サイトの見出しのスタイルそのままでZenbackが表示されるようになります。

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

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

サイト内検索

Twitter

RSS登録