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