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

カスタマイズ

サイドバーのカテゴリーリストの見た目があまり好みでなかったので、あっさり目にカスタマイズしてみました。

  もくじ

実装するとこんな感じになります

アイコン・区切り線・背景色などは後からCSSで変更できます。

オーソドックスな感じのデザインと THOR のデフォのアレンジっぽいデザイン、4種類ほどサンプルを作ってみました。
メニューパネル（ハンバーガーメニューから開くメニュー）の中にカテゴリーウィジェットを設置している場合は、そちらも同じデザインに変わります。

シンプル

カテゴリーサンプル1
カテゴリーサンプル2

親カテゴリーに背景

カテゴリーサンプル3
カテゴリーサンプル4

実装する方法

好みのデザインを選んで「style-user.css」にコピペするだけです。

WordPress ＞ 外観 ＞ テーマの編集 ＞ style-user.css

カスタマイズできる個所を指定している部分にはコメントを入れてありますので、好みの色やスタイルに変更してご利用ください。

区切り線の色・背景色の変更について

区切り線や背景色は、THOR のデフォのスタイルに合わせて RGBA（赤青緑＋透明度を指定できるカラーモデル）で指定してありますが、「rgba(〇〇)」となっている部分を普通のカラーコードに置き換えても大丈夫です。

カラーコードを RGBA 値に変換するツールも公開されていますのでお好みでどうぞ。

便利なツール

カラーコード変換 | Tech-Unlimited

デザインとCSS一覧

シンプル（区切り線なし）

カテゴリーサンプル1

style-user.css

/*カテゴリーのカスタマイズ*/
.l-sidebar .widget.widget_categories ul, .menuBtn .widget.widget_categories ul {
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}
.l-sidebar .widget.widget_categories ul li, .menuBtn .widget.widget_categories ul li {
	border-top: 0;
	border-bottom: 0
}
.l-sidebar .widget.widget_categories ul .children li, .menuBtn .widget.widget_categories ul .children li {
	border-top: 0;
	padding-left: 1.2rem;
}
.l-sidebar .widget.widget_categories ul .children li:first-child, .menuBtn .widget.widget_categories ul .children li:first-child {
	border-top: 0;
}
.l-sidebar .widget.widget_categories ul li a, .menuBtn .widget.widget_categories ul li a {
	color: #333; /*親カテゴリの文字色*/
	font-weight: 700;
	background: none;
}
.l-sidebar .widget.widget_categories ul li a:before, .menuBtn .widget.widget_categories ul li a:before {
	margin-right: 15px;
	margin-left: 5px;
	color: #aaa; /*親カテゴリのアイコン色*/
	content: "\ea56"; /*親カテゴリのアイコン*/
}
.l-sidebar .widget.widget_categories ul li .children li a, .menuBtn .widget.widget_categories ul li .children li a {
	background: none;
	color: #999; /*子カテゴリの文字色*/
}
.l-sidebar .widget.widget_categories ul li .children li a:before, .menuBtn .widget.widget_categories ul li .children li a:before {
	color: #ddd; /*子カテゴリのアイコン色*/
	content: "\ea12"; /*子カテゴリのアイコン*/
}
.l-sidebar .widget.widget_categories ul li a:hover, .l-sidebar .widget.widget_categories ul li .children li a:hover, .menuBtn .widget.widget_categories ul li a:hover, .menuBtn .widget.widget_categories ul li .children li a:hover {
	background-color: rgba(0, 0, 0, 0.1); /*カーソルを載せた時の背景色*/
 }

シンプル（区切り線あり）

カテゴリーサンプル2

style-user.css

/*カテゴリーのカスタマイズ*/
.l-sidebar .widget.widget_categories ul, .menuBtn .widget.widget_categories ul {
	border-left: 0;
	border-right: 0;
	-bottom: 0;
}
.l-sidebar .widget.widget_categories ul li, .menuBtn .widget.widget_categories ul li {
	border-top: 1px solid rgba(0, 0, 0, 0.3); /*親カテゴリの上側区切り線*/
	border-bottom: 0
}
.l-sidebar .widget.widget_categories ul .children li, .menuBtn .widget.widget_categories ul .children li {
	border-top: 1px dashed rgba(0, 0, 0, 0.15); /*子カテゴリの上側区切り線*/
	padding-left: 1.2rem;
}
.l-sidebar .widget.widget_categories ul .children li:first-child, .menuBtn .widget.widget_categories ul .children li:first-child {
	border-top: 1px solid rgba(0, 0, 0, 0.3); /*親カテゴリの下側区切り線*/
}
.l-sidebar .widget.widget_categories h2 + ul, .menuBtn .widget.widget_categories h2 + ul{
	border-bottom: 1px dashed rgba(0, 0, 0, 0.15); /*一番下の区切り線*/
}
.l-sidebar .widget.widget_categories ul li a, .menuBtn .widget.widget_categories ul li a {
	color: #333; /*親カテゴリの文字色*/
	font-weight: 700;
	background: none;
}
.l-sidebar .widget.widget_categories ul li a:before, .menuBtn .widget.widget_categories ul li a:before {
	margin-right: 15px;
	margin-left: 5px;
	color: #aaa; /*親カテゴリのアイコン色*/
	content: "\ea56"; /*親カテゴリのアイコン*/
}
.l-sidebar .widget.widget_categories ul li .children li a, .menuBtn .widget.widget_categories ul li .children li a {
	background: none;
	color: #999; /*子カテゴリの文字色*/
}
.l-sidebar .widget.widget_categories ul li .children li a:before, .menuBtn .widget.widget_categories ul li .children li a:before {
	color: #ddd; /*子カテゴリのアイコン色*/
	content: "\ea12"; /*子カテゴリのアイコン*/
}
.l-sidebar .widget.widget_categories ul li a:hover, .l-sidebar .widget.widget_categories ul li .children li a:hover, .menuBtn .widget.widget_categories ul li a:hover, .menuBtn .widget.widget_categories ul li .children li a:hover {
	background-color: rgba(0, 0, 0, 0.1); /*カーソルを載せた時の背景色*/
 }
一番下が親カテゴリーになる場合は、「一番下の区切り線」とコメントが入っている部分を
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
と変更すれば、薄い破線 ⇒ 濃いめの実線に変更できます。

親カテゴリーに背景色（区切り線なし）

カテゴリーサンプル3

style-user.css

/*カテゴリーのカスタマイズ*/
.l-sidebar .widget.widget_categories ul, .menuBtn .widget.widget_categories ul {
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}
.l-sidebar .widget.widget_categories ul li, .menuBtn .widget.widget_categories ul li {
	border-top: 0;
	border-bottom: 0
}
.l-sidebar .widget.widget_categories ul .children li, .menuBtn .widget.widget_categories ul .children li {
	border-top: 0;
}
.l-sidebar .widget.widget_categories ul .children li:first-child, .menuBtn .widget.widget_categories ul .children li:first-child {
	border-top: 0;
}
.l-sidebar .widget.widget_categories ul li a, .menuBtn .widget.widget_categories ul li a {
	color: #333; /*親カテゴリの文字色*/
	font-weight: 700;
	background: rgba(0,0,0,0.03); /*親カテゴリの背景色*/
}
.l-sidebar .widget.widget_categories ul li a:before, .menuBtn .widget.widget_categories ul li a:before {
	margin-right: 15px;
	margin-left: 5px;
	color: #aaa; /*親カテゴリのアイコン色*/
	content: "\ea56"; /*親カテゴリのアイコン*/
}
.l-sidebar .widget.widget_categories ul li .children li a, .menuBtn .widget.widget_categories ul li .children li a {
	background: none;
	color: #999; /*子カテゴリの文字色*/
}
.l-sidebar .widget.widget_categories ul li .children li a:before, .menuBtn .widget.widget_categories ul li .children li a:before {
	color: #ddd; /*子カテゴリのアイコン色*/
	content: "\ea12"; /*子カテゴリのアイコン*/
}
.l-sidebar .widget.widget_categories ul li a:hover, .l-sidebar .widget.widget_categories ul li .children li a:hover, .menuBtn .widget.widget_categories ul li a:hover, .menuBtn .widget.widget_categories ul li .children li a:hover {
	background-color: rgba(0, 0, 0, 0.1); /*カーソルを載せた時の背景色*/
 }

親カテゴリーに背景色（区切り線あり）

カテゴリーサンプル4

style-user.css

/*カテゴリーのカスタマイズ*/
.l-sidebar .widget.widget_categories ul, .menuBtn .widget.widget_categories ul {
	border-left: 0;
	border-right: 0;
	-bottom: 0;
}
.l-sidebar .widget.widget_categories ul li, .menuBtn .widget.widget_categories ul li {
	border-top: 1px dashed rgba(0, 0, 0, 0.3); /*親カテゴリの上側区切り線*/
	border-bottom: 0
}
.l-sidebar .widget.widget_categories ul .children li, .menuBtn .widget.widget_categories ul .children li {
	border-top: 1px dashed rgba(0, 0, 0, 0.15); /*子カテゴリの上側区切り線*/
}
.l-sidebar .widget.widget_categories ul .children li:first-child, .menuBtn .widget.widget_categories ul .children li:first-child {
	border-top: 1px dashed rgba(0, 0, 0, 0.3); /*親カテゴリの下側区切り線*/
}
.l-sidebar .widget.widget_categories h2 + ul, .menuBtn .widget.widget_categories h2 + ul{
	border-bottom: 1px dashed rgba(0, 0, 0, 0.15); /*一番下の区切り線*/
}
.l-sidebar .widget.widget_categories ul li a, .menuBtn .widget.widget_categories ul li a {
	color: #333; /*親カテゴリの文字色*/
	font-weight: 700;
	background: repeating-linear-gradient(-45deg, #eaedf7, #eaedf7 1px, #fcfcfc 0, #fcfcfc 4px)/*親カテゴリーの背景色*/;
}
.l-sidebar .widget.widget_categories ul li a:before, .menuBtn .widget.widget_categories ul li a:before {
	margin-right: 15px;
	margin-left: 5px;
	color: #aaa; /*親カテゴリのアイコン色*/
	content: "\ea56"; /*親カテゴリのアイコン*/
}
.l-sidebar .widget.widget_categories ul li .children li a, .menuBtn .widget.widget_categories ul li .children li a {
	background: none;
	color: #999; /*子カテゴリの文字色*/
}
.l-sidebar .widget.widget_categories ul li .children li a:before, .menuBtn .widget.widget_categories ul li .children li a:before {
	color: #ddd; /*子カテゴリのアイコン色*/
	content: "\ea12"; /*子カテゴリのアイコン*/
}
.l-sidebar .widget.widget_categories ul li a:hover, .l-sidebar .widget.widget_categories ul li .children li a:hover, .menuBtn .widget.widget_categories ul li a:hover, .menuBtn .widget.widget_categories ul li .children li a:hover {
	background:repeating-linear-gradient(-45deg, #eaedf7, #eaedf7 1px, #eaedf7 0, #eaedf7 4px); /*カーソルを載せた時の背景色*/
 }
Follow me ?
>

THE THOR をダウンロード
CTR IMG