テンプレートの編集
予約画面における各画面のHTML、およびCSSをエディタで編集したり、配色を切り替えることが出来ます。
編集を行う場合は、「編集したい画面」のプルダウンから、変更したい画面を選択してください。
プルダウンを切り替えるとすぐにフォームが表示されますので、選択中の画面かどうかを確認の上、編集を行ってください。
設定を変更後は、必ずフォームの下にある「テンプレートを更新する」を押してください。
反映前に別の画面を選択すると、編集内容が失われるため、ご注意ください。
編集可能なHTMLテンプレート
| トップページ | 予約画面のトップページです。 初期設定＞会員機能を利用しない場合は、表示がスキップされます。 |
|---|---|
| （プラン）選択画面 | 予約プランを選択する画面です。 項目名は初期設定＞予約の種類で設定した名前に書き換わります。 プラン設定でプランが1つしか無い場合は、表示がスキップされます。 |
| （人数）選択画面 | 予約人数を選択する画面です。 項目名は初期設定＞予約の単位で設定した名前に書き換わります。 予約日時設定で予約人数を指定しない場合は、表示がスキップされます。 |
| 予約日選択画面 | 予約日を指定するカレンダー画面です。 表示されるカレンダーはカレンダー設定で設定したものになります。 |
| 予約時間選択画面 | 予約時間を指定する画面です。 週別カレンダーの場合は「予約日選択画面」で時間も選択するため、表示がスキップされます。 |
| フォーム入力画面 | お客様の情報を入力するフォーム画面です。 予約フォーム設定で設定したフォーム項目が表示されます。 |
| 確認画面 | 指定した予約プランや予約日時、入力した情報を確認する画面です。 |
| 完了画面 | 予約が完了したことをお知らせする画面です。 |
| キャンセル画面 | 予約のキャンセルを行うフォームです。 初期設定＞キャンセル機能を利用しない場合は、表示されません。 |
| パスワード再発行画面 | パスワードの再発行を行うフォームです。 |
| メンテナンス画面 | 初期設定＞予約画面の状態が「公開しない」、もしくは「管理者のみが閲覧できる」状態の時のお客様に表示する画面です。 |
編集可能なCSSテンプレート
| 画面のスタイルシート | すべての画面の配色・文字サイズ・レイアウトなどが格納されているファイルです。 |
|---|
HTML、CSSの編集は、HTMLタグやCSSの知識が必要です。
編集後のデザインが崩れる可能性があるため、バックアップをとりながら慎重に編集してください。
もし修復困難な場合は、「初期状態を復元する」を押すことで、表示中のファイルの内容を、初期状態に戻すことが出来ます。
システムタグ一覧
HTMLファイル上で以下のシステムタグを記述することで、予約画面に表示する情報に置き換えることが出来る様になります。
登録されているシステムタグに関しては誤作動を避けるため、削除しない様にご注意ください。
全画面共通
| %%title%% | 予約画面のタイトルです。初期設定＞予約システムのタイトルに置き換わります。 |
|---|---|
| %%description%% | 予約画面の説明文です。初期設定＞予約システムの説明に置き換わります。 |
| %%theme%% | 予約画面のテーマカラーのクラスに置き換わります（後述：予約画面のテーマ） |
| %%message%% | エラーメッセージに置き換わります。 |
（プラン）選択画面
| %%type%% | 初期設定＞予約の種類で設定した名前に置き換わります。 |
|---|---|
| %%info%% | ここまでの画面で選択・入力した内容の情報ウィンドウに書き換わります。 |
| %%plan%% | プランの選択肢が表示されます。 |
（人数）選択画面
| %%unitname%% | 初期設定＞予約の単位の種類欄で設定した名前に置き換わります。 |
|---|---|
| %%unit%% | 初期設定＞予約の単位の単位欄で設定した名前に置き換わります。 |
| %%info%% | ここまでの画面で選択・入力した内容の情報ウィンドウに書き換わります。 |
| %%number%% | 予約人数の入力欄が表示されます。 |
| %%max%% | 予約人数の上限が表示されます。 |
予約日選択画面
| %%info%% | ここまでの画面で選択・入力した内容の情報ウィンドウに書き換わります。 |
|---|---|
| %%calendar%% | カレンダー設定：カレンダーのタイプで設定したカレンダーに書き換わります。 |
予約時間選択画面
| %%info%% | ここまでの画面で選択・入力した内容の情報ウィンドウに書き換わります。 |
|---|---|
| %%time%% | 予約時間の選択肢が表示されます。 |
フォーム入力画面
| %%info%% | ここまでの画面で選択・入力した内容の情報ウィンドウに書き換わります。 |
|---|---|
| %%form%% | 予約フォーム設定で設定したフォーム項目が表示されます。 |
確認画面
| %%info%% | ここまでの画面で選択・入力した内容の情報ウィンドウに書き換わります。 |
|---|---|
| %%confirm%% | 予約内容の確認が表示されます。 |
完了画面
| %%id%% | 登録された予約受付IDに置き換わります。 |
|---|
キャンセル画面
| %%cancel%% | 予約のキャンセルフォームが表示されます。 |
|---|
パスワード再発行画面
| %%reminder%% | パスワード再発行フォームが表示されます。 |
|---|
メンテナンス画面、画面のスタイルシート
ページ専用のシステムタグはありません。
予約画面のテーマ
予約画面のテーマカラーを設定します。
カラーパレットを選択し、「テーマを更新する」を押すことで反映されます。
6種類の配色は、それぞれ左から.color1〜.color6までクラスが割り当てられているので、「画面のスタイルシート」から配色の調整も可能です。
カラー1
カラー2
カラー3
カラー4
カラー5
カラー6