Lightning ヘッダーのカスタマイズ！メニュー、背景色、背景画像の指定
wpinori3745
この記事を読むと分かること！
Lightning（無料版）に関して、以下のことが分かります。
- ヘッダーメニューの設定手順
- ヘッダーメニューの文字の大きさ（フォントサイズ）や色（カラー）を変更する方法
- ヘッダーメニューにサブタイトルを付ける方法
- サイトヘッダーの背景色を変更する方法
- サイトロゴとヘッダーメニューを縦並び・中央配置にする方法
- 固定ページ・投稿ページのヘッダー背景色の変更方法
- 固定ページ・投稿ページのヘッダーに画像を設定する方法
「ヘッダーメニューの文字が小さい...」
「背景色を変えられないの？」
この記事を見ていただいてるということは 現在、こういった悩みを抱えていませんか？
Lightingのデフォルトのヘッダーメニューの大きさは14pxとやや小さめですし、背景色も白。しかも管理画面から変更できません。
この記事ではWordPressテーマLightningのヘッダーのカスタマイズ方法として、ヘッダーメニューのカスタマイズや、ヘッダー背景を変更する方法をご紹介します。
Lightning（無料版）はかなり使いやすいテーマですが、ヘッダーのカスタマイズ機能がないことが残念なポイントです。この記事を参考にして、お好みのヘッダーデザインに近づけてみてください！
Lightningのヘッダーメニューを設定する手順
Lightningのヘッダーメニューは下図の赤枠カ所に表示されます。
本記事では固定ページの作成が完了した後に、メニューを設定する手順をご紹介します。
管理画面の①「外観」＞②「メニュー」をクリックする。
「メニューを編集」画面の①「メニュー名」を入力し、②「メニューの位置」を選択する後、③「メニューを作成」をクリックする。
「メニュー項目を追加」の固定ページ下の①「全てを表示」をクリックし、②ヘッダーメニューに表示させるページにチェックを入れ、③「メニューに追加」をクリックする。
①移動させたいページをクリックし、上下にドラックして順番を入れ替える。
①「メニューを保存」をクリックする。
Lightningのヘッダーメニューの設定が完了！
Lightningのヘッダーメニューをカスタマイズする方法
ヘッダーメニューの文字の大きさ（フォントサイズ）を変更する
Step1 メニューのCSS情報を確認する
ホームページ画面を右クリックし①「検証」をクリックする。
検証画面の①
をクリックした後、②メニューの１つをクリックすると、③メニューのCSSコードが表示される。
①メニューのクラス名（赤枠）を選択し、コピーするか、又はメモっておく。
Step2 メニューの文字の大きさ（フォントサイズ）を指定するCSSコードを記述する
管理画面から①「外観」＞②「カスタマイズ」を選択し、③「追加CSS」をクリックする。
①クラス名を貼り付け（又はクラス名を手入力する）、文字サイズを指定するCSSを記述し、②「公開」をクリックする。
メニューのフォントサイズが16pxに変更できました（14px → 16px）！
ヘッダーメニューのフォントカラー（文字の色）を変更する
Step1 メニューのCSS情報を確認する
ホームページ画面を右クリックし①「検証」をクリックする。
検証画面の①をクリックした後、②メニューの１つをクリックすると、③メニューのCSSコードが表示される。
①メニューのクラス名（赤枠）を選択し、コピーするか、又はメモっておく。
Step2 メニューの文字色（カラー）を指定するCSSコードを記述する
管理画面から①「外観」＞②「カスタマイズ」を選択し、③「追加CSS」をクリックする。
①クラス名を貼り付け（又はクラス名を手入力する）、文字色を指定するCSSを記述し、②「公開」をクリックする。
メニューの文字色が変更（黒 → 水色）できました！
ヘッダーメニューにサブタイトルを付ける
このステップでは下図のようにヘッダーメニューの下にサブタイトルを付ける方法をご紹介します。
「サブタイトル｣とは、メニューの下に英語表記などのメニューの補足説明のようなものです。
管理画面から①「外観」＞②「メニュー」を選択し、③「表示オプション」をクリックする。
詳細メニュー設定を表示の①「説明」にチェックを入れ、②「表示オプション」をクリックする。
各メニューの①「▼」をクリックして詳細画面を開いたら、②「説明」欄にサブタイトルを入力し、③「▲」で詳細画面を閉じる。
①「メニューを保存」をクリックしたらさ設定完了。
ヘッダーメニューの下にサブタイトルが表示されました！
Lightningのサイトヘッダーのカスタマイズ
サイトヘッダーの背景色を変更する
Step1 メニューのCSS情報を確認する
ホームページ画面を右クリックし①「検証」をクリックする。
検証画面の①をクリックした後、②ヘッダークリックすると、③ヘッダーのCSSコードが表示される。
①ヘッダーのクラス名（赤枠）を選択し、コピーするか、又はメモっておく。
Step2 サイトヘッダーの背景色を指定するCSSコードを記述する
管理画面から①「外観」＞②「カスタマイズ」を選択し、③「追加CSS」をクリックする。
①クラス名を貼り付け（又はクラス名を手入力する）、背景色を指定するCSSを記述し、②「公開」をクリックする。
背景色が変更できました（白 → 薄いグレー）！
サイトロゴとヘッダーメニューを縦並び・中央配置にする方法
最後に少し上級編ですが、PC表示（992px以上の画面幅）の際に、サイトロゴとヘッダーメニューを縦に並べ、中央配置（下図）にする方法を説明します。
管理画面から①「外観」＞②「カスタマイズ」を選択し、③「追加CSS」をクリックする。
追加CSSに以下のCSSコードを記載して保存してください。
@media(min-width: 992px) {
.site-header--layout--nav-float .site-header-container {
display: block;
}
.site-header--layout--nav-float .site-header-logo a {
margin: 0 auto;
}
.global-nav--layout--float-right .global-nav-list {
margin-left: auto;
margin-right: auto;
}
}
上記は2025年1月時点のクラス名（水色のアンダーライン）です。
今後、クラス名が変更になる可能性もありますので、以下にクラス名の調べ方を記載しておきます。
上記CSSコードで変更できない場合、クラス名が違う可能性がありますので。
検証画面の①をクリックした後、②ページヘッダークリックすると、③ヘッダーのCSSコードが表示される。
Lightning ページヘッダーをカスタマイズする方法
固定ページ・投稿ページのヘッダー背景色を変更する
Step1 メニューのCSS情報を確認する
ホームページ画面を右クリックし①「検証」をクリックする。
検証画面の①をクリックした後、②ページヘッダークリックすると、③ヘッダーのCSSコードが表示される。
①ヘッダーのクラス名（赤枠）を選択し、コピーするか、又はメモっておく。
Step2 ページヘッダーの背景色を指定するCSSコードを記述する
管理画面から①「外観」＞②「カスタマイズ」を選択し、③「追加CSS」をクリックする。
①クラス名を貼り付け（又はクラス名を手入力する）、背景色を指定するCSSを記述し、②「公開」をクリックする。
ページヘッダーの背景色が変更できました！
固定ページ・投稿ページのヘッダーに画像を設定する
Step1 メニューのCSS情報を確認する
ホームページ画面を右クリックし①「検証」をクリックする。
検証画面の①をクリックした後、②ページヘッダークリックすると、③ヘッダーのCSSコードが表示される。
①ヘッダーのクラス名（赤枠）を選択し、コピーするか、又はメモっておく。
Step2 設定する画像のURLを確認する
管理画面の「メディアライブラリ」をクリックし、ページヘッダーの背景に設定したい画像をクリックし選択する。画像をWordPressに取り込んでいない場合は取り込む。
①「URLをクリップボードにコピー」をクリックする。
Step3ページヘッダーの背景画像を指定するCSSコードを記述する
管理画面から①「外観」＞②「カスタマイズ」を選択し、③「追加CSS」をクリックする。
①クラス名を貼り付け（又はクラス名を手入力する）、背景画像を指定するCSSを記述し、②「公開」をクリックする。
.page-header {
background-image: url( ここに画像のURL記述する );
}
ページヘッダーの背景に画像を設定することがが変更できました！
合わせて読みたい記事
Lightning 投稿一覧のカスタマイズ方法です
WordPress Lightning 投稿一覧のカスタマイズ
本記事ではWordPressテーマLightningの投稿一覧のカスタマイズ方法（カテゴリ色、ボタン表示、レイアウト変更）をご紹介します。
まとめ
WordPressテーマLightning（無料版）は管理画面で変更をすることができないため、CSSを使用して変更する必要があります。
どれもクラス名が分かれば、記述するCSSは難しくないので初心者の方でも変更可能だと思います。是非チャレンジしてみてください！変更できない場合はCSSの記述やクラス名が間違っている可能性が高いので、CSSを記述する際は注意して記述してください。
