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

アイキャッチ画像 THE THOR(ザ・トール)
スポンサーリンク

WordPressテーマ THE THOR(ザ・トール)

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

ZMASAa.blog│masaaの物欲心や愛車トヨタノア80系など日常の事について語るWordPressブログサイト③
masaaの物欲心や愛車トヨタノア80系など日常の事について語るWordPressブログサイト③

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 以降で使うため、アカウント登録の手順についてまとめてみました。

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

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

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

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

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

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

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

今回の「ウイジェット カテゴリー」のカスタマイズでは左右のマージンの調整を行い、これまでタイトルよりもはみ出して表示させていたのをタイトルと同じ幅で表示するようにしました。

また、スマートフォンで表示した場合、MENUエリアでの「ウイジェット カテゴリー」の記事数の値を左端から右端に表示するように変更しました。

最後に

今回MENUエリアに「ウイジェット カテゴリー」を表示したことによって、問題が発生してしまいました。

MENUエリアに「ウイジェット カテゴリー」を表示しない場合は、特にこのカスタマイズは必要無いでしょう。

コメント


スポンサーリンク
BTOパソコン・パソコン関連商品がお買い得!パソコン工房のセールBTOパソコン・パソコン関連商品がお買い得!パソコン工房のセール