ヘッダー・フッター・ロゴの設定の手順を、画面キャプチャ付きでわかりやすく解説します。

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の配置調整
ショートヘッダーに切り替え 通常 / ショート / ミニロゴ スマホのファーストビュー確保
ワイドヘッダースライド スライドバナーを選択 最上部に全幅スライドを設置