ヘッダー・フッター・ロゴの設定の手順を、画面キャプチャ付きでわかりやすく解説します。
📋 この記事の目次
STEP 1 ホームページ管理を開く

L3管理画面のサイドメニューから「ホームページ管理」をクリックします。
ページ上部に「メニューとページ設定」が表示されます。ヘッダー・ロゴの設定はこの画面を下にスクロールした「上部(HEADER)設定」セクションで行います。
STEP 2 ホームページロゴを設定する
対応形式: PNG, JPEG, GIF, WEBP。ロゴはヘッダー左上に表示されます。
「上部(HEADER)設定」セクションの「ホームページロゴ」エリアに、ロゴ画像をドラッグ&ドロップするか、「クリックしてファイルを選択」ボタンからアップロードします。
右側にプレビューが表示されるので、表示が問題ないか確認してください。
別途「アプリロゴ」のアップロード欄もあります。これはPWA(スマホのホーム画面に追加)で使われるアイコンです。ホーム画面のアイコンとして表示されるため、わかりやすい正方形の画像が望ましいです。ホームページロゴとは別の画像を指定できます。
STEP 3 店名を入力する
「ヘッダーに店名の表示」欄に、ヘッダーに表示したい店舗名を入力します。
ここで入力した名前がヘッダーのロゴ横(またはロゴの代わり)に表示されます。
STEP 4 電話番号を設定する
以下の項目を設定します。
| 項目 | 内容 |
|---|---|
| 電話番号 | ヘッダーに表示する電話番号を入力 |
| 電話番号の表示 | 「表示」または「非表示」をラジオボタンで選択 |
| 電話番号ボタンのカラー | カラーピッカーで2色(メイン/サブ)を指定 |
スマホではタップで発信できるリンクになります。表示が不要な場合は「非表示」に切り替えてください。
STEP 5 営業時間を設定する
「営業時間」のテキストエリアに営業時間を入力します。改行が反映されるので、曜日ごとに記載することもできます。
この欄は営業時間以外のテキスト(キャッチコピーなど)にも利用できます。
| 項目 | 選択肢 |
|---|---|
| 営業時間デザインパターン | 標準 / ボカシ / ボカシ白 / ボカシ黒 |
| 営業時間の表示 | 表示 / 非表示 |
STEP 6 日付変更線(シフト切り替え時間)を設定する
「日付変更線の設定(シフト切り替え時間)」で、シフトの日付が切り替わる時刻をプルダウンから選択します。
たとえば明け方3時まで営業する店舗で「指定なし」のままにすると、0時を過ぎた時点でシフトが翌日扱いに切り替わってしまいます。実際には深夜にキャストが出勤していても、ホームページを見たお客さんの画面には表示されなくなります。お客さんは日付が変わっても「今日の25時」「翌2時」として見ているので、営業終了時刻に合わせて設定してください。
STEP 7 ロゴリンクのとび先を設定する
「ロゴリンクのとび先パス」に、ヘッダーロゴをクリックしたときの遷移先を指定します。
通常は「/」(トップページ)を入力します。年齢認証ページを設置している場合は「/top」など、認証後のページを指定することもあります。
STEP 8 グローバルメニューのデザインを選ぶ
「グローバルメニューデザインパターン」から、ヘッダー下に表示されるナビゲーションメニューのデザインをラジオボタンで選択します。
30種類以上のパターンがあり、フォントやボカシの有無、季節イベント(ハロウィン・クリスマス・正月など)向けデザインも用意されています。選択するとプレビューがすぐ反映されるので、ポチポチ切り替えながら見栄えをチェックできます。
「グローバルメニューのテキストカラー」「アクティブカラー」もカラーピッカーで個別に指定できます。
STEP 9 保存する
すべての設定が完了したら、画面下部の「保存する」ボタンをクリックします。
STEP 10 フッター項目を編集する
フッターに表示されるアイコン(電話・地図・SNSリンクなど)は、ホームページ管理画面の下部にある「フッター項目」から個別に編集できます。
各フッター項目をクリックすると、以下を設定できます。
- アイコン表示: 表示 / 非表示
- 既定カラー: カラーピッカーで色を指定
不要なフッターアイコンは「非表示」にすれば消えます。
STEP 11 ページごとのヘッダー表示設定
ヘッダー・フッターの表示/非表示はページ単位でも切り替え可能です。各ページの編集画面(ホームページ管理 → ページ編集)で以下を設定できます。
| 項目 | 選択肢 | 用途 |
|---|---|---|
| ヘッダーとフッターの表示 | 表示 / 非表示 | 年齢認証ページなど不要な場合 |
| ヘッダーグローバルメニューの表示 | 表示 / 非表示 | 特定ページだけメニューを隠す場合 |
| ハンバーガーメニューの表示 | 表示 / 非表示 | スマホ向けメニューの制御 |
| ハンバーガーメニューの位置 | 左下 / 左上 | UIの配置調整 |
| ショートヘッダーに切り替え | 通常 / ショート / ミニロゴ | スマホのファーストビュー確保 |
| ワイドヘッダースライド | スライドバナーを選択 | 最上部に全幅スライドを設置 |