Cocoonのサイドバーウィジェットなどのリストデザインをカスタマイズ

Cocoon・カスタマイズ

2020.02.122024.01.25

この記事は約3分で読めます。

Cocoonのサイドバーに表示できる「カテゴリー」や「メニュー」などのウィジェットは、リスト形式で表示されますが、初期デザインはシンプルな以下のようなものです。

このデザインをカスタマイズしてみます。

カスタマイズ方法
アイコンフォント未使用
- パターンA
- パターンB
アイコンフォント使用
- パターンA
- パターンB・C・D
カラーの変更

カスタマイズ方法

簡単なCSS追記のみです。

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

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

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

アイコンフォント未使用

パターンA

先頭に「●」を付ける

/************************/
/*サイドバーのリスト*/
/************************/
#sidebar ul li a:before{
content: "●";
color:#839b5c; /*●の色*/
padding-right:5px; /*余白*/
font-size:18px; /*●のサイズ*/
}

パターンB

下線を入れる

上記のCSSに以下の１行を追加

#sidebar ul li{border-bottom: 1px dashed #839b5c;/*線の形式・サイズ・色*/}

その他の線の種類
実線　　solid　　ドット　dotted

アイコンフォント使用

パターンA

先頭に矢印アイコンを付ける

#sidebar ul li a:before{
font-family: "Font Awesome 5 Free";
content: "f152"; /*アイコンフォント*/
font-weight: 900;
color:#839b5c; /*アイコンフォントの色*/
padding-right:5px;
font-size:18px;
list-style:none;
}