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

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

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

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

詳細はこちら

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

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

テーマLightningでヘッダーナビをモバイルで表示する方法

テーマLightningのヘッダーナビゲーションは、モバイル時(デバイス幅991.98px以下)にはハンバーガーボタンのみの表示となります。これをパソコン時と同じくメニューを表示する方法を紹介します。

この記事でわかること

モバイル(デバイス幅991.98px以下)でヘッダーナビゲーションメニューを表示する方法。CSS変数を使用して以下の調整が簡単にできます。

  • ナビゲーションの表示列数を変える
    (例として2、3、4列でナビゲーションを表示する)
  • メニューの各アイテム間のGAP(余白)の調整

また最後に、パソコン~モバイルまで幅広くナビゲーションを表示するおすすめCSSも紹介します。

デフォルトの表示

サイトタイトルはロゴ画像に置き替えてあります。

デフォルトのパソコン表示

デフォルトのヘッダー表示

モバイルでの表示

デフォルトのヘッダー表示(スマホ)

モバイル表示ではハンバーガーボタンのみの表示となります。

ここからカスタムCSSを使って、パソコンと同じナビゲーションメニューを表示させていきます。カスタムCSSは子テーマのstyle.cssまたはテーマカスタマイザーの追加CSS欄に追記してください(以下の記事が参考になります)。

モバイル時にヘッダーメニューを表示

次のカスタムCSSを適用してみましょう。

/* モバイルでナビゲーションメニューを表示する */
:root {
  --mobile-nav-column-num: 3; /* ナビゲーションの列数*/
  --mobile-nav-list-column-gap: 2px; /* 各メニュー間の横方向Gap*/
  --mobile-nav-list-row-gap: 0.8em; /* 各メニュー間の縦方向Gap */
}
@media (max-width: 991.98px) {
  .global-nav {
    display: block;
    margin-bottom: 0.8em;
  }
  .global-nav-list {
    justify-content: start;
    flex-wrap: wrap;
    column-gap: var(--mobile-nav-list-column-gap);
    row-gap: var(--mobile-nav-list-row-gap);
  }

  .global-nav-list > li {
    padding: 0 !important;
    flex-basis: calc(
      (100% - var(--mobile-nav-list-column-gap) * (var(--mobile-nav-column-num) - 1)) / var(--mobile-nav-column-num)
    );
  }
}

このCSSを適用するとナビゲーションは3列で表示されるようになります。このページのメニュー項目数は5なので3列×2行の表示となります。

CSSカラム数3列とした場合のモバイル表示

3~5行目のCSS変数により、ナビゲーションの列数や各メニュー間のGAPを調整することができます

CSS変数の説明

各変数は以下の通りです。

  • –mobile-nav-colimn-num・・・ナビゲーションの列数を指定
  • –mobile-nav-list-row-gap・・・各メニューの縦方向のGAP(余白)の指定
  • –mobile-nav-list-column-gap・・・各メニューの横方向のGAP(余白)の指定
CSS変数の設定

各メニュー間のGAPは、見映えを確認しながら適度に調整してください。メニューの項目数やメニューの文字数などによっても適正値は異なります。

例えば列数を3列設定としていても、メニュー内の文字数が多すぎたり横方向のGAPが大き過ぎると、全体の横幅内に入りきらずに段落ちして2列表示となることがあります

以下は、横方向GAPを徐々に大きくしていった場合です。2px⇒30pxと横方向GAPを大きくしていくと各メニュー項目の横幅が自動的に小さく調整されます。

しかし各メニューの横幅は文字数分より小さくならないため、横方向GAPを60pxと大きく設定してしまうと段落ちして2列表示となってしまいます

横方向GAPを変化させた場合

ナビゲーションの列数を変化させてみる

以上を念頭において、ナビゲーションの列数を変化させてみましょう。

ナビゲーションの列数=2列の場合

  • –mobile-nav-colimn-num・・・2
  • –mobile-nav-list-column-gap・・・40px
CSSカラム数2列とした場合のモバイル表示

メニューアイテム数が5つなので、2列×3行の配置となります。

ナビゲーションの列数=4列の場合

  • –mobile-nav-colimn-num・・・4
  • –mobile-nav-list-column-gap・・・1px
CSSカラム数4列とした場合のモバイル表示

このサイトではメニューアイテム数が5つしかないので4列化することはないと思います。あくまで例として考えてください。

個人的にはタブレットのことを考慮すると3列が汎用性があるかな、て感じです。

iPadでのナビゲーション3列表示

まとめ

最後に別記事で紹介したヘッダーレイアウトの調整CSSと今回のCSSを合わせた、私のおすすめCSSを紹介しておきます。このCSSだとパソコンからモバイルまで比較的メニューアイテム数が多くても表示しやすいかと思います。

おすすめ設定(パソコンからモバイルまで幅広くメニューを表示)
/* サイトロゴとヘッダーナビを縦に積む */
div#site-header-container {
  display: block;
  text-align: center;
}
/* ヘッダーナビをコンテンツ幅いっぱいに広げる */
body:not(.header_scrolled) .global-nav--layout--float-right {
  display: block;
  width: 100%;
}
.global-nav-list {
  justify-content: space-between;
}
/* サイトロゴを中央配置とする */
.site-header--layout--nav-float .site-header-logo {
  display: inline-block;
  width: auto;
}
/* スクロール時にロゴ画像を非表示とする */
.header_scrolled .site-header-logo {
    display: none;
}

/* モバイルでナビゲーションメニューを表示する */
:root {
  --mobile-nav-column-num: 3; /* ナビゲーションの列数*/
  --mobile-nav-list-column-gap: 2px; /* 各メニュー間の横方向Gap*/
  --mobile-nav-list-row-gap: 0.8em; /* 各メニュー間の縦方向Gap */
}
@media (max-width: 991.98px) {
  .global-nav {
    display: block;
    margin-bottom: 0.8em;
  }
  .global-nav-list {
    justify-content: start;
    flex-wrap: wrap;
    column-gap: var(--mobile-nav-list-column-gap);
    row-gap: var(--mobile-nav-list-row-gap);
  }

  .global-nav-list > li {
    padding: 0 !important;
    flex-basis: calc(
      (100% - var(--mobile-nav-list-column-gap) * (var(--mobile-nav-column-num) - 1)) / var(--mobile-nav-column-num)
    );
  }
}

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

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

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