こんにちは😀広瀬ユキです。
今回は、グローバルメニューのプルダウンタブのCSSカスタマイズをご紹介します。
グローバルメニューのプルダウンタブとは、グローバルメニューにマウスホバーした(マウスを置いた)ときに、出現するタブのことです。
Before | After |
![]() | ![]() |
WordPress有料テーマ【JIN】を使っている方向けの記事です。
もくじ
グローバルメニューって何?
グローバルメニューとは、トップページで上部に表示されるメニューのことです。
また、WordPress有料テーマ【JIN】では、スマホの画面上でハンバーガーメニューのアイコンを開いたときも、グローバルメニューの一覧が表示されます。

グローバルメニューのデザインの設定方法
まず、グローバルメニューのデザインの設定方法をご紹介します。デザインパターンは2種類あります。
- WordPressの編集画面から、「外観」→「カスタマイズ」を開きます
- 画面左の「サイトデザイン設定」を開きます
- 「グローバルメニューのデザイン選択」の「パターン1」または「パターン2」にチェックを入れます
- 画面上部の「公開」を押します
グローバルメニューのデザインの設定ができました‼
グローバルメニューの文字の大きさの設定は、「グローバルメニューのデザイン選択」の下の欄にあります。
グローバルメニューのメニュー構造の設定方法
基本設定
グローバルメニューのメニュー構造の作成方法は、JIN MANUALのコチラの記事を参考にしてください↓
グローバルメニューに階層をつける
グローバルメニューに階層をつけることができます。
子カテゴリ―にしたい項目を開き、「移動 下の階層」を押すと、子カテゴリ―(副項目)に設定できます。
設定が済んだら、画面右の「メニューを保存」を押しましょう!


プルダウンタブのCSSカスタマイズ
デフォルト(初期設定)のままでも何の問題もありませんが、サイトのデザインに合わせてカスタマイズしたい方向けに、グローバルメニューのプルダウンタブのCSSカスタマイズをご紹介します。
では、実際にCSSにコードを追加して、グローバルメニューのプルダウンタブの文字色と背景色を変えてみましょう!
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;
}
編集後記
是非使ってみて下さい。
https://yuki-hirose.com/wordpress-jin-hamburger-menu-icon/



