【コピペOK！】THE THORのカテゴリーウィジェットをSWELL風にカスタマイズしてみたよ！

当ブログが愛用しているWordPressテーマ、
「THE THOR」のカスタマイズをご紹介していきます！

カテゴリーウィジェットの設定

紹介しているデザイン通りにする場合は、
このようにウィジェットを合わせてください^^

タイトルまでは合わせなくて大丈夫です！

コード

HTMLはいっさい触らず、CSSのみでカスタマイズしていきます。

.widget.widget_categories ul,
.widget.widget_nav_menu ul.menu {
	border: none !important;     /* ボーダーを非表示*/
}
.widget.widget_categories ul li,
.widget.widget_nav_menu ul.menu li {
	border-color: #eee;     /* ボーダーの色 */
}
.widget_categories ul li.cat-item a,
.widget.widget_nav_menu ul.menu li.menu-item a {
	padding: 10px 10px 10px 30px;
	position: relative;
	background: none;
	color: #285d85;     /* 文字色 */
	transition: .3s;     
}
.widget.widget.widget_categories ul li a::before,
.widget.widget_nav_menu ul.menu li.menu-item a::before {
	content: '\e938';     /* フォルダのアイコンにしてます */
	color: #2f80d9;     /* アイコンの色 */
	font-size: 1.1rem;     /* アイコンのサイズ */
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
}
.widget_categories ul li.cat-item a:hover,
.widget.widget_nav_menu ul.menu li.menu-item a:hover {
	background: #e4f2ff;     /* マウスオーバー時の背景色 */
	color: #285d85;     /* マウスオーバー時の文字色 */
	font-weight: normal;
	padding-left: 35px;
}
.widget.widget_categories ul li.cat-item a .widgetCount {
	background: none;
	font-size: 1.3rem;
}
.widget.widget_categories ul li.cat-item a .widgetCount::before {
	content: '(';
	margin-right: 2px;
}
.widget.widget_categories ul li.cat-item a .widgetCount::after {
	content: ')';
	margin-left: 2px;
}
.widget.widget_categories ul .children li,
.widget.widget_nav_menu ul.menu li.menu-item .sub-menu li {
	border-color: #eee;     /* ボーダーの色 */
}
.widget.widget_categories ul li .children li a,
.widget.widget_nav_menu ul.menu li.menu-item .sub-menu li a {
	padding: 9px 9px 9px 40px;
	position: relative;
	font-size: 1.2rem;
	color: #285d85;     /* 文字色 */
}
.widget.widget_categories ul li .children li a::before,
.widget.widget_nav_menu ul.menu li.menu-item .sub-menu li a::before {
	content:'';
	display: block;
	width: 5px;
	height: 5px;
	border-top: solid 1px #2f80d9;     /* 三角矢印の上の色 */
	border-right: solid 1px #2f80d9;     /* 三角矢印の下の色 */
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 45%;
	left: 25px;
}
.widget.widget_categories ul li .children li a:hover,
.widget.widget_nav_menu ul.menu li.menu-item .sub-menu li a:hover {
	padding-left: 45px;
	background: #e4f2ff;     /* マウスオーバー時の背景色 */
	color: #285d85;     /* マウスオーバー時の文字色 */
}

色などを変えたいときは、コメントを残している箇所をさわってもらえれば大丈夫です^^

CSSをコピペする場所

「外観」→「カスタマイズ」→「追加CSS」をクリックして、
入力できる場所がでてくるので上記のコードをコピペしてください^^

まとめ

これでちゃんと表示されたと思います^^

Beforeでは高さが余分にあった分、
今回のカスタマイズで高さを抑えれてシンプルにできたので僕てきには大満足です！