Cocoonのサイドバータイトル（ウィジェットタイトル）カスタマイズ

Cocoonのサイドバータイトル（ウィジェットタイトル）のデザインカスタマイズをしてみます。

 

カスタマイズサンプル

Before

 

 

After

 

 

カスタマイズ方法

簡単なCSS追記のみです。

CSS追記は以下のいずれかから行って下さい。

外観→カスタマイズ→追加CSS

外観→テーマエディター→style.css

 

CSS

角を丸める

/*ウィジェットタイトル*/
#sidebar .widget-sidebar-title{border-radius: 15px;}

 

白抜きにする例

/*ウィジェットタイトル*/
#sidebar .widget-sidebar-title{border-radius: 15px;
background: #fff; /*背景色*/
border: 1px solid #839b5c; /*枠線色*/
color: #839b5c;} /*文字色*/

 

下線にする場合

/*ウィジェットタイトル*/
#sidebar .widget-sidebar-title{
border-bottom: 2px solid #839b5c; /*下線色・太さ*/
background: #fff; /*背景色*/
color: #839b5c;} /*文字色*/

 

カラーの変更

お好きなカラー設定には以下もご利用下さい。

マカロンビビッドパステル伝統色和色セーフ色名赤桃青紫黄橙緑茶黒