サイトの見出しのスタイルにぴったり合わせたい
こんな時にどうぞ
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が表示されるようになります。