« 2012年8月 | メイン | 2013年1月 »

2012年9月

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が表示されるようになります。

続きを読む "サイトの見出しのスタイルにぴったり合わせたい" »

2012年9月13日 (木)

前後左右の隙間を調整したい

■ こんな時にどうぞ

なんだか、Zenbackが前後左右とくっついちゃって変だなあ、という時は以下のコードで調整できます。

■ コード

<style>
#zenback #zenback-widget {
	margin-top: 50px;
	margin-bottom: 50px;
	margin-left: 50px;
	margin-right: 50px;
}
</style>

■ で、どうなるの?

前後左右に50pxスペースを取って、Zenbackを表示しています。

続きを読む "前後左右の隙間を調整したい" »

2012年9月 4日 (火)

背景色をつけたい

■ こんな時にどうぞ

Zenbackの後ろに背景色をつけたい!というときにどうぞ。

■ コード

<style>
#zenback #zenback-widget {
	background-color: gold;
}
</style>

■ で、どうなるの?

Zenbackの背景色が gold になりました!
もちろん、background-image: url("../images/kabegami.png")を指定して背景画像を入れることも出来ますよ。

続きを読む "背景色をつけたい" »

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

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

サイト内検索

Twitter

RSS登録