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

カテゴリーウィジェットをSWELL風にしてみたよ!
当ブログが愛用しているWordPressテーマ、
THE THOR」のカスタマイズをご紹介していきます!

  • コピペOKですっ!!
ゆうくん
当ブログですが、実はザ・トールを使ってます!
今回、カスタマイズした箇所は「カテゴリー」ウィジェット
デザインがもっさりとしていたので、
SWELL風にシンプルなデザインに変更してました^^
SWELLのカテゴリーのサンプルです
Beforeでは、大振りなデザインだったので
背景を消したり、アイコンを変えたりと・・・だいぶ触ったのでご紹介していきます!
スポンサーサイト

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

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

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

コード

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では高さが余分にあった分、
今回のカスタマイズで高さを抑えれてシンプルにできたので僕てきには大満足です!

ゆうくん
だいぶ見やすくなりました!!
僕がTHE THORのテーマをカスタマイズしていくシリーズの需要があれば、
今後も続けていきたいと思います!
近々にでもTHE THORのテーマを紹介する記事を書きますので
楽しみにしていただければ嬉しいです^^
最後までお読みいただきありがとうございましたっ!!
このブログを読んで「いいね」「面白かった」と思っていただけたら
下記バナーをポチッと宜しくお願いします!!今後の励みになりますっ^^