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

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

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

【広告】

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

WordPressテーマ THE THOR

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

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

以前、WordPressテーマ THE THOR(ザ・トール)の「ウイジェット カテゴリー」に関するカスタマイズについてまとめてみました。

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

今回は更に「ウイジェット カテゴリー」が見やすくなるように追加でカスタマイズを行ってみました。

WordPressテーマ THE THOR ウイジェット カテゴリー

現在の「ウイジェット カテゴリー」の表示は下記のようになっています。

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

既に「ウイジェット カテゴリー」のカスタマイズを一度行っており、WordPressテーマ THE THOR(ザ・トール)のデフォルトである「ウイジェット カテゴリー」に比べると見やすい「ウイジェット カテゴリー」になっています。

その「ウイジェット カテゴリー」ですが、これまで表示していて一つ気になる点が出てきました。

その気になる点と言うのは、ウイジェットの各種タイトル項目(人気記事、カテゴリー、タグ、月刊アーカイブなど)と、カテゴリー内の親カテゴリー項目の背景色が同じであること。

そのため一見同レベル的な表示に見えてしまうことです。

そこで、カテゴリー内の親カテゴリー項目の背景色に関するカスタマイズを行ってみました。

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

「ウイジェット カテゴリー」についてカスタマイズ2を行います。

カスタマイズ内容

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

このカスタマイズ内容をthe-thor-childフォルダ内の「スタイルシート(style-user.css)」に追記します。

/************************************
** ■ウイジェット カテゴリー(ナビゲーションメニュー)カスタマイズ
************************************/
.widget.widget_categories ul {
	margin: 0 -10px 0 -10px; /*外側余白設定*/
}
.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; /*枠線非表示*/
}
.widget.widget_categories ul li a { /*カテゴリー枠サイズ調整*/
	padding: 5px 8px 5px 8px; /*内側余白設定*/
}
.widget.widget_categories ul li a, 
.widget.widget_nav_menu ul.menu li a {
	background-color: #ff8fb8 !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: #fff !important; /*ホバー時、背景色(子カテゴリー)*/
}
.widget.widget_categories ul .children a:hover,
.widget.widget_nav_menu ul.menu .sub-menu a:hover {
	color: #f32469 !important;
}
.widgetCount { /*カウント数設定*/
	float:right; /*右寄せ*/
	font-weight:800 !important; /*フォント太さ*/
	background: #ffddee; /*背景色*/
	color: #fe219a; /*文字色*/
	border-radius: 2px; /*角丸コーナー*/
	font-size: 12px; /*フォントサイズ*/
	font-style: oblique; /*斜体フォント*/
	padding: 0 8px 0 6px; /*内側余白設定*/
	margin:0 0 0 4px; /*外側余白設定*/
}
@media only screen and (max-width: 768px) { /*iPad縦表示対応*/
	.widgetCount {
		float:none; /*左寄せ*/
	}
}

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

今回のカスタマイズによって、WordPressテーマ THE THOR(ザ・トール)の「ウイジェット カテゴリー」の表示は、下記の様になりました。

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

今回のカスタマイズ内容は、カテゴリー内の親カテゴリー項目の背景色を変更しています。

ウイジェットの各種タイトル項目(人気記事、カテゴリー、タグ、月刊アーカイブなど)の背景色と比較して、薄いカラーを採用しました。

ナビゲーションメニューについて

今回のカスタマイズによって同時に「ナビゲーションメニュー」の表示も変更されています。

カスタマイズ前の「ナビゲーションメニュー」の表示は下記のようになっていました。

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

カスタマイズ後の「ナビゲーションメニュー」の表示は下記のようになりました。

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

最後に

今回、カテゴリー内の親カテゴリー項目の背景色をこれまでよりも薄いカラーに変更したことで、サイドカラムエリアを上からスクロールさせても見やすくなりました。

また、同じく「ナビゲーションメニュー」についても見やすくなりました。

ブログ内で表示させる項目を段階的に合わせた背景色(濃いカラー → 薄いカラー)を設定することで、かなり見やすくなるでしょう。

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

シェアする
※ 記事内には【広告】が含まれています

コメント

【広告】