デザイン設定について

デザイン設定は、PC用デザイン、スマートフォン用デザイン、携帯用デザインの画面が異なっています。

PC版デザイン設定

PC用のデザイン設定について案内いたします。

デザインパターンについて

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

デザインパターンの編集

初期状態では、1デザインパターンが登録されています。

新規でデザインパターンを登録する方法を案内します。

デザインパターンの追加

1.ページ自動生成>PC設定をクリックします。

→PC設定 デザイン画面が表示されます。

PC設定デザイン

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

デザインパターン追加

→ヘッダー画像選択画面が表示されます。

ヘッダー画像選択

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

ヘッダー画像選択

→「テンプレートを追加しました。」表示されます。

テンプレートを追加しました

デザインパターンの編集

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

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

デザインパターンの編集

→デザインパターン編集画面が表示されます。

デザインパターンの編集

2.各設定を編集します。

デザインパターン名の編集

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

デザインパターン名の編集

→「デザイン名を変更しました」とメッセージが表示されます。

デザイン名を変更しました

編集モードの切替

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

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

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

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

編集モード切り替え

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

上級者モードの編集画面

上級者モードについて

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

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

デモショップ

上級デモTOPページ

実際にCMSの上級者モードを利用して作成したデモショップをご用意いたしました。
TOPページとそれ以外のページで別々のHTMLを記述できるので、 デモショップのようにTOPページのデザインだけを大きく変更することも可能です。

デモショップ: 和菓子本舗

※実際には存在しない店舗ですので、商品のご購入は出来ません。

 

ヘッダー編集

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

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

→「ヘッダー画像設定を変更しました。」とメッセージが表示されます。

ヘッダー画像設定を変更しました

テンプレート選択

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

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

→テンプレートリストが表示されます。

テンプレート選択

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

テンプレート選択

→「テンプレートを変更しました」とメッセージが表示されます。

テンプレートを変更しました

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

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

→サイト背景色、カゴ デザイン項目が表示されます。

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

→「テンプレートを変更しました」とメッセージが表示されます。

テンプレートを変更しました

カラムレイアウト設定

ページ自動生成 カラムレイアウト設定項目表
トップページ トップページに出力するカラム数を設定します。
トップページ以外 トップページ以外に出力するカラム数を設定します。

 

→「カラムレイアウトを変更しました」と表示されます。

カラムレイアウトを変更しました