Cocoonの使い方やカスタマイズとオリジナルスキン

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

スポンサーリンク
カスタマイズ

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

 

スポンサーリンク

カスタマイズサンプル

Before

Cocoonのサイドバータイトル

 

 

After

Cocoonのサイドバータイトルカスタマイズ

 

サンプルではシンプルに角を丸めているだけですが、この記事で紹介するクラス名で好きなデザインに変更してご利用下さい。

 

カスタマイズ方法

簡単なCSS追記のみです。

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

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

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

 

CSS

角を丸める

Cocoonのサイドバータイトルカスタマイズ

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

 

白抜きにする例

Cocoonのサイドバータイトルカスタマイズ

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

 

下線にする場合

Cocoonのサイドバータイトルカスタマイズ

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

 

カラーの変更

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

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

 

 

コメント

タイトルとURLをコピーしました