ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる
  • ブログ型サイト
  • 企業ブランディング・集客ページ
  • 飲食店や医院用サイト
  • 各種LP制作

・・・などなど
ワードプレスを使ったサイト制作や
コーディングのみも承ります。

お気軽にお問い合わせください。

※本サイトで紹介する商品は提携先アフィリエイトリンク付き(PR)の場合がございます。

グッと見やすくなる!Lightning G3 Proでサブメニューを幅広くカラム表示する方法

Lightningではグローバルメニューにサブメニューがある場合、親メニューをマウスオーバーするとドロップダウン表示する形式となっています。

でもドロップダウンの場合、サブメニュー数が多くなると見にくいですよね。

そこで本記事ではサブメニューをカラム表示にする方法を紹介します。サブメニューが幅広く表示されるので、メニュー項目が多くてもグッと見映え良くなりますよ。

前提条件

テーマLightningの拡張プラグインLightning G3 Pro Unitを使うものとします。

実は無料版のままでも可能ですが、メニューそのもののレイアウト変更が若干面倒だったりするので有料版であるLightning G3 Pro Unitを使います。

今回の検証バージョンは以下の通り。いずれも2023年2月28日現在の最新バージョン(のはず)です。

・ワードプレス:version6.1.1
・テーマLightning:version15.5.1
・Lightning G3 Pro Unit:version0.23.4

サブメニューの表示形式を確認しておく

次のようなヘッダーを作成してあるとします。

作成したヘッダーメニュー

ヘッダーメニューのメニュー項目は、ホームページサービス紹介会社概要ブログお問い合わせの5つだけですが、サービス紹介と会社概要には、サブメニューが設定してあります。

デフォルトのサブメニュー表示(ドロップダウン)

デフォルトでは、サブメニューは親メニューにマウスオーバーするとドロップダウン表示されます。

デフォルトのサブメニュー表示
デフォルトでのサブメニューの表示
デフォルトのサブメニュー表示(ドロップダウン)

今回作成するサブメニューのカラム表示

次のように、マウスオーバーでサブメニューが横に広がったカラム表示とします。

サブメニューをカラム形式で横に広げて表示
カラム形式のサブメニュー表示

サブメニューをカラム表示させる手順

手順は次の2ステップだけです。

  1. テーマカスタマイザーで、ヘッダーメニューのレイアウト設定を中央揃えまたはナビ貫通とする
  2. カスタムCSSの記述をする(コピペでOK)

1.メニューを中央配置またはナビ貫通としておく

Lightning G3 Pro Unitを使う理由としては、メニューのレイアウトをデフォルトの回り込み(サイト全体の右側に表示される)のレイアウトでなく、中央揃えまたはナビ貫通レイアウトとしたいためです。

Lightningのヘッダーナビのレイアウトについてはこちらもご参照ください。

手順としては、ダッシュボードの外観>カスタマイズ>Lightningヘッダー設定 に入って、ヘッダーレイアウトを中央揃えまたはナビ貫通に設定します。

ヘッダーレイアウトを設定する

今回の例では、”ヘッダーコンタクトあり&ナビ貫通”を選択しました。

ヘッダーメニューのレイアウト変更

2.カスタムCSSを記述する

次のカスタムCSSを記述します。

記述場所は、テーマカスタマイザーの追加CSS欄でもよいですし、子テーマのstyle.cssに記述してもよいでしょう。

#menu-header-nav > li {
  position: static;
}
#menu-header-nav > li > a {
  transition: all 0.5s;
}
#menu-header-nav > li > a:hover {
  background-color: var(--wp--preset--color--vk-color-primary);
  color: #fff;
}
#menu-header-nav > li:hover > ul {
  left: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 16px;
  -moz-column-gap: calc(10% / 2);
  column-gap: calc(10% / 2);
  margin-left: 0;
  width: calc(
    var(--vk-width-container) - var(--vk-width-container-padding) * 2
  );
  padding: 1.5em 10%;
  transition: all 0.2s ease-out;
}
#menu-header-nav > li:hover > ul > li {
  width: 30%;
  height: 40px;
  background-color: #eee;
  font-size: 14px;
}
#menu-header-nav > li:hover > ul > li > a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  color: #333;
  font-weight: bold;
}
#menu-header-nav > li:hover > ul > li > a:hover {
  background-color: transparent;
  color: var(--wp--preset--color--vk-color-primary);
}
#menu-header-nav > li > ul {
  transition: all 0s;
}

4~10行目は実は今回のカラム表示とは関係はなくて、単に親メニューをマウスオーバーするときに背景色を設定しただけですが、サブメニュー領域の背景色と同じ色としました。

サブメニュー表示のスピードを調整したければ、24行目の0.2sを変更してみてください。0.5sだともう少しゆっくり開き、0sだと瞬時に開きます。

まとめ

今回は、比較的簡単な手順でサブメニュー表示をぐっと変更する方法を紹介しました。企業サイトなどでサブメニューが増えた場合、全体を幅広いカラム表示にすると見映えもぐっと良くなると思います。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる