当ブログでは無料テーマcocoonを使用しています。
今回はウィジェットタイトルを装飾しました。
サイドバーの各項目の見出しのことです。
例：「profile」「カテゴリ」など
実際に追記したCSSと、参考にさせていただいたサイトの記事を載せます。
見出しにアンダーラインを引く
cocoonでは、ノーマルのままだとウィジェットタイトルは一色塗りつぶしですが、ここをカスタマイズしました。
cocoonに設定されているウィジェットタイトルの装飾を解除するCSSを記入した後、新しく装飾するCSSを追記していきます。
見出し1↑にはベージュのボーダー背景の装飾をしているのですが、ウィジェットタイトルもそれと似た色味のボーダーのアンダーラインにしました。
以下追記したCSS▽
.sidebar h3 {
background: none; /*背景色を解除*/
padding: 0; /*余白をなしに*/
font-size: 16px; /*文字サイズを小さく*/
letter-spacing: 2px; /*文字の間隔を少し広く*/
}
.sidebar h3:after {
content: “”;
display:block;
left: 0;
bottom: 0;
width: 100%;
height: 7px;
background: -webkit-repeating-linear-gradient(-45deg, #3f3d3d, #3f3d3d 2px, #fff 2px, #fff 4px);
background: repeating-linear-gradient(-45deg, #D7B999, #D7B999 2px, #fffae6 2px, #fffae6 4px);
}
参考：【cocoon】サイドバーの見出しデザインをカスタマイズ
タイトル前にfont awesomeのアイコンをつける
これはそのままリスブロさんのCSSをコピペさせていただきましたので記事のみ載せておきます。
参考：【cocoon】サイドバーウィジェットのタイトルにFontAwesomeアイコンをつけるCSSカスタマイズ
サイドバーの「カテゴリ」「人気記事」のタイトル前にかわいいアイコンがつきました。
今回のカスタマイズを経て、ちょっぴり優しい感じになりました。（自己満
追加で背景色をベージュに、またヘッダー画像を水彩風のロゴに変更しました。
こちらのブログではシュッとしたイメージにしたいと思ってたのですが、やっぱりゆるい感じが好きなようです。w
今回参考にさせていただいたサイト様
ありがとうございました！
