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

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

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

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

詳細はこちら

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

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

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

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

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

この記事でわかること

次の順序でCSSを適用し、ヘッダー内のレイアウトを調整します。

1.サイトロゴ画像とヘッダーナビを縦に積み重ねて配置
2.ヘッダーナビゲーションをコンテンツ幅いっぱいに配置
3.サイトロゴ画像を中央に配置
4.モバイルでの表示を調整

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

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

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

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

パソコンでの表示

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

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

スマホでの表示

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

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

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

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

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

ヘッダーレイアウト完成形

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

ちなみにCSSを書き換えてもブラウザーのキャッシュが残っていると表示にはすぐ反映されません。CTRL+F5でキャッシュをクリアしましょう。

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

ヘッダーコンテナにはもともと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;
}

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

赤字の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;
}
/* サイトロゴを中央配置とする */
.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に設定するなど、好みに応じて調整ください。

ブレークポイント600pxでのipad min表示

まとめ

ここまでで紹介してきた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;
}
/* モバイルではヘッダーメニューを非表示とする */
@media (max-width: 991.98px) {
  body:not(.header_scrolled) .global-nav--layout--float-right {
    display: none;
  }
}

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

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

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

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

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

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

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