無料テーマLightningでヘッダーレイアウトを調整する方法

2023年6月4日

無料の人気テーマLightningにおいて、ヘッダーレイアウトを調整する方法を紹介します。ヘッダーメニューとサイトロゴ画像の配置を中央揃えに調整します。

この記事では無料版Lightningでのヘッダーレイアウトの調整例を紹介しますがカスタムCSSが必須となります。

Lightningの有料プラグインLightning G3 Pro Unitを使えばテーマカスタイザーだけで簡単にレイアウトが変更できます。こちらを参照ください。

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

まずはデフォルトでのヘッダー表示を見ておきましょう。サイトタイトルはロゴ画像に置き替えた状態で進めます。

パソコンでの表示

サイトロゴ画像の右側にヘッダーナビゲーションが回り込み配置されています。スクロール時にはロゴ画像が消えて、ナビゲーションが中央寄りの配置で固定されます。

スマホでの表示

スマホと書いていますが、厳密には991.98px以下のデバイス幅での表示です。

ロゴ画像は中央配置で、ヘッダーナビゲーションはハンバーガーボタンのみとなります。スクロール時にはハンバーガーボタンが固定表示されます。

ヘッダーレイアウトの調整

それではCSSを使ってレイアウトを調整していきます。完成形は次のとおりですが、順番にレイアウトを変更していくので、途中段階のものでも使用可能です。

順番にレイアウト画像と適用CSSを表示していきます。CSSは子テーマのstyle.cssまたはカスタマイザーの追加CSS欄等にコピペして記述するとよいでしょう。

①サイトロゴとナビゲーションを縦に積み重ねて表示

ヘッダーコンテナにはもともとdisplay:flexが適用されていますが、これをdisplay:blockで解除することで縦に重ねた表示となります。

コピペ用CSS

/* サイトロゴとヘッダーナビを縦に積む */
div#site-header-container {
  display: block;
}

②ヘッダーナビゲーションをコンテンツ幅いっぱいに配置

赤字のCSSを追記することで、ナビゲーションがコンテンツ幅いっぱいに広がります。

このレイアウト段階でも好みによっては使用できるかと思います。ロゴの右余白が広くとれるので、電話番号や連絡先ボタンを表示させる場合には便利です。

コピペ用CSS

/* サイトロゴとヘッダーナビを縦に積む */
div#site-header-container {
  display: block;
}
/* ヘッダーナビをコンテンツ幅いっぱいに広げる */
body:not(.header_scrolled) .global-nav--layout--float-right {
  display: block;
  width: 100%;
}
.global-nav-list {
  justify-content: space-between;
  width: 100%;
}

③サイトロゴ画像を中央に配置

赤字のCSSを追記して

• サイトロゴ画像要素のinline-block化
• その親要素へのtext-align:center適用

によりロゴ画像が中央配置されます。

コピペ用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;
  width: 100%;
}
/* サイトロゴを中央配置とする */
.site-header--layout--nav-float .site-header-logo {
  display: inline-block;
  width: auto;
  margin-right: 0;
}

これでパソコン表示は完成形となります。

ヘッダーナビゲーションを中央寄り配置とするには

上のCSSで、justify-contentの値をcenterに変更するとナビゲーションは中央寄りとなります。好みに応じて使い分けてください。

パソコン表示でのスクロール時

ナビゲーションがコンテンツ幅いっぱいに広がっていても、スクロール時はヘッダーナビは中央寄り表示となります（デフォルト設定と同様）。ただしロゴ画像も表示されます。

スクロール時にヘッダーロゴ画像を非表示としたい場合は、次のCSSを追加してください。

/* スクロール時にロゴ画像を非表示とする */
.header_scrolled .site-header-logo {
    display: none;
}

④モバイルでの表示を調整

パソコン表示は完成ですが、モバイルで表示を確認すると、デフォルトと違ってナビゲーションメニューが中途半端に表示されてしまいます。そこで次のCSSでナビゲーションを非表示にしておきましょう。

CSSコピペ用

/* モバイルではヘッダーメニューを非表示とする */
@media (max-width: 991.98px) {
  body:not(.header_scrolled) .global-nav--layout--float-right {
    display: none;
  }
}

赤字の部分を書き換えればナビゲーションが非表示化するデバイス幅（ブレークポイント）を変更できます。

Lightningではデフォルトのブレークポイントが991.98pxと少々大きめに設定されていまるので、タブレットでは表示したい場合は600pxに設定するなど、好みに応じて調整ください。

まとめ

ここまでで紹介してきた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;
  width: 100%;
}
/* サイトロゴを中央配置とする */
.site-header--layout--nav-float .site-header-logo {
  display: inline-block;
  width: auto;
}
/* スクロール時にロゴ画像を非表示とする */
.header_scrolled .site-header-logo {
    display: none;
}
/* モバイルではヘッダーメニューを非表示とする */
@media (max-width: 991.98px) {
  body:not(.header_scrolled) .global-nav--layout--float-right {
    display: none;
  }
}

スクロールやモバイルでの表示対応を含めると、結構細かくCSSを調整する必要があります。

CSSに慣れていたり自分で細かくカスタマイズするのが好きな方には向いているのですが、デザインに時間を割くよりもコンテンツづくりに集中したい、という方ならぜひ有料版を検討してみてください。

有料ブラグインLightning Pro Unitを使えば簡単にほかのさまざまなレイアウトのバリエーションから選択することができます。

また本記事に関連の深い記事として、モバイルでもナビゲーションメニューを表示する方法を紹介しています。