THE THORWordPress

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

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

WordPressテーマ THE THOR

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

The main blog of masaa powered by WordPress.
スマホ、ガジェット、食玩などの記事を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

最後に

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

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

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

コメント