レスポンシブサイトの細かいデザイン設定を行うことが出来ます。
設定手順
1.管理画面「サイト作成」＞レスポンシブ設定＞「編集」をクリックします
2.デザインタブをクリックします
3.適宜デザイン設定を行うと、設定が即時反映されます
「TOP」と「商品詳細」（上図青枠）を切り替えることにより、プレビューがそれぞれのページに切り替わります。デザイン設定箇所に応じて、プレビューを切り替えてご確認ください。
カラー設定
レスポンシブサイトの配色を設定できます。
配色サンプルから選ぶ
機能としてご用意している配色サンプルを選択することで、おすすめの配色が適用されます。
1.カラー設定＞配色サンプルから選ぶをクリックします
2.ご希望のサンプルを選択します
サンプルを選択すると、プレビューに選択結果が即時反映されます。
手動で詳細設定を行う
それぞれの項目に対して、ショップ様自身で配色を指定できます。
「TOP」と「商品詳細」それぞれで配色が指定できる項目が異なります。
1.カラー設定＞手動で詳細設定を行うをクリックします
2.それぞれの項目にご希望の色を選択します
色の選択はカラーパレットとカラーコードの入力、どちらからでも行うことが出来ます。
選択した配色はプレビューへ即時反映されます。
カラー設定アシストについて
カラー設定アシストにてカラーセットを選択し、「反映」ボタンをクリックすると、詳細設定をカラーセットの内容で更新することが可能です。
フォント設定
使用するフォントを選択することが出来ます。
1.フォント設定＞使用するフォントを選択します
選択したフォントはプレビューへ即時反映されます。
ショップロゴ
ショップロゴ画像を登録・削除することが出来ます。
新規登録方法
1.ショップロゴ＞画像挿入（ライブラリ）をクリックします
2.画像アップロード＞ファイルをドロップもしくは「ファイルを選択してください」をクリックします
「分類」欄にて「ショップロゴ」が選択されている状態か確認してください。
3.画像一覧＞挿入をクリックします
「挿入」をクリックすると、編集画面へ遷移し、ショップロゴがプレビューへ反映されます。
登録した画像はヘッダーとフッターの両方に反映されます。
ヘッダーとフッターで異なる画像を登録することはできません。
画像削除方法
1.ショップロゴ＞画像削除をクリックします
画像削除を行うと、プレビューに即時反映されます。
ショップロゴ画像が未設定の場合、ヘッダーには管理画面「サイト作成」＞基本設定＞ショップ設定＞ショップ名が表示されます。フッターにはショップ名は反映されず、非表示となります。
HTML編集モードの切替
現在のHTML編集モードの確認（上図①）とモードの切り替え（上図②）を行うことが出来ます。
| 標準モード | デフォルトの構成のまま、色やフォントなどの設定にある個所のみ、自由に変更することが出来るモードです。 |
|---|---|
| 上級者モード | HTML・CSSを自由に編集することが出来ます。（上級者モードの詳細はこちら）
HTML・CSSの編集はサポート対象外です。 |
標準モードから上級者モードへの切替手順
1.HTML編集モードの切替＞上級者モードに切替をクリックします
2.切替をクリックします
id Class表は「スタイルシート（id class表）ダウンロード」（下図青枠）より取得することが出来ます。
3.上級者モードに切り替わります
上級者モードの詳細はこちら
上級者モードから標準モードへの切替手順
id Class表は「スタイルシート（id class表）」（上図青枠）より取得することが出来ます。
1.HTML編集モードの切替＞標準モードに切替をクリックします
2.標準モードへ切り替わります
上級者モード操作方法
上級者モードでは、HTML・CSSを編集することができます。
既存のテンプレートにとらわれない、より自由なショッピングサイトの構築をご希望の場合にご利用いただけるモードです。
ショップロゴは、標準モードと同じ仕様です。
| 現在のHTML編集モード | 現在編集中のモードの確認と標準モードへの切替を行うことが出来ます。 詳細はこちら |
|---|---|
| HTML編集 | 「HTML編集」ボタンをクリックすることで、上級者モードHTML編集画面を表示することが出来ます。
HTML・CSSの編集につきましては、サポート対象外です。 |
| CSS編集 | 「CSS編集」ボタンをクリックすることで、上級者モードCSS編集画面を表示することが出来ます。
HTML・CSSの編集につきましては、サポート対象外です。 |
