クライゼルのサイトでは以下の２種類のページを作成することができます。
- 通常ページ
ページにアクセスすると全員共通で１つの画面を表示します。 - アタッチメントページ
「アタッチメント」を使ってページの表示をカスタマイズします。
このページでは各ページの基本的な作成方法を説明します。
通常ページを作成する
操作手順
1 ［サイト］＞［サイト管理］を選択します。
2 [データベース一覧画面] が表示されたら[サイト一覧]を選択します。
3 [サイト一覧画面] が表示されたら[ページ一覧]を選択します。
4 【ページ作成】を選択し、【ページ種別】を「通常ページを作成する」を選択し[次へ]をクリックします。
5 【ページ名称】を入力し【格納するエリア】を選択後、【公開】と【公開日時】を設定し[次へ]をクリックします。
6 ページリストに表示されたページ名称を選択します。
空白のテキストエリアにページのソースコードを設定して[保存]をクリックします。
画面右上の[設定]タブを選択します。
7 ページURLからページにアクセスください。
アタッチメントページを作成する
操作手順
1 【ページ作成】を選択し、【ページ種別】を「アタッチメントページを作成する」を選択し[次へ]をクリックします。
［ページ種別作成］画面
2 【ページ設定】より【ページ名称】を入力し【格納するエリア】選択後、【公開】や【公開日時】を設定し[次へ]をクリックします。
［ページ設定作成］画面
3 【タイプ選択】より【アタッチメントタイプ】を【見せるクーポン/押せるクーポン】より選択し[次へ]をクリックします。
クーポンページを作成する前提の仕様となっておりますが、ページの用途に関わらずどちらか選択する必要がございます。
［タイプ選択作成］画面
参考
- 見せるクーポンを選択した場合、有効期限、画像生成、抽出条件（会員限定エリアに格納し場合のみ）のアタッチメントをご利用いただけます。
- 押せるクーポンを選択した場合、有効期限、画像生成、有効回数（会員限定エリアに格納し場合のみ）、抽出条件（会員限定エリアに格納し場合のみ）のアタッチメントをご利用いただけます。
4 【機能選択】よりアタッチメントを選択し[次へ]をクリックします。
［機能選択作成］画面
［設定完了後］画面
アタッチメントページを設定する
アタッチメントページにて利用する画面を設定します。
操作手順
1 [確認画面a]を選択しページの作成を行います。[サンプルソース設定b]後[<body></body>c]内を編集し、[保存d]します。作成したイメージは[プレビュー]で確認する事が出来ます。
[確認画面作成］画面
［プレビュー］画面
2 [確認画面]と同様に[有効期間(期間外)]ページを作成します。[有効期間(期間外)a][サンプルソース設定b][<body></body>c]内編集、[保存d]を行い[プレビュー]します。
［確認画面作成］画面
［プレビュー］画面
参考
[リッチエディタ]リッチエディタを使うことでデザインフォームを簡単に作成することができます。また、詳細まで設定したい場合は、HTMLソースを編集する事ができます。
［リッチエディタツール］の詳細画面（例）
| ［元に戻す］ | 変更（装飾）した内容を1つ前の状態に戻します。 |
| ［やり直す］ | 変更（装飾）した内容を1つ先の状態にやり直します。 |
| ［フォント］ | フォントを指定します。 |
| ［フォントサイズ］ | 文字の大きさを変更します。 |
| ［太字］ | 文字を太字にします。 |
| ［斜体］ | 文字を斜体にします。 |
| ［下線］ | 文字に下線を付けます。 |
| ［打消し線］ | 文字に取消線を付けます。 |
| ［下付き・上付き］ | 文字を上付き、または下付きにします。 |
| ［文字色］ | 文字の色を変更します。 |
| ［文字の背景色］ | 文字に背景色を設定することができます。 |
| ［書式を解除］ | 変更した文字を選択した状態でこのボタンを押すと設定した装飾が解除できます。 |
| ［切り取り］ | 文字や画像を切り取ります。 |
| ［コピー］ | 文字や画像を複製します。 |
| ［貼り付け］ | 複製した（切り取った）画像や文字を貼り付けます。 |
| ［すべて選択］ | 内容を全選択します。 |
| ［段落の書式］ | 段落を見出しとして設定します。 |
| ［左揃え・右揃え・ 中央揃え・両端揃え］ |
文字や画像の横並び位置を指定します。 |
| ［番号付きリスト］ | 番号付きの箇条書きを作成します。 |
| ［番号無しリスト］ | 番号のない箇条書きを作成します。 |
| ［リンク挿入/編集］ | 文字や画像にリンクを設定します。 |
| ［リンクを解除］ | 設定したリンク情報を解除します。 |
| ［イメージ］ | 画像を挿入します。画像URLは絶対パスで指定してください。 |
| ［表］ | 表組（table）を挿入します。 |
| ［水平線］ | 区切り線を挿入します。 |
| ［ブロック表示］ | < div> や< p> などのブロック表示にします。 |
| ［ソース］ | HTMLソースとプレビューを切り替えます。 |
アタッチメントページを追加/削除する
クーポンページにて利用するアタッチメントを設定します。
操作手順
1 【ページ作成】画面に戻り、[アタッチメント機能(有効期限/画像生成)]の追加/削除を行います。
［ページ作成設定］画面
2 [公開※]を公開しないにチェックします。
3 利用するアタッチメントにチェックを入れ、利用しないアタッチメントはチェックを外します。
4 [公開※]を公開するにチェックし、保存をクリックします。
注意
参考：動画マニュアル サイト機能のアタッチメント紹介
サイトのアタッチメントである、有効期限、画像生成、有効回数、抽出条件について、実際の設定画面でご紹介。（約7分45秒）
参考：動画マニュアル アタッチメントの活用例
会員限定コンテンツの出し分けや、会員限定エリアに期限を設けてコンテンツを配布するカスタマイズ例をご紹介。（約3分）
ページを設定する
クーポンページにて利用するアタッチメントの種類やタイプを設定します。
操作手順
1 【ページ作成】を選択し、【ページ種別】を「アタッチメントページを作成する」を選択し[次へ] をクリックします。
［ページ種別作成］画面
2 【ページ設定】より【ページ名称】を入力し【格納するエリア】を「会員限定」に、続いて【公開日時】を設定し[次へ]をクリックします。
［ページ設定作成］画面
3 【タイプ選択】より【アタッチメントタイプ】を【見せるクーポン/押せるクーポン】より選択し[次へ]をクリックします。
［タイプ選択作成］画面
4 【機能選択】より「有効期限/画像生成/有効回数/抽出条件」のいずれかを追加、設定し[次へ]をクリックします。
［機能選択作成］画面
［設定完了後］画面
参考
- アタッチメント「押せるクーポン」のページ作成時に、機能選択で「有効回数」を設定しないと、クーポン利用率や利用回数を見ることができません。
画面を設定する
クーポンページにて利用する画面を設定します。
操作手順
1 [使用画面a] を選択しページの作成を行います。[サンプルソース設定b] 後[<body></body>c] 内を編集し、[保存d] します。作成したイメージは[プレビュー] で確認する事が出来ます。
確認画面作成］画面
［プレビュー］画面
※生成した画像を入力するには、[差込記号e] より「アタッチメント」→「[画像生成]生成画像」を
選択すると、画像を差し込む事が出来ます。
2 [使用画面]と同様に[確認画面]ページを作成します。[確認画面a][サンプルソース設定b][<body></body>c]内編集、[保存d]を行い[プレビュー] します。
［確認画面作成］画面
［プレビュー］画面
3 [使用画面] と同様に[有効期間(期間外)] ページを作成します。[有効期間(期間外)a][サンプルソース設定b][<body></body>c] 内編集、[保存d] を行い[プレビュー] します。
[有効期間( 期間外作成)］画面
［プレビュー］画面
4 [使用画面] と同様に[有効回数(超過画面)] ページを作成します。[有効回数(超過画面a][サンプルソース設定b][<body></body>c] 内編集、[保存d] を行い[プレビュー] します。
［有効回数( 超過画面) 作成］画面
［プレビュー］画面
5 [使用画面] と同様に[抽出条件(対象外画面)] ページを作成します。[抽出条件(対象外画面a][サンプルソース設定b][<body></body>c] 内編集、[保存d] を行い[プレビュー] します。
［抽出条件(対象外画面) 作成］画面
［プレビュー］画面
参考
- [リッチエディタ]リッチエディタを使うことでデザインフォームを簡単に作成することができます。また、詳細まで設定したい場合は、HTMLソースを編集する事ができます。
［リッチエディタツール］の詳細画面（例）
| ［元に戻す］ | 変更（装飾）した内容を1つ前の状態に戻します。 |
| ［やり直す］ | 変更（装飾）した内容を1つ先の状態にやり直します。 |
| ［フォント］ | フォントを指定します。 |
| ［フォントサイズ］ | 文字の大きさを変更します。 |
| ［太字］ | 文字を太字にします。 |
| ［斜体］ | 文字を斜体にします。 |
| ［下線］ | 文字に下線を付けます。 |
| ［打消し線］ | 文字に取消線を付けます。 |
| ［下付き・上付き］ | 文字を上付き、または下付きにします。 |
| ［文字色］ | 文字の色を変更します。 |
| ［文字の背景色］ | 文字に背景色を設定することができます。 |
| ［書式を解除］ | 変更した文字を選択した状態でこのボタンを押すと設定した装飾が解除できます。 |
| ［切り取り］ | 文字や画像を切り取ります。 |
| ［コピー］ | 文字や画像を複製します。 |
| ［貼り付け］ | 複製した（切り取った）画像や文字を貼り付けます。 |
| ［すべて選択］ | 内容を全選択します。 |
| ［段落の書式］ | 段落を見出しとして設定します。 |
| ［左揃え・右揃え・ 中央揃え・両端揃え］ |
文字や画像の横並び位置を指定します。 |
| ［番号付きリスト］ | 番号付きの箇条書きを作成します。 |
| ［番号無しリスト］ | 番号のない箇条書きを作成します。 |
| ［リンク挿入/編集］ | 文字や画像にリンクを設定します。 |
| ［リンクを解除］ | 設定したリンク情報を解除します。 |
| ［イメージ］ | 画像を挿入します。画像URLは絶対パスで指定してください。 |
| ［表］ | 表組（table）を挿入します。 |
| ［水平線］ | 区切り線を挿入します。 |
| ［ブロック表示］ | < div> や< p> などのブロック表示にします。 |
| ［ソース］ | HTMLソースとプレビューを切り替えます。 |
アタッチメントページを追加/削除する
クーポンページにて利用するアタッチメントを設定します。
操作手順
1 【ページ作成】画面に戻り、[アタッチメント機能(有効期限/画像生成)]の追加/削除を行います。
［ページ作成設定］画面
2 [公開※]を公開しないにチェックします。
3 利用するアタッチメントにチェックを入れ、利用しないアタッチメントはチェックを外します。
4 [公開※]を公開するにチェックし、保存をクリックします。
重要
- 新たにアタッチメントページを追加した場合は、「ページを公開する」/ 「画面を設定する」を参照し、アタッチメント機能の設定を行ってください。
参考：動画マニュアル サイト機能のアタッチメント紹介
サイトのアタッチメントである、有効期限、画像生成、有効回数、抽出条件について、実際の設定画面でご紹介。（約7分45秒）
参考：動画マニュアル アタッチメントの活用例
会員限定コンテンツの出し分けや、会員限定エリアに期限を設けてコンテンツを配布するカスタマイズ例をご紹介。（約3分）
ログイン/ログアウトページを公開する
操作手順
1 [ログインページa]を選択しページの作成を行います。[サンプルソース設定b]後[<body></body>c]内を編集し、[保存d]します。
[ ログインページ作成］画面
［プレビュー］画面
2 【設定】タブを選択し、設定画面に進み、[ページ名称][別名URL][公開][公開日時][パスワード項目][認証後に表示するページ][ログインボタン名称][認証失敗時のメッセージ]の設定を行い、保存をクリックします。
［ログインページ作成設定］画面
3 [ログインページ]と同様に[ログアウトページa]を選択しページの作成を行います。[サンプルソース設定b] 後[<body></body>c]内を編集し、[保存d]します。
[ログアウトページ作成］画面
4 【設定】タブを選択し、設定画面に進み、[ページ名称][別名URL][公開][公開日時]の設定を行い、保存をクリックします。
［ログアウトページ作成設定］画面
［プレビュー］画面
重要
- [ログイン] 画面作成時、パスワード項目を複数持っている場合、サンプルソースの差込を行っても、正常にログイン出来ないページが作成されますので、先にページ設定より、使用するパスワード項目を選択する必要があります。
- [ログイン] 画面作成時、重複キーが設定されていない場合、サンプルソースの差込を行っても、正常にログイン出来ないページが作成されますので、必ず重複項目の設定を行ってください。
参考
- [リッチエディタ]リッチエディタを使うことでデザインフォームを簡単に作成することができます。また、詳細まで設定したい場合は、HTMLソースを編集する事ができます。
［リッチエディタツール］の詳細画面（例）
| ［元に戻す］ | 変更（装飾）した内容を1つ前の状態に戻します。 |
| ［やり直す］ | 変更（装飾）した内容を1つ先の状態にやり直します。 |
| ［フォント］ | フォントを指定します。 |
| ［フォントサイズ］ | 文字の大きさを変更します。 |
| ［太字］ | 文字を太字にします。 |
| ［斜体］ | 文字を斜体にします。 |
| ［下線］ | 文字に下線を付けます。 |
| ［打消し線］ | 文字に取消線を付けます。 |
| ［下付き・上付き］ | 文字を上付き、または下付きにします。 |
| ［文字色］ | 文字の色を変更します。 |
| ［文字の背景色］ | 文字に背景色を設定することができます。 |
| ［書式を解除］ | 変更した文字を選択した状態でこのボタンを押すと設定した装飾が解除できます。 |
| ［切り取り］ | 文字や画像を切り取ります。 |
| ［コピー］ | 文字や画像を複製します。 |
| ［貼り付け］ | 複製した（切り取った）画像や文字を貼り付けます。 |
| ［すべて選択］ | 内容を全選択します。 |
| ［段落の書式］ | 段落を見出しとして設定します。 |
| ［左揃え・右揃え・ 中央揃え・両端揃え］ |
文字や画像の横並び位置を指定します。 |
| ［番号付きリスト］ | 番号付きの箇条書きを作成します。 |
| ［番号無しリスト］ | 番号のない箇条書きを作成します。 |
| ［リンク挿入/編集］ | 文字や画像にリンクを設定します。 |
| ［リンクを解除］ | 設定したリンク情報を解除します。 |
| ［イメージ］ | 画像を挿入します。画像URLは絶対パスで指定してください。 |
| ［表］ | 表組（table）を挿入します。 |
| ［水平線］ | 区切り線を挿入します。 |
| ［ブロック表示］ | < div> や< p> などのブロック表示にします。 |
| ［ソース］ | HTMLソースとプレビューを切り替えます。 |