WordPressテーマ THE THOR(ザ・トール)
別ブログのZMASAa.blogは、WordPressテーマ THE THOR(ザ・トール)を使って構築しています。
![](https://wp.masaa.net/wp-content/uploads/2019/06/ogp_zmasaablog2.jpg)
今回は、WordPressテーマ THE THOR(ザ・トール)での「ウイジェット カテゴリー」の5回目となるカスタマイズについてまとめてみました。
WordPressテーマ THE THOR(ザ・トール) ウイジェット カテゴリー
これまでWordPressテーマ THE THOR(ザ・トール)の「ウイジェット カテゴリー」についてのカスタマイズを何度か掲載してきました。
![](https://masaa.net/wp-content/uploads/2019/02/eyecatch_thethor_1-320x180.png)
![](https://masaa.net/wp-content/uploads/2019/02/eyecatch_thethor_1-320x180.png)
![](https://masaa.net/wp-content/uploads/2019/02/eyecatch_thethor_1-320x180.png)
![](https://masaa.net/wp-content/uploads/2019/02/eyecatch_thethor_1-320x180.png)
![](https://masaa.net/wp-content/uploads/2019/02/eyecatch_thethor_1-320x180.png)
![](https://masaa.net/wp-content/uploads/2019/02/eyecatch_thethor_1-320x180.png)
現在の「ウイジェット カテゴリー」のホバー時は次のようになっています。
親カテゴリーホバー時
子カテゴリーホバー時
そこで更に「ウイジェット カテゴリー」のホバー時を認識しやすくなるようにするカスタマイズを行ってみました。
ウイジェット カテゴリーのカスタマイズ
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を使うためには、事前に登録、設定を行う必要があります。
![](https://masaa.net/wp-content/uploads/2019/04/eyecatch_fontawesome--320x180.png)
![](https://masaa.net/wp-content/uploads/2019/04/eyecatch_fontawesome--320x180.png)
カスタマイズ後のウイジェット カテゴリー
今回のカスタマイズによって、「ウイジェット カテゴリー」のホバー時は次のようになりました。
親カテゴリーホバー時
親カテゴリーのホバー時には、親カテゴリーの背景色と同時に記事数の背景色も変化させるようにしました。
子カテゴリーホバー時
子カテゴリーのホバー時には、文字色を黒色で変わらないようにして背景色のみを変化させるようにしました。
最後に
今回のカスタマイズで「ウイジェット カテゴリー」のホバー時が認識しやすくなりました。
これで当面は「ウイジェット カテゴリー」を触らないと思います!
コメント