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

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







カスタマイズする前の「ウイジェット カテゴリー」のスタイルを確認します。
PCで表示した場合、サイドカラムエリアでの「ウイジェット カテゴリー」のスタイルは次の様になっています。
特に問題無いスタイルです。
今回、MENUエリアに「ウイジェット カテゴリー」を設置してみました。
PCで表示した場合、MENUエリアでの「ウイジェット カテゴリー」のスタイルは次の様になっています。
また、スマートフォンで表示した場合、MENUエリアでの「ウイジェット カテゴリー」のスタイルは次の様になっています。
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を使うためには、事前に登録、設定を行う必要があります。


カスタマイズ後のウイジェット カテゴリー
今回のカスタマイズによって、PCで表示した場合、サイドカラムエリアでの「ウイジェット カテゴリー」のスタイルは次の様になりました。
今回のカスタマイズによって、PCで表示した場合、MENUエリアでの「ウイジェット カテゴリー」のスタイルは次の様になりました。
今回のカスタマイズによって、スマートフォンで表示した場合、MENUエリアでの「ウイジェット カテゴリー」のスタイルは次の様になりました。
今回の「ウイジェット カテゴリー」のカスタマイズでは左右のマージンの調整を行い、これまでタイトルよりもはみ出して表示させていたのをタイトルと同じ幅で表示するようにしました。
また、スマートフォンで表示した場合、MENUエリアでの「ウイジェット カテゴリー」の記事数の値を左端から右端に表示するように変更しました。
最後に
今回MENUエリアに「ウイジェット カテゴリー」を表示したことによって、問題が発生してしまいました。
MENUエリアに「ウイジェット カテゴリー」を表示しない場合は、特にこのカスタマイズは必要無いでしょう。
コメント