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

INDEX

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

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

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

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

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

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

現在の「ウイジェットカテゴリー」のホバー時は次のようになっています。

親カテゴリーホバー時

子カテゴリーホバー時

そこで更に「ウイジェットカテゴリー」のホバー時を認識しやすくなるようにするカスタマイズを行ってみました。

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

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

カスタマイズ内容

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

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

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

/************************************
** ■ウイジェット カテゴリー(ナビゲーションメニュー)カスタマイズ
************************************/
.widget.widget_categories ul {
	margin: 0 -10px 4px -10px; /*外側余白設定*/
	border:none; /*カテゴリー全体枠線削除*/
}
.widget.widget_categories ul .children a,
.widget.widget_nav_menu ul.menu .sub-menu a {
	margin: 0 10px 0 27px; /*外側余白設定*/
	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縦表示対応*/
	.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を使うためには、事前に登録、設定を行う必要があります。