【cocoonカスタマイズ 】サイドバーのウィジェットタイトルの装飾。

Cocoon

当ブログでは無料テーマ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

今回参考にさせていただいたサイト様

わたし
わたし

ありがとうございました!