JINカスタマイズ

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

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

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

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

BeforeAfter

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

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

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

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

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

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

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

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

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

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

基本設定

グローバルメニューのメニュー構造の作成方法は、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;
}

編集後記

是非使ってみて下さい。

https://yuki-hirose.com/wordpress-jin-hamburger-menu-icon/

【WordPress】【JIN】スマホ固定フッターメニューの下部の余白を消す方法【WordPress】有料テーマ【JIN】を使っている方向けに、スマホ固定フッターメニューの下部の余白を消す方法についてご紹介します。...
【WordPress】【JIN】ハンバーガーメニューの「MENU」の文字色と背景色のCSSカスタマイズ【WordPress】有料テーマ【JIN】スマホのハンバーガーメニューの色のCSSカスタマイズについて書きました。...

☆クリックで応援お願いします☆

PVアクセスランキング にほんブログ村

ブログランキング・にほんブログ村へ にほんブログ村 スイーツブログ コンビニスイーツへ にほんブログ村 ブログブログ ブログ初心者へ