(確認事項)このMASAa.netには【広告】【PR記事】が掲載されています。MASAa.netご利用の方はプライバシーポリシーをご確認下さい。
WordPress関連THE THOR

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

アイキャッチ画像 THE THOR(ザ・トール)
この記事は約8分で読めます。

【広告】

※ 本ページには【広告】が含まれています

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】ウイジェット カテゴリーのカスタマイズ4
WordPressテーマ THE THOR(ザ・トール)の「ウイジェット カテゴリー」のカスタマイズ4についてまとめてみました。今回は、子カテゴリーにホバーした時に分かりやすくするため、タイトルの文字色と合わせてカウンターを変化させてみました。
【THE THOR】ウイジェット カテゴリーで使われているアイコンを変更する
WordPressテーマ THE THORのウイジェット カテゴリーで使われているアイコンは、親カテゴリー、子カテゴリー共に丸いアイコンが使われています。そこで、Webアイコンフォント Font Awesome 5のアイコンに変更してみました。
【THE THOR】ウイジェット カテゴリー/ナビゲーションメニューのカスタマイズ3
WordPressテーマ THE THOR(ザ・トール)の「ウイジェット カテゴリー」のカスタマイズ3についてまとめてみました。今回の「ウイジェット カテゴリー」のカスタマイズは、カテゴリー内の子カテゴリー項目に仕切り線を表示しました。
【THE THOR】ウイジェット カテゴリー/ナビゲーションメニューのカスタマイズ2
WordPressテーマ THE THOR(ザ・トール)の「ウイジェット カテゴリー」のカスタマイズ2についてまとめてみました。今回の「ウイジェット カテゴリー」のカスタマイズは、カテゴリー内の親カテゴリー項目の背景色変更を行いました。
【THE THOR】ウイジェット カテゴリーのカスタマイズ
WordPressテーマ THE THOR(ザ・トール)の「ウイジェット カテゴリー」のカスタマイズについてまとめてみました。今回の「ウイジェット カテゴリー」のカスタマイズは、縦幅を短く調整したり、子テーマの位置調整などを行いました。
【THE THOR】ウイジェット カテゴリーのリンク文字のカスタマイズ
WordPressテーマ THE THOR(ザ・トール)の「ウイジェット カテゴリーリンク文字」のカスタマイズについてまとめてみました。ウイジェット カテゴリーリンク文字のフォント太さの変更を行いました。

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

親カテゴリーホバー時

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

子カテゴリーホバー時

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

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

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

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を使うためには、事前に登録、設定を行う必要があります。

Webアイコンフォント Font Awesomeを使う!
WordPressテーマ THE THOR(ザ・トール)とCocoonで、Font Awesomeの利用についてまとめてみました。このWebアイコンフォントをメニューや項目の先頭に表示させてブログをより一層見やすくさせると良いでしょう!
Font Awesome 5.9.0以降を使うためにアカウント登録を行う!
Webアイコンフォント Font Awesomeのバージョン5.9.0 からアカウント登録を行う必要が発生しました。そこでFont Awesomeのバージョン5.9.0 以降で使うため、アカウント登録の手順についてまとめてみました。

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

今回のカスタマイズによって、「ウイジェット カテゴリー」のホバー時は次のようになりました。

親カテゴリーホバー時

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

親カテゴリーのホバー時には、親カテゴリーの背景色と同時に記事数の背景色も変化させるようにしました。

子カテゴリーホバー時

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

子カテゴリーのホバー時には、文字色を黒色で変わらないようにして背景色のみを変化させるようにしました。

最後に

今回のカスタマイズで「ウイジェット カテゴリー」のホバー時が認識しやすくなりました。

これで当面は「ウイジェット カテゴリー」を触らないと思います!

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

シェアする
※ 本ページ内には【広告】が含まれています

コメント

【広告】