Cocoon　サイドバーのカテゴリーカスタマイズ

カスタマイズ

2022.01.22

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

サイドバーにカテゴリー設置
サイドバーのカスタマイズ
1. Font Awesome 5の使い方
うまくいかないときの対処方法。

サイドバーにカテゴリー設置

外観　➡　ウィジェット　➡　サイドバーに追加していきます。

カテゴリーをサイドバーにウィジェット追加していきます。

カテゴリーの表示設定をして保存します。

サイドバーのカスタマイズ

初期設定のカテゴリーサイドバーを、アイコン付きに変更していきます。

今回、使ったアイコンフォント

Font Awesome

使ったCSS

/* カテゴリーfa5アイコン表示 */
.widget_categories ul li a{ 			
  border-bottom: 1px dashed #CCCCCC;  		
}			
.widget_categories ul li a::before{			
  font-family: "Font Awesome 5 Free"; /*バージョン指定*/			
  content: "\f07b";
  color:#a6baf5;			
  padding-right: 6px;	
  font-weight: 900;		
	  font-size: 16px;		
}						
.widget_categories > ul > li > a:first-child{ 			
  border-top: none;		
}								
.widget_categories ul li a{ 			
  border-bottom: 1px dashed #CCCCCC;		
}			
.widget_categories ul li ul li a::before{ 		
  font-family: "Font Awesome 5 Free";
  content: "\f101"; 
  color:#a6baf5;		
  padding-right: 6px;	
  font-weight: 900;	
	  font-size: 16px;		
}

content の所が、アイコンの場所になります。

Font Awesome 5 で、好きなアイコンの番号を入力してください。

親カテゴリーと、子カテゴリー両方変更してください。

私の画像のアイコンでよければ、そのままCSSを貼ってください。