デザイン設定は、PC用デザイン、スマートフォン用デザイン、携帯用デザインの画面が異なっています。
PC版デザイン設定
PC用のデザイン設定について案内いたします。
デザインパターンについて
ヘッダー画像や利用テンプレート、カラムレイアウトの情報をまとめてデザインパターンとして保存しています。デザインパターンは複数保持でき、実際に利用しているデザインパターン以外の編集も行えます。（また、編集後のプレビューも出来ます。）
デザインパターンの編集
初期状態では、1デザインパターンが登録されています。
新規でデザインパターンを登録する方法を案内します。
デザインパターンの追加
１．ページ自動生成＞PC設定をクリックします。
→PC設定 デザイン画面が表示されます。
２．「デザインパターン追加」ボタンをクリックします。
→ヘッダー画像選択画面が表示されます。
３．ヘッダー画像を１つ選択し、最下部の「設定する」をクリックします。
→「テンプレートを追加しました。」表示されます。
デザインパターンの編集
デザインパターンでは、デザインテンプレート名変更、ヘッダー編集、テンプレート選択、カラムレイアウト設定が定義されています。それらを変更する場合にデザインパターン編集にて行ないます。
１．デザインパターン一覧で編集するパターンの「編集」ボタンをクリックします。
→デザインパターン編集画面が表示されます。
２．各設定を編集します。
デザインパターン名の編集
デザイン名欄に変更後の名前を入力し、「変更する」ボタンをクリックします。
→「デザイン名を変更しました」とメッセージが表示されます。
編集モードの切替
デザインパターンの編集を通常モードで行うか、上級者モードで行うかの選択肢です。
上級者モードでは、公開画面のCSS編集と一部HTMLの編集が行えます。（購入手続き画面を除く）
上級者モードでのHTML・CSSの編集については弊社サポート対象外となりますのでご了承ください。
切替を行う場合には、編集モードの切り替え欄で「上級者モードで編集」を選択し、「切り替え」ボタンをクリックします。
→上級者モードの編集画面になります。
上級者モードについて
既存のデザインテンプレート にとらわれない、より自由なショッピングページを構築頂くことが可能です。
※上級者モードについてはサポート対象外ですので予めご了承ください。
デモショップ
実際にCMSの上級者モードを利用して作成したデモショップをご用意いたしました。
TOPページとそれ以外のページで別々のHTMLを記述できるので、 デモショップのようにTOPページのデザインだけを大きく変更することも可能です。
デモショップ：
和菓子本舗
ヘッダー編集
| ヘッダー画像 | 公開ページヘッダー部分の背景画像の変更を行ないます。
|
|---|---|
| ショップ名表示（ロゴ画像） | ヘッダー部分に表示されるショップ名文字列の設定を行ないます。
|
| キャッチコピー | ヘッダー部分に表示されるキャッチコピーの設定を行ないます。
|
| ヘッダーの高さ | ヘッダーの高さの設定を行ないます。ヘッダー画像に併せて調整ください。 |
「変更する」ボタンをクリックします。
→「ヘッダー画像設定を変更しました。」とメッセージが表示されます。
テンプレート選択
テンプレートは、グローバルナビゲーション、見出し、行頭アイコン、背景色、ページ本体カラー、文字色がセットで変更されます。
「テンプレートを選びなおす」をクリックします。
→テンプレートリストが表示されます。
変更後のテンプレートを選択し、「設定する」ボタンをクリックします。
→「テンプレートを変更しました」とメッセージが表示されます。
背景色、カゴデザインの指定
「詳細設定（背景色等が変更可能です）」にチェックをします。
→サイト背景色、カゴ デザイン項目が表示されます。
| サイト背景 | テンプレートの背景色を変更する：指定の背景色を反映させる場合にチェックします。背景色：背景色を指定します。 |
|---|---|
| カゴ デザイン |
 |
→「テンプレートを変更しました」とメッセージが表示されます。
カラムレイアウト設定
| トップページ | トップページに出力するカラム数を設定します。 |
|---|---|
| トップページ以外 | トップページ以外に出力するカラム数を設定します。 |
→「カラムレイアウトを変更しました」と表示されます。
