メニューの設定方法
最終更新: 2026-03-15
メニューの設定方法
> 設定場所: 外観 → カスタマイズ → 「デザイン設定 - ヘッダー」→ 該当パターンのセクション →「メニュー部分」
> カスタマイザーで開く: パターン1のメニュー設定を開く
> このページのURL: https://lite-word.com/manual/header-menu/
ヘッダーナビゲーションメニューの表示内容と色を設定する。メニュー項目の登録は WordPress の「外観 → メニュー」で行い、ここではどのメニューを表示するか・色・フォントを設定する。
設定手順
メニューを表示する
- まずメニューを作成する： 外観 → メニュー → 「新しいメニューを作成」でメニュー項目を登録
- 外観 → カスタマイズ を開く
- 「デザイン設定 - ヘッダー」 → 使用中パターンのセクションを開く
- 「メニュー部分」 を見つける
- 「メニューセレクト」 で表示したいメニューを選択
- 「公開」 で保存
メニューの色を変える
- 上記の手順で「メニュー部分」を開く
- 「第１階層目」 の「テキスト色」で通常時のメニュー文字色を変更
- ホバー時（マウスを乗せた時）のテキスト色・背景色も変更できる
- ドロップダウンメニューの色は 「第２階層目以降」 で設定
- 「公開」 で保存
設定項目一覧
| ラベル | 型 | デフォルト | 説明 |
|---|---|---|---|
| メニューセレクト | select | 未選択 | 表示するメニューを選ぶ |
| フォント | select | 未指定 | メニューのフォントファミリー |
第１階層目（メインメニュー）
| ラベル | 型 | デフォルト | 説明 |
|---|---|---|---|
| テキスト色 | color | #000（パターン3は#fff） | 通常時の文字色 |
| カレントテキスト色 | color | #000 | 現在のページのメニュー文字色（パターン1のみ） |
| カレント背景色 | color | var(--color-accent) |
現在のページのメニュー背景色（パターン1のみ） |
| hover時のテキスト色 | color | #000 | マウスを乗せた時の文字色 |
| hover時の背景色 | color | var(--color-yellow) |
マウスを乗せた時の背景色 |
第２階層目以降（ドロップダウン）
| ラベル | 型 | デフォルト | 説明 |
|---|---|---|---|
| テキスト色 | color | #fff | ドロップダウンの文字色 |
| 背景色 | color | var(--color-main) |
ドロップダウンの背景色 |
| hover時のテキスト色 | color | #fff | マウスを乗せた時の文字色 |
| hover時の背景色 | color | var(--color-accent) |
マウスを乗せた時の背景色 |
パターンごとのホバー挙動の違い
| パターン | ホバーエフェクト |
|---|---|
| 1, 4, 5, 6 | アンダーライン（下線）アニメーション |
| 2, 3 | 背景色が全体に塗られる |
| 6 | ホバー色が var(--color-main) になる |
よくある質問
Q: メニューが表示されない
A: 2つ確認する。(1) 外観 → メニュー でメニューが作成されているか。(2) カスタマイザーの「メニューセレクト」でそのメニューが選択されているか。
Q: 現在のページのメニュー項目をハイライトしたい
A: パターン1のみ「カレントテキスト色」「カレント背景色」で設定できる。他のパターンでは自動的に .current-menu-item クラスが付くが、色のカスタマイズはCSSで対応。
Q: スマホではメニューが見えない
A: 画面幅1080px以下ではPCメニューがハンバーガーメニュー（ドロワー）に切り替わる。ドロワーの設定はフッター・ドロワー設定を参照。
最終更新: 2026-03-15 04:30