【WordPress】【JIN】グローバルメニューの設定方法とプルダウンタブのCSSカスタマイズ

yukiblogxxx 2019-08-20-火 / 2019-10-03-木

こんにちは😀広瀬ユキです。

今回は、グローバルメニューのプルダウンタブのCSSカスタマイズをご紹介します。

グローバルメニューのプルダウンタブとは、グローバルメニューにマウスホバーした（マウスを置いた）ときに、出現するタブのことです。

Before	After

WordPress有料テーマ【JIN】を使っている方向けの記事です。

グローバルメニューって何？
グローバルメニューのデザインの設定方法
グローバルメニューのメニュー構造の設定方法
- 基本設定
- グローバルメニューに階層をつける
プルダウンタブのCSSカスタマイズ
編集後記

グローバルメニューって何？

グローバルメニューとは、トップページで上部に表示されるメニューのことです。

また、WordPress有料テーマ【JIN】では、スマホの画面上でハンバーガーメニューのアイコンを開いたときも、グローバルメニューの一覧が表示されます。

グローバルメニューのデザインの設定方法

まず、グローバルメニューのデザインの設定方法をご紹介します。デザインパターンは2種類あります。

WordPressの編集画面から、「外観」→「カスタマイズ」を開きます
画面左の「サイトデザイン設定」を開きます
「グローバルメニューのデザイン選択」の「パターン１」または「パターン２」にチェックを入れます
画面上部の「公開」を押します

グローバルメニューのデザインの設定ができました‼

グローバルメニューの文字の大きさの設定は、「グローバルメニューのデザイン選択」の下の欄にあります。

JIN MANUAL

グローバルメニューのメニュー構造の設定方法

基本設定

グローバルメニューのメニュー構造の作成方法は、JIN MANUALのコチラの記事を参考にしてください↓

JIN MANUAL

グローバルメニューに階層をつける

グローバルメニューに階層をつけることができます。

子カテゴリ―にしたい項目を開き、「移動　下の階層」を押すと、子カテゴリ―（副項目）に設定できます。

設定が済んだら、画面右の「メニューを保存」を押しましょう！

プルダウンタブのCSSカスタマイズ

デフォルト（初期設定）のままでも何の問題もありませんが、サイトのデザインに合わせてカスタマイズしたい方向けに、グローバルメニューのプルダウンタブのCSSカスタマイズをご紹介します。

デフォルトの状態

では、実際にCSSにコードを追加して、グローバルメニューのプルダウンタブの文字色と背景色を変えてみましょう！

CSSにコードを追加する方法がよく分からない方は、下記の記事を参考にしてください。

CSSにコードを追加する方法はコチラ↓

【WordPress】【JIN】ブログのデザインをカスタマイズする方法：2種類【追加CSS】【WordPress】有料テーマ【JIN】を使っている方向けにブログのデザインをカスタマイズする方法：2種類について書きました。【追加CSS】...

コード

グローバルメニューのデザインに応じて、[パターン1]に合うカスタマイズと、[パターン2]に合うカスタマイズがありますので、適宜使用して下さい。

グローバルメニューのデザイン[パターン1]

/*---グローバルメニューのタブリスト---*/
#drawernav ul.menu-box li.menu-item ul.sub-menu {
border: solid 1px #aaa;/*外枠の種類と太さと色*/
}
#drawernav ul.menu-box li.menu-item ul.sub-menu li.menu-item a{
background: #aaa;/*背景色*/
color: #aaa;/*文字色*/
border-radius: 0px;/*内枠の丸み*/
}
#drawernav ul.menu-box li.menu-item ul.sub-menu li.menu-item-has-children::after {
color: #aaa;/*＞の色*/
}
/***マウスホバーしたときの設定***/
#drawernav ul.menu-box li.menu-item ul.sub-menu li.menu-item a:hover {
background: #aaa;/*背景色*/
color: #aaa !important;/*文字色*/
}
#drawernav ul.menu-box li.menu-item ul.sub-menu li.menu-item-has-children:hover::after {
color: #aaa;/*＞の色*/
}
/*---グローバルメニュータブリスト---*/

グローバルメニューのデザイン[パターン2]

/*---グローバルメニューのタブリスト---*/
#drawernav2 ul.menu-box li.menu-item ul.sub-menu {
border: solid 1px #aaa;/*外枠の種類と太さと色*/
}
#drawernav2 ul.menu-box li.menu-item ul.sub-menu li.menu-item a{
background: #aaa;/*背景色*/
color: #aaa;/*文字色*/
border-radius: 0px;/*内枠の丸み*/
}
#drawernav2 ul.menu-box li.menu-item ul.sub-menu li.menu-item-has-children::after {
color: #aaa;/*＞の色*/
}
/***マウスホバーしたときの設定***/
#drawernav2 ul.menu-box li.menu-item ul.sub-menu li.menu-item a:hover {
background: #aaa;/*背景色*/
color: #aaa !important;/*文字色*/
}
#drawernav2 ul.menu-box li.menu-item ul.sub-menu li.menu-item-has-children:hover::after {
color: #aaa;/*＞の色*/
}
/*---グローバルメニュータブリスト---*/

/*　*/　で囲ってある部分はメモ書きなので、削除してもOKです。
【メモ書きなしver.】

[パターン1]

#drawernav ul.menu-box li.menu-item ul.sub-menu {
border: solid 1px #aaa;
}
#drawernav ul.menu-box li.menu-item ul.sub-menu li.menu-item a{
background: #aaa;
color: #aaa;
border-radius: 0px;
}
#drawernav ul.menu-box li.menu-item ul.sub-menu li.menu-item-has-children::after {
color: #aaa;
}
#drawernav ul.menu-box li.menu-item ul.sub-menu li.menu-item a:hover {
background: #aaa;
color: #aaa !important;
}
#drawernav ul.menu-box li.menu-item ul.sub-menu li.menu-item-has-children:hover::after {
color: #aaa;
}

[パターン2]

#drawernav2 ul.menu-box li.menu-item ul.sub-menu {
border: solid 1px #aaa;
}
#drawernav2 ul.menu-box li.menu-item ul.sub-menu li.menu-item a{
background: #aaa;
color: #aaa;
border-radius: 0px;
}
#drawernav2 ul.menu-box li.menu-item ul.sub-menu li.menu-item-has-children::after {
color: #aaa;
}
#drawernav2 ul.menu-box li.menu-item ul.sub-menu li.menu-item a:hover {
background: #aaa;
color: #aaa !important;
}
#drawernav2 ul.menu-box li.menu-item ul.sub-menu li.menu-item-has-children:hover::after {
color: #aaa;
}

説明

border: solid 1px #aaa	外枠 solid→種類, 1px→太さ, #aaa→色
background	背景色
color	文字色
border-radius: 0px	タブの丸み 0pxにすることで、丸みをなくし、四角い形にします。

#aaaには、お好みのカラーコードを入れてください。
border-radiusは、薄い色だと設定しなくても目立ちませんが、濃い色を使う場合は、内枠を0pxに設定しておいた方が、不自然さがなくなります。
プルダウンしたときの色と、マウスホバーした（マウスを置いた）ときの色を両方設定して、メリハリをつけましょう！
「>の色」は、親カテゴリーの子カテゴリ―の子カテゴリ―（3階層目）を設定してある時にだけ表示される小さい矢印です。（上記の画像には載っていません。）
不要なコード（行）は削除して下さい。

グローバルメニューのプルダウンタブのCSSカスタマイズができました‼

参考にしました

にゃんかずどっとこむ

当ブログのグローバルメニューのプルダウンタブのCSSカスタマイズ

当ブログでは、以下のCSSカスタマイズをしています。

#drawernav ul.menu-box li.menu-item ul.sub-menu li.menu-item a{
background: #cc00aa;
color: #fff;
border-radius: 0px;
}
#drawernav ul.menu-box li.menu-item ul.sub-menu {
border: solid 1px #fff;
}
#drawernav ul.menu-box li.menu-item ul.sub-menu li.menu-item-has-children::after {
color: #fff;
}
#drawernav ul.menu-box li.menu-item ul.sub-menu li.menu-item a:hover {
background: #cc8800;
color: #fff !important;
}