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

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

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

 

スポンサーリンク

CSSファイルを編集する

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

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

 

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

カテゴリデフォルトレイアウト
 

編集後のレイアウト

編集後カテゴリー
 

主な変更点

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

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

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

 

【icon-play3】以外のアイコンに変更する場合

 アイコンコード一覧は、右側にある+をクリック
基本アイコン
建物・乗り物アイコン
読込・AV機器アイコン
オーディオ系アイコン
人・顔アイコン
矢印・コメントアイコン
ロゴアイコン

 

以下のコードを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: ""; /*子カテゴリのアイコン*/
}