予約画面の上部（ヘッダー）に施設のロゴ画像を表示するための具体的なHTML雛形をご紹介します。
予約ページ全体のデザイン（ヘッダー・フッターの設定方法）については、下記のマニュアルや別 Q&A「予約ページ（上部や下部）に独自の画像やリンクなど、デザインを設定をしたい」もあわせてご参照ください。
ロゴ画像の準備方法
ロゴ画像は、以下の 2 通りで用意できます。
- 予約番の管理画面「素材」機能で画像をアップロードする（複数の画像をまとめてアップロードする場合は zip 形式に圧縮）。アップロード後に生成された画像URLを利用します。
- 施設様の公式ホームページ等で既に公開されている画像URLを利用する（施設様で管理されているWebサーバ上の画像）。
操作手順
- 管理画面で「その他設定」→「デザイン設定」を開きます。
- 「ヘッダー/フッター（PC、またはレスポンシブ用）」で「非公開」を選択します。
- 「ヘッダー（PC、またはレスポンシブ用）」で「ソース」をクリックします。
- 後述のHTML雛形を入力欄に貼り付け、「ロゴ画像のURL」をご自身のURLに置き換えます。
- 「変更する」ボタンを押します。
- 「虫眼鏡」マークから表示イメージを確認します。
- 問題なければ「公開」を選択し、再度「変更する」ボタンを押して予約画面に反映します。
ロゴ表示用のHTML雛形
<p style="text-align: center;"><img src="ロゴ画像のURL" style="width: 200px; height: auto; max-width: 100%;"></p>
「width: 200px」の数字を変更することで表示サイズを調整できます。例：「width: 300px」「width: 100px」など。「height: auto」のままにしておくと縦横比を保ったままサイズが変わります。
関連する設定
- 「PC用ファビコンURL」「スマートフォン用タッチアイコンURL」もデザイン設定で変更できます。
- ヘッダーと同じく「フッター（PC、またはレスポンシブ用）」も編集可能です。