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;} /*文字色*/

 

カラーの変更

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

マカロンビビッドパステル伝統色和色セーフ色名

 

 

綾糸: 綾糸 主婦 1990年代、汎用機時代のエンジニア 趣味で長くやっていたweb制作は、未だにエディタでの手コーティング 現在は自宅でゆるりとweb制作やライターをしています