デザインパターン設定

デザイン設定は、PC用デザイン、スマートフォン用デザインでそれぞれ設定方法がことなります。

目次

• PC版デザインパターン設定
• デザインパターンの追加
• デザインパターンの編集
• デザイン名変更
• 編集モードの切替
• ヘッダー編集
• テンプレート選択
• 上級者モードについて
• スマートフォン版デザイン設定
• デザインパターンの追加・編集
• デザイン名変更
• 編集モードの切替
• ヘッダー編集
• テンプレート選択

PC版デザインパターン設定

ヘッダー画像や利用テンプレート、カラムレイアウトの情報をまとめてデザインパターンとして保存しています。デザインパターンは複数保持でき、実際に利用しているデザインパターン以外の編集も行えます。（また、編集後のプレビューも出来ます。）

初期状態では、1デザインパターンが登録されています。デザインパターンは最大10個まで登録することが可能です。

デザインパターンの追加

１．管理画面「サイト作成」＞PC設定をクリックすると、デザイン画面が表示されます。

２．「デザインパターン追加」ボタンをクリックします。

３．ヘッダー画像を１つ選択し、最下部の「設定する」をクリックします。

デザインパターンの編集

デザインパターンでは、デザインテンプレート名変更、ヘッダー編集、テンプレート選択、カラムレイアウト設定が定義されています。それらを変更する場合にデザインパターン編集にて行ないます。

１．デザインパターン一覧で編集するパターンの「編集」ボタンをクリックします。

２．各設定を編集します。

デザイン名変更

デザイン名欄に変更後の名前を入力し、「変更する」ボタンをクリックします。

編集モードの切替

デザインパターンの編集を通常モードで行うか、上級者モードで行うかの選択肢です。
上級者モードでは、公開画面のCSS編集と一部HTMLの編集が行えます。（購入手続き画面を除く）
上級者モードでのHTML・CSSの編集については弊社サポート対象外となりますのでご了承ください。
切替を行う場合には、編集モードの切り替え欄で「上級者モードで編集」を選択し、「切り替え」ボタンをクリックします。

→上級者モードの編集画面になります。

上級者モードの詳細についてはこちら

ヘッダー編集

ページ自動生成　ヘッダー編集画面　項目表

ヘッダー画像	公開ページヘッダー部分の背景画像の変更を行ないます。 ヘッダー画像を選びなおす 予め用意されている画像からヘッダー画像を選択する際に利用します。こちらからヘッダー画像の変更を行うと、ヘッダー内文字色や表示位置が画像に併せて変更されます。 オリジナル画像を利用する 自身で用意した画像をヘッダー画像とする際に利用します。なお、自身で用意した画像を利用するには、画像ライブラリへの画像登録が必要です。（推奨画像サイズ　横970px、縦150px）
ショップ名表示（ロゴ画像）	ヘッダー部分に表示されるショップ名文字列の設定を行ないます。 表示位置、文字色 ヘッダーのショップ名表示位置と文字色を指定する際に利用します。 画像挿入（ライブラリ） 自身で用意した画像をショップ名の代わりに表示する際に利用します。なお、自身で用意した画像を利用するには、画像ライブラリへの画像登録が必要です。
キャッチコピー	ヘッダー部分に表示されるキャッチコピーの設定を行ないます。 表示位置、文字色 ヘッダーのキャッチコピー表示位置と文字色を指定する際に利用します。
ヘッダーの高さ	ヘッダーの高さの設定を行ないます。ヘッダー画像に併せて調整ください。

「変更する」ボタンをクリックします。

テンプレート選択

テンプレートは、グローバルナビゲーション、見出し、行頭アイコン、背景色、ページ本体カラー、文字色がセットで変更されます。

1．「テンプレートを選びなおす」をクリックします。

2．変更後のテンプレートを選択し、「設定する」ボタンをクリックします。

3．背景色、カゴデザインの指定

「詳細設定（背景色等が変更可能です）」にチェックをします。

カゴデザイン　項目表

サイト背景	テンプレートの背景色を変更する：指定の背景色を反映させる場合にチェックします。背景色：背景色を指定します。
カゴ　デザイン	カゴデザインを変更する 指定の色を反映させる場合にチェックします。 カゴ表示部分 （1）背景色、（2）文字色を指定します。 ボタンデザイン （3）背景色、（4）文字色、（5）枠線色を指定します。

カラムレイアウト設定

ページ自動生成　カラムレイアウト設定項目表

トップページ	トップページに出力するカラム数を設定します。
トップページ以外	トップページ以外に出力するカラム数を設定します。

上級者モードについて

既存のデザインテンプレート にとらわれない、より自由なショッピングページを構築頂くことが可能です。

※上級者モードについてはサポート対象外ですので予めご了承ください。

デモショップ

スマートフォン版デザイン設定

ヘッダー画像や利用テンプレートの情報をまとめてデザインパターンとして用意しています。デザインパターンはPC設定と同様に複数保持でき、実際に利用しているパターン以外の編集も行えます。（また、編集後のプレビューもできます。）

初期状態では、1デザインパターンが登録されています。デザインパターンは最大10個まで登録することが可能です。

デザインパターンの追加

１．管理画面「サイト作成」＞スマートフォン設定をクリックしデザイン画面が表示されます。

２．「デザインパターン追加」ボタンをクリックします。

3.テンプレートを１つ選択し、最下部の「設定する」ボタンをクリックします。

デザイン名変更

デザイン名欄に変更後の名前を入力し、「変更する」ボタンをクリックします。

編集モードの切替

デザインパターンの編集を通常モードで行うか、上級者モードで行うかの選択肢です。

上級者モードでは、公開画面のCSS編集と一部HTMLの編集が行えます。（購入手続き画面を除く）

上級者モードでのHTML・CSSの編集については弊社サポート対象外となりますのでご了承ください。

切替を行う場合には、編集モードの切り替え欄で「上級者モードで編集」を選択し、「切り替え」ボタンをクリックします。

→上級者モードの編集画面になります。

ヘッダー編集

ページ自動生成　ヘッダー編集画面　項目表

ショップ名表示（ロゴ画像）	ヘッダー部分に表示されるショップ名文字列の設定を行ないます。 文字色、背景色 ヘッダーのショップ名文字色と背景色を指定する際に利用します。 ロゴ画像画像挿入（オリジナル画像） 自身で用意した画像をショップ名の代わりに表示する際に利用します。 推奨サイズ：横200px、縦50px

「変更する」ボタンをクリックします。

テンプレート選択

テンプレートは、グローバルナビゲーション、見出しがセットで変更されます。

１．「テンプレートを選びなおす」をクリックします。

テンプレート選択

２．変更後のテンプレートを選択し、「設定する」ボタンをクリックします。