見出しを女子っぽくハート&点線にしてみる
@tomoko_and さんが運営されている、ネイルやアクセやグルメや旅行ネタのかわいい女子ブログ -&- で、Zenbackの見出しの部分を、とってもかわいくアレンジしてくださいました。
小さなハートと点線が、女子っぽくて素敵です。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のラベル部分がかわいくなりました。