ヘッダー設定マニュアル
ヘッダー設定マニュアル
> こんな質問に答えます:
> - ヘッダーのデザインを変えたい
> - ヘッダーにはどんなパターンがあるの？
> - ヘッダーの設定はどこからやるの？
> 別名・よくある呼び方: ヘッダー設定、サイトの上部分、ナビゲーション、メニューバー、ヘッダーデザイン
> 設定場所: 外観 → カスタマイズ → 「ヘッダー」
> 対象: LiteWordテーマ全バージョン
LiteWordのヘッダーは 6つのデザインパターン + ショートコード + 非表示 の計8種から選択できる。各パターンは共通コンポーネント（ロゴ・メニュー・CTA等）を組み合わせて構成され、パターンごとに使える要素が異なる。
パターン一覧と比較
| パターン | 特徴 | 追従 | 情報バー | ロゴ | メニュー | CTAボタン | 電話CTA | ピックアップ | 背景色 | 説明テキスト |
|---|---|---|---|---|---|---|---|---|---|---|
| 1 | 標準・電話CTA付き | ○ | ○ | ○ | ○（カレント色あり） | ○ | ○ | - | - | - |
| 2 | シンプル・アクセント | ○ | ○ | ○ | ○ | ○（デフォルトON） | - | - | - | - |
| 3 | 背景色付き | ○ | ○ | ○ | ○ | ○（デフォルトON） | - | - | ○ | - |
| 4 | ボーダーボタン | ○ | ○ | ○ | ○ | ○（角丸100px） | - | - | - | - |
| 5 | 多機能・ピックアップ | ○ | ○ | ○ | ○ | - | - | ○ | - | ○ |
| 6 | モダン・アンダーライン | ○ | ○ | ○ | ○ | ○（角丸100px） | - | - | - | - |
| ショートコード | 完全カスタム | - | - | - | - | - | - | - | - | - |
| 非表示 | ヘッダーなし | - | - | - | - | - | - | - | - | - |
ページタイプ別にパターンを変更できる
| 設定名 | 説明 |
|---|---|
| デフォルト（全ページ共通） | 未指定のページに適用 |
| 固定ページ | 固定ページのみ別パターン |
| 投稿ページ | ブログ記事のみ別パターン |
| アーカイブ | カテゴリ/タグ一覧のみ別パターン |
未選択（空欄）の場合、デフォルト設定が適用される。
パターン別 詳細
パターン1 — 標準（電話CTA対応）
最も汎用的なパターン。ロゴ左・メニュー中央・CTA右の横並びレイアウト。唯一、電話CTAボタンに対応している。
含まれるコンポーネント:
- 追従ヘッダー
- インフォメーションバー
- ロゴ（画像/テキスト）
- メニュー（カレントページ色設定あり — 他パターンにはない）
- 電話CTAボタン（デフォルトOFF）
- CTAボタン（デフォルトOFF）
パターン1固有のデフォルト:
- CTAボタンテキスト: 「ご予約はこちら」
- CTAボタン角丸: 0px（四角）
- ロゴテキスト色: 黒
向いている用途: 電話問い合わせが重要な企業サイト・クリニック・士業サイト
パターン2 — シンプル・アクセントホバー
ロゴ左・メニュー＋CTAボタン右。メニューホバー時に背景色が全体に塗られるエフェクト。
含まれるコンポーネント:
- 追従ヘッダー
- インフォメーションバー
- ロゴ（画像/テキスト）
- メニュー
- CTAボタン（デフォルトON）
パターン2固有のデフォルト:
- CTAボタンテキスト: 「ご予約はこちら」
- CTAボタン角丸: 0px
- ロゴテキスト色: 黒
向いている用途: 電話対応不要なサービスサイト・ブログ
パターン3 — 背景色付き
ヘッダー全体に背景色を設定できる唯一のパターン。メニューホバーもパターン2と同じ背景塗りエフェクト。
含まれるコンポーネント:
- 追従ヘッダー
- インフォメーションバー
- ロゴ（画像/テキスト）
- メニュー
- ヘッダー背景色（独自設定）
- CTAボタン（デフォルトON）
パターン3固有の設定:
| 設定名 | 説明 |
|---|---|
| ヘッダー背景色 | デフォルトはメインカラーと同じ |
パターン3固有のデフォルト:
- CTAボタン背景色: アクセントカラーと同じ（他パターンはメインカラー）
- ロゴテキスト色: 白（背景色に合わせて）
- メニュー第1階層テキスト色: 白
向いている用途: ブランドカラーを前面に出したいサイト・インパクト重視のLP
パターン4 — ボーダーボタン
パターン2と同じ構成だがデザインが異なる。CTAボタンが丸型＋ボーダースタイル。メニューはアンダーラインホバー。
含まれるコンポーネント:
- 追従ヘッダー
- インフォメーションバー
- ロゴ（画像/テキスト）
- メニュー
- CTAボタン（デフォルトON、丸型、ボーダー付き）
パターン4固有のデフォルト:
- CTAボタンテキスト: 「お問い合わせ」
- CTAボタン角丸: 100px（完全な丸形）
- CTAボタン外枠: あり
- ロゴテキスト色: 黒
向いている用途: ミニマルでクリーンなデザイン・スタートアップ
パターン5 — 多機能（説明テキスト＋ピックアップメニュー）
2段構成のヘッダー。上段にロゴ＋説明テキスト、下段にメニューバー。ピックアップメニュー（最大4つのアイコン付きリンク） が使える唯一のパターン。CTAボタンの代わりにピックアップメニューで誘導する設計。
含まれるコンポーネント:
- 追従ヘッダー
- インフォメーションバー
- ロゴ（画像/テキスト）
- 説明テキスト（PC用・SP用を別々に設定可能）
- メニュー
- ピックアップメニュー（4枠）
パターン5固有の設定:
| 設定名 | 説明 |
|---|---|
| PC用説明テキスト | PC画面で表示される説明文 |
| SP用説明テキスト | スマホ画面で表示される説明文 |
ピックアップメニュー設定（詳細は後述）: 表示条件・レスポンシブ・背景色・各メニュー項目（テキスト/URL/アイコン）×4
向いている用途: 複数の導線が必要なサイト・ポータル系・情報量が多いサイト
パターン6 — モダン・アンダーライン
すっきりしたモダンデザイン。メニューホバー時に下線アニメーション。CTAは丸型ボタン。
含まれるコンポーネント:
- 追従ヘッダー
- インフォメーションバー
- ロゴ（画像/テキスト）
- メニュー
- CTAボタン（デフォルトON、丸型）
パターン6固有のデフォルト:
- CTAボタンテキスト: 「資料ダウンロード」
- CTAボタン角丸: 100px
- メニューホバー色: メインカラーと同じ
- ロゴテキスト色: 黒
向いている用途: IT企業・SaaS・モダンなコーポレートサイト
ショートコード
テーマのヘッダーを使わず、任意のショートコードで完全にカスタムしたヘッダーを表示する。マイパーツ等のショートコードを入力欄に記載して使用する。
非表示
ヘッダーを完全に非表示にする。LPなどヘッダーが不要なページで使用。
共通コンポーネント設定
以下の設定は各パターン内で共通の仕組みだが、設定値はパターンごとに独立している。パターン1で設定した値はパターン2には反映されない。
追従ヘッダー（スティッキーヘッダー）
スクロール時にヘッダーを画面上部に固定表示する。コーポレートサイトやLPでは追従ヘッダーが効果的。ブログ記事ではOFFが読みやすい。
| 設定名 | 選択肢 | 説明 |
|---|---|---|
| 追従ヘッダー | 追従させない | ヘッダーはスクロールで流れる |
| 追従させる | 全画面サイズで画面上部に固定 | |
| 追従させる（PCはメニューのみ） | PCではメニューバーのみ追従、スマホでは全体追従 |
補足: 追従メニューは少しスクロールしてから表示されます。PCとスマホで自動切替されます。
インフォメーションバー
ヘッダー最上部に表示される細い帯。キャンペーン告知やお知らせに使用。期間限定キャンペーンや重要なお知らせを目立たせたい時に使う。常時表示するとユーザーが慣れて効果が薄れるため、期間を決めて使うのが効果的。
| 設定名 | 説明 |
|---|---|
| 表示スイッチ | 表示する / 表示しない |
| テキスト | 表示する文言（デフォルト: サイトの説明文） |
| URL | 設定するとバー全体がリンクになる |
| 背景色 | バーの背景色（デフォルト: メインカラーと同じ） |
| テキスト色 | 文字の色（デフォルト: 白） |
| フォント | フォントファミリー |
ロゴ設定
ヘッダーに表示するサイトロゴ。画像・テキスト・非表示の3モードから選択。ロゴ画像がない場合はテキストロゴが使える。明朝体+大きめサイズだと高級感、ゴシック体+小さめだとカジュアルな印象になる。
| 設定名 | 説明 |
|---|---|
| ロゴタイプ | 画像 / テキスト / 非表示 の3種から選択 |
| テキスト | ロゴタイプが「テキスト」の時に表示する文字 |
| テキスト色 | ロゴ文字の色（パターン3のみデフォルト白、他は黒） |
| フォント | フォントファミリー |
| フォント太さ | 100〜900 |
| テキストサイズPC | PC画面でのサイズ（20〜60px） |
| テキストサイズTB | タブレット画面でのサイズ（20〜60px） |
| テキストサイズSP | スマホ画面でのサイズ（20〜60px） |
| ロゴ画像 | 画像をアップロード（未設定の場合はテーマカスタムロゴを使用） |
| 画像サイズPC | PC画面でのサイズ（20〜60px） |
| 画像サイズTB | タブレット画面でのサイズ（20〜60px） |
| 画像サイズSP | スマホ画面でのサイズ（20〜60px） |
ロゴの優先順位（上から順に適用）:
- ページ個別設定のロゴ画像
- ページ個別設定のロゴテキスト
- カスタマイザーのロゴ設定
- テーマカスタムロゴ（外観 → カスタマイズ → サイト基本情報）
- サイト名（Settings → 一般 → サイトのタイトル）
メニュー設定
ヘッダーナビゲーションメニューの表示とスタイル。
| 設定名 | 説明 |
|---|---|
| メニュー選択 | 表示するメニューを選択 |
| フォント | フォントファミリー |
| 第1階層テキスト色 | メニュー項目の文字色（パターンにより黒または白） |
| 第1階層ホバーテキスト色 | マウスオーバー時の文字色 |
| 第1階層ホバー背景色 | マウスオーバー時の背景色 |
| カレントテキスト色 | 現在のページの文字色（パターン1のみ） |
| カレント背景色 | 現在のページの背景色（パターン1のみ） |
| 第2階層テキスト色 | ドロップダウンメニューの文字色 |
| 第2階層背景色 | ドロップダウンメニューの背景色 |
| 第2階層ホバーテキスト色 | ドロップダウンのマウスオーバー時文字色 |
| 第2階層ホバー背景色 | ドロップダウンのマウスオーバー時背景色 |
メニューホバーの挙動（パターン別）:
- パターン1, 4, 5, 6: アンダーラインアニメーション
- パターン2, 3: 背景色が全体に塗られるエフェクト
- パターン6 特有: ホバー色がメインカラーになる
CTAボタン（アクションボタン）
ヘッダー内のコンバージョン用ボタン。パターン5以外の全パターンで使用可能。「お問い合わせ」「無料相談」「ご予約はこちら」などのアクションを促すボタン。目立つ色で設置すると効果的。
| 設定名 | 説明 |
|---|---|
| 表示スイッチ | ON / OFF（デフォルトはパターンにより異なる） |
| テキスト | ボタンに表示する文字 |
| リンクURL | クリック先のURL |
| 背景色 | ボタンの背景色（デフォルト: メインカラーと同じ） |
| テキスト色 | ボタンの文字色（デフォルト: 白） |
| 外枠色 | ボーダーの色 |
| 外枠太さ | 0〜10px |
| 角丸 | 0〜100px |
| ホバー背景色 | マウスオーバー時の背景色 |
| ホバーテキスト色 | マウスオーバー時の文字色 |
| ホバー外枠色 | マウスオーバー時のボーダー色 |
パターン別デフォルト値:
| パターン | スイッチ | テキスト | 形状 | 外枠 | 背景色 |
|---|---|---|---|---|---|
| 1 | OFF | ご予約はこちら | 四角 | なし | メインカラー |
| 2 | ON | ご予約はこちら | 四角 | なし | メインカラー |
| 3 | ON | ご予約はこちら | 四角 | なし | アクセントカラー |
| 4 | ON | お問い合わせ | 丸型 | あり | メインカラー |
| 5 | — | （CTAボタンなし） | — | — | — |
| 6 | ON | 資料ダウンロード | 丸型 | なし | メインカラー |
電話CTAボタン（パターン1専用）
電話番号を表示するボタン。スマホではタップで電話発信。店舗・クリニック・士業など電話問い合わせが多い業種で有効。
| 設定名 | 説明 |
|---|---|
| 表示スイッチ | ON / OFF（デフォルト: OFF） |
| 電話番号 | 半角・ハイフンあり（例: 03-1234-5678） |
| 電話番号色 | デフォルト: メインカラーと同じ |
| 電話番号フォント | フォントファミリー |
| 電話番号太さ | フォントの太さ（デフォルト: やや太め） |
| 補足テキスト | 営業時間等（例: 受付時間 9:00〜18:00） |
| 補足テキスト色 | 補足文の文字色 |
| 補足テキストフォント | 補足文のフォントファミリー |
| 補足テキスト太さ | 補足文のフォントの太さ |
| アイコン | 8種類の電話アイコンから選択（非表示も可） |
| アイコン色 | デフォルト: メインカラーと同じ |
ピックアップメニュー（パターン5専用）
メニューバーの下に表示されるアイコン付きリンクボタン（最大4つ）。「初めての方へ」「料金表」「アクセス」「お問い合わせ」のような主要導線を設置するのに最適。
表示条件
| 設定名 | 説明 |
|---|---|
| 表示ページ | どのページで表示するか（下表参照） |
| レスポンシブ | PC+スマホ両方 / スマホのみ / PCのみ |
| 背景色 | デフォルト: メインカラーと同じ |
表示ページの選択肢:
| 選択肢 | 表示条件 |
|---|---|
| 非表示 | 表示しない |
| 全ページ | すべてのページで表示 |
| トップページのみ | トップページだけ表示 |
| 固定ページのみ | 固定ページだけ表示 |
| 固定ページ以外 | 固定ページ以外で表示 |
| 投稿ページのみ | 投稿ページだけ表示 |
| 投稿ページ以外 | 投稿ページ以外で表示 |
| アーカイブのみ | アーカイブページだけ表示 |
| アーカイブ以外 | アーカイブ以外で表示 |
メニュー項目（1〜4）
各メニュー項目に3つの設定:
| 設定名 | 説明 |
|---|---|
| テキスト | ボタンの文字 |
| URL | リンク先 |
| アイコン | アイコン種類 |
アイコン選択肢: 非表示 / メール / 電話 / PC / ダウンロード / Facebook / X（旧Twitter） / Instagram / LINE / YouTube / 医者 / ユーザー / アップ / コイン / コメント01〜04
ページ単位の上書き設定
固定ページ・投稿の編集画面 →「ページ独自のデザイン設定」から、そのページだけのヘッダー設定を上書きできる。
| 設定名 | 説明 |
|---|---|
| ヘッダーパターン | そのページだけ別パターンに変更 |
| メニュー | そのページだけ別メニューを表示 |
| ロゴタイプ | テキスト / 画像 |
| ロゴテキスト | HTMLタグ使用可 |
| ロゴフォント | フォントファミリー |
| ロゴフォント太さ | 100〜900 |
| ロゴ画像 | 画像アップロード |
| ロゴサイズPC | 20〜60px |
| ロゴサイズTB | 20〜60px |
| ロゴサイズSP | 20〜60px |
| ロゴリンク先 | デフォルトはトップページ |
| CTAボタン背景色 | そのページだけCTAの色を変更 |
| ピックアップ表示 | ON / OFF（強制的に表示/非表示） |
活用例:
- LP用ページでヘッダーを「非表示」に → 離脱率低下
- 特定ページだけロゴを別画像に → ブランド別LP対応
- 問い合わせページだけCTAボタン色を変更 → ページ内の導線整理
パターン選びガイド
用途別おすすめ
| 用途 | おすすめパターン | 理由 |
|---|---|---|
| 電話問い合わせが重要（クリニック・士業） | パターン1 | 唯一の電話CTA対応 |
| 一般的な企業サイト | パターン2 or パターン4 | シンプルで汎用的 |
| ブランドカラーを強調したい | パターン3 | ヘッダー背景色が設定できる唯一のパターン |
| ミニマル・洗練されたデザイン | パターン4 or パターン6 | 丸型ボタン＋アンダーラインホバー |
| 導線が多い（メニュー+α） | パターン5 | ピックアップメニュー4つ＋説明テキスト |
| IT・SaaS系のモダンサイト | パターン6 | 「資料ダウンロード」デフォルト、モダン感 |
| 完全カスタムヘッダー | ショートコード | テーマ標準に縛られない |
| LPなどヘッダー不要ページ | 非表示 | ページ単位で設定可能 |
パターン2 vs パターン4 の違い
構成要素は同じ。違いはデザイン:
| 項目 | パターン2 | パターン4 |
|---|---|---|
| メニューホバー | 背景色で塗りつぶし | アンダーライン |
| CTAボタンテキスト | ご予約はこちら | お問い合わせ |
| CTAボタン形状 | 四角 | 丸型 |
| CTAボタン外枠 | なし | あり |
よくある質問
Q: ヘッダーの追従が効かない
A: カスタマイザーで該当パターンの「追従ヘッダー」が「追従させない」になっていないか確認。パターンごとに独立した設定なので、パターンを切り替えた場合は新しいパターン側でも追従をONにする必要がある。
Q: 固定ページだけヘッダーを消したい
A: 2つの方法がある:
- カスタマイザー → ヘッダー → 固定ページのパターンを「非表示」に（全固定ページが対象）
- 該当ページの編集画面 →「ページ独自のデザイン設定」→ ヘッダーパターンを「非表示」に（そのページだけ）
Q: メニューの色をパターンごとに変えたい
A: 各パターンの設定は完全に独立している。パターン1で設定したメニュー色はパターン2には反映されない。各パターンのセクション内で個別に設定する。
Q: ロゴ画像を設定したのに表示されない
A: ロゴの優先順位を確認。ページ個別設定 > カスタマイザー設定 > テーマカスタムロゴ > サイト名の順で適用される。ページ編集画面の「ページ独自のデザイン設定」でロゴが上書きされていないか確認。
Q: スマホでCTAボタンが消えている
A: ヘッダーのCTAボタンはPCのみ表示。スマホではドロワー（ハンバーガーメニュー）内に移動する。スマホ画面で常にCTAを見せたい場合は、パターン5のピックアップメニュー（レスポンシブ: SP+PC）を使用するか、フッター固定CTAを検討する。
Q: パターン5のピックアップメニューが特定ページで消える
A: ピックアップメニューの「表示ページ」設定を確認。「トップページのみ」にすると、トップページ以外では非表示になる。また、ページ編集画面の「ピックアップ表示」で個別にOFFにされている可能性もある。
レスポンシブ対応
ヘッダーはPCとスマホで自動切替されます。
| 画面サイズ | 表示 |
|---|---|
| PC（大画面） | メニュー横並び表示 |
| タブレット | ハンバーガーメニューに切替 |
| スマホ | ハンバーガーメニュー、ロゴ・ボタンサイズ縮小 |
カラー設定のデフォルトについて
ヘッダーの各設定でデフォルト値が「メインカラー」「アクセントカラー」と記載されているものは、カスタマイザーの「カラー設定」で設定した色が自動的に使われます。カラー設定を変更すると、ヘッダーの該当箇所も連動して変わります。
最終更新: 2026-03-21