【THE THOR】サイドバーのカテゴリーリストのレイアウトカスタマイズ

この記事では、サイドバー及びメニューパネルで表示するウィジェット【カテゴリーリスト】のレイアウトをCSSで変更する方法について掲載しています。

※サイドバーとメニューパネル内カテゴリーの両方に共通の設定となります。

CSSファイルを編集する

CSSファイルを編集します。

【ダッシュボード】 → 【外観】 → 【テーマエディター】 → 【style-user.css】に記述します。

編集前(デフォルト)のレイアウト

編集後のレイアウト

主な変更点

1. 親カテゴリのアイコンを変更
   オーディオ系の【icon-play3】に変更しています。

   他のアイコンに変更する場合は、contentの”\ea1e”の部分に表示させたいアイコンのUnicodeを入力してください。
   ※アイコンコード一覧は下にリンクがあります。
    

2. 親カテゴリのアイコンサイズを変更
   font-sizeで指定します
   デフォルトより少し大きくしています
    
3. 子カテゴリのアイコンを非表示
   contentを””にすると非表示になります
    
4. 子カテゴリの左パディングを増加
   paddingで指定します
   子カテゴリの文字開始位置を少し右に下げています
    
5. その他
   マージンやパディングを調整しています
    

以下のコードをstyle-user.cssに追加して下さい。

.l-sidebar .widget.widget_categories ul li a:before, .menuBtn .widget.widget_categories ul li a:before {
	margin-right: 10px;
	margin-left: 5px;
	content: "\ea1e"; /*親カテゴリのアイコン*/
	font-size: 1.5rem; /*親カテゴリのアイコンサイズ*/
}
.l-sidebar .widget.widget_categories ul li .children li a, .menuBtn .widget.widget_categories ul li .children li a {
	padding: 10px 15px 10px 30px; /*左パディングを30pxに指定*/
}
.l-sidebar .widget.widget_categories ul li .children li a:before, .menuBtn .widget.widget_categories ul li .children li a:before {
	content: ""; /*子カテゴリのアイコン*/
}