【THE THOR】ウイジェットカテゴリーのカスタマイズ６

INDEX

WordPressテーマ THE THOR（ザ・トール）
1. WordPressテーマ THE THOR（ザ・トール）ウイジェットカテゴリー
ウイジェットカテゴリーのカスタマイズ
1. カスタマイズ内容
2. カスタマイズ後のウイジェットカテゴリー
最後に

WordPressテーマ THE THOR（ザ・トール）

別ブログのZMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。

ZMASAa.blog│ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト

今回は、WordPressテーマ THE THOR（ザ・トール）での「ウイジェットカテゴリー」の6回目となるカスタマイズについてまとめてみました。

WordPressテーマ THE THOR（ザ・トール）ウイジェットカテゴリー

これまでWordPressテーマ THE THOR（ザ・トール）での「ウイジェットカテゴリー」について、何度かカスタマイズを掲載してきました。

【THE THOR】ウイジェットカテゴリーのカスタマイズ５

WordPressテーマ THE THOR（ザ・トール）の「ウイジェットカテゴリー」についてカスタマイズをこれまで何度か行いました。今回は「ウイジェットカテゴリー」のホバー時を認識しやすくなるようにするカスタマイズを行ってみました。

【THE THOR】ウイジェットカテゴリーのカスタマイズ４

WordPressテーマ THE THOR（ザ・トール）の「ウイジェットカテゴリー」のカスタマイズ４についてまとめてみました。今回は、子カテゴリーにホバーした時に分かりやすくするため、タイトルの文字色と合わせてカウンターを変化させてみました。

【THE THOR】ウイジェットカテゴリーで使われているアイコンを変更する

WordPressテーマ THE THORのウイジェットカテゴリーで使われているアイコンは、親カテゴリー、子カテゴリー共に丸いアイコンが使われています。そこで、Webアイコンフォント Font Awesome 5のアイコンに変更してみました。

【THE THOR】ウイジェットカテゴリー／ナビゲーションメニューのカスタマイズ３

WordPressテーマ THE THOR（ザ・トール）の「ウイジェットカテゴリー」のカスタマイズ３についてまとめてみました。今回の「ウイジェットカテゴリー」のカスタマイズは、カテゴリー内の子カテゴリー項目に仕切り線を表示しました。

【THE THOR】ウイジェットカテゴリー／ナビゲーションメニューのカスタマイズ２

WordPressテーマ THE THOR（ザ・トール）の「ウイジェットカテゴリー」のカスタマイズ２についてまとめてみました。今回の「ウイジェットカテゴリー」のカスタマイズは、カテゴリー内の親カテゴリー項目の背景色変更を行いました。

【THE THOR】ウイジェットカテゴリーのカスタマイズ

WordPressテーマ THE THOR（ザ・トール）の「ウイジェットカテゴリー」のカスタマイズについてまとめてみました。今回の「ウイジェットカテゴリー」のカスタマイズは、縦幅を短く調整したり、子テーマの位置調整などを行いました。

【THE THOR】ウイジェットカテゴリーのリンク文字のカスタマイズ

WordPressテーマ THE THOR（ザ・トール）の「ウイジェットカテゴリーリンク文字」のカスタマイズについてまとめてみました。ウイジェットカテゴリーリンク文字のフォント太さの変更を行いました。

カスタマイズする前の「ウイジェットカテゴリー」のスタイルを確認します。

PCで表示した場合、サイドカラムエリアでの「ウイジェットカテゴリー」のスタイルは次の様になっています。

特に問題無いスタイルです。

今回、MENUエリアに「ウイジェットカテゴリー」を設置してみました。

PCで表示した場合、MENUエリアでの「ウイジェットカテゴリー」のスタイルは次の様になっています。

また、スマートフォンで表示した場合、MENUエリアでの「ウイジェットカテゴリー」のスタイルは次の様になっています。

MENUエリアに「ウイジェットカテゴリー」を表示すると左右のマージンが狭いため幅に窮屈さを感じてしまいます。

と言う事で、幅に窮屈さを感じさせないように「ウイジェットカテゴリー」のカスタマイズを行いたいと思います。

ウイジェットカテゴリーのカスタマイズ

WordPressテーマ THE THOR（ザ・トール）での「ウイジェットカテゴリー」のカスタマイズを行います。

カスタマイズ内容

「ウイジェットカテゴリー」のカスタマイズ内容は、下記の通りです。

以前「ウイジェットカテゴリー」のカスタマイズを行っている場合は、「スタイルシート(style-user.css)」を開き、今回のカスタマイズ内容を既存の「■ウイジェットカテゴリー(ナビゲーションメニュー)カスタマイズ」に上書きします。

初めて「ウイジェットカテゴリー」のカスタマイズを行う場合は、「スタイルシート(style-user.css)」を開き、今回のカスタマイズ内容を追記します。

/************************************
** ■ウイジェット カテゴリー(ナビゲーションメニュー)カスタマイズ
************************************/
.widget.widget_categories ul {
	margin: 0 0px 4px 0px; /*外側余白設定*/
	border:none; /*カテゴリー全体枠線削除*/
}
.widget.widget_categories ul .children a,
.widget.widget_nav_menu ul.menu .sub-menu a {
	margin: 0 0px 0 18px; /*外側余白設定*/
	background-color: #fff !important; /*背景色（子カテゴリー）*/
}
.widget.widget_categories ul li, 
.widget.widget_nav_menu ul.menu li,
.widget.widget_categories ul .children li,
.widget.widget_nav_menu ul.menu .sub-menu li {
	border: none; /*枠線非表示*/
	color: #333 !important; /*文字色*/
}
.widget.widget_categories ul li a { /*カテゴリー枠サイズ調整*/
	padding: 3px 7px 1px 7px; /*内側余白設定*/
}
.widget.widget_categories ul li a, 
.widget.widget_nav_menu ul.menu li a {
	background-color: #ff8fb8 !important; /*背景色（親カテゴリー）*/
	border-bottom:1px dotted #ff8fb8; /*アンダーライン(子カテゴリー)*/
}
.widget.widget_nav_menu ul.menu .sub-menu a {
	color: #333!important;	/*ナビメニュー 子カテゴリー文字色*/
}
.widget.widget_categories ul li a:hover, 
.widget.widget_nav_menu ul.menu li a:hover {
	background-color: #fe619a !important; /*ホバー時、背景色（親カテゴリー）*/
	transition: all 0.6s ease; /*エフェクト処理*/
}
.widget.widget_categories ul .children a:hover,
.widget.widget_nav_menu ul.menu .sub-menu a:hover {
	background-color: #ffddee !important; /*ホバー時、背景色（子カテゴリー）*/
	color: #333 !important; /*文字色f32469*/
}
.widgetCount { /*カウンター設定*/
	float:right; /*右寄せ*/
	font-weight:800 !important; /*フォント太さ*/
	background: #ffddee; /*背景色*/
	color: #f32469; /*文字色fe219a*/
	border-radius: 2px; /*角丸コーナー*/
	font-size: 12px; /*フォントサイズ*/
	font-style: oblique; /*斜体フォント*/
	padding: 0 8px 0 6px; /*内側余白設定*/
	margin:0 0 0 4px; /*外側余白設定*/
}
.widget.widget_categories ul li a:hover .widgetCount,
.widget.widget_nav_menu ul li.menu a:hover .widgetCount { /*親カテゴリーホバー時 カウンター設定*/
	background: #fe619a; /*背景色*/
	color: #fff; /*文字色*/
	transition: all 0.6s ease; /*エフェクト処理*/
}
.widget.widget_categories ul .children a:hover .widgetCount,
.widget.widget_nav_menu ul.menu .sub-menu a:hover .widgetCount { /*子カテゴリーホバー時 カウンター設定*/
	background: #fe619a; /*背景色*/
	color: #fff; /*文字色*/
	transition: all 0.6s ease; /*エフェクト処理*/
}
@media only screen and (max-width: 768px) { /*iPad縦表示対応*/
	.l-sidebar .widgetCount {
		float:none; /*左寄せ*/
	}
}

初めて「ウイジェットカテゴリー」のカスタマイズを行う場合は、「ウイジェットカテゴリーのアイコン」のカスタマイズも追記する必要があります。

/************************************
** ■ウイジェット カテゴリーのアイコンのカスタマイズ
************************************/
.l-sidebar .widget.widget_categories ul li a:before,
.menuBtn .widget.widget_categories ul li a:before {
	font-family: "Font Awesome 5 Free";/*FontAwesome 5に設定*/
	content: "\f65d"; /*親カテゴリのアイコン*/
	color: #fff; /*アイコンカラー*/
	font-size: 15px;
	font-weight: 900;
}
.l-sidebar .widget.widget_categories ul li .children li a:before,
.menuBtn .widget.widget_categories ul li .children li a:before {
	font-family: "Font Awesome 5 Free"; /*FontAwesome 5に設定*/
	content: "\f65e"; /*子カテゴリのアイコン*/
	color: #fe619a; /*アイコンカラー*/
	font-size: 17px;
	font-weight: 900;
}

なお、今回使ったアイコンは、Font Awesome 5です。

その場合WordPressテーマ THE THOR（ザ・トール）でFont Awesome 5を使うためには、事前に登録、設定を行う必要があります。