デザインパターン選択/テンプレート編集基本機能

デザインパターン選択設定

カラー設定やコンテンツ登録、配置などの情報をデザインパターンとして保存し、実際に公開するパターンを選択することが出来ます。

ページ自動生成>レスポンシブ設定

1.管理画面「ページ自動生成」>レスポンシブ設定をクリックします

2.公開するパターンを選択し、「設定する」をクリックします

デザインパターン名 デザインパターン追加(詳細はこちら)時に設定した名称が記載されます。

鉛筆マークをクリックすることで名称の変更が可能です。 鉛筆マーク 名称を入力後、チェックマーク(下図①)をクリックすることで変更を適用し、マイナスマーク(下図②)をクリックすることで変更を保留にします。 チェックマーク/マイナスマーク

モード 設定されているモードが表示されます。
モードは「標準」と「上級(詳細はこちら)」の2種類です。
操作 パターン選択以外の操作を行うことが出来ます。
編集
クリックするとパターン編集画面へ遷移します。
複製
クリックするとパターンを複製します。
削除
クリックするとパターンが削除されます。

利用中のデザインパターンは「削除」ボタンが表示されません。

削除されたデザインパターンを元に戻すことはできません。

デザインパターン追加

新しいデザインパターン追加することができます。

1.管理画面「ページ自動生成」>レスポンシブ設定>デザインパターン追加をクリックします

デザインパターン追加

2.必要情報の入力・選択をし、「設定」をクリックします

必要情報入力>設定
名称 パターンの名称を入力します。全半角50文字
テンプレート
デフォルトから作成 デフォルトのテンプレートから選択します。

テンプレートは後から変更することが出来ません。

登録済みのデザインを複製 登録済みのデザインテンプレートのデザイン設定を複製します。

上級者モード(詳細はこちら)を有効にしていた場合はその内容も複製されます。

コンテンツ設定
デフォルトから選択 コンテンツの配置について選択します。
標準設定
標準的なコンテンツの配置で作成されます。
PC設定から取り込み
PC設定に設定されているコンテンツの内容と配置を取り込みます。

一部コンテンツは取り込むことが出来ません。

登録済みのデザインから設定 登録済みのデザインパターンに設定されたコンテンツの内容と配置を複製して設定します。

テンプレート編集基本機能

「テンプレート編集画面」の基本機能についてご案内します。

タイトルリンクボタン

それぞれのボタンをクリックすることで、「テンプレート選択画面」や「お店のページ」へ遷移することができます。

タイトルリンクボタン
テンプレート選択へ
(矢印アイコン)
クリックすると、テンプレート選択画面へ遷移します。 テンプレート選択へ
お店のページへ
(家アイコン)
クリックすると、基本設定>TOP>ショップ情報確認に表示されているリンク先ページへ遷移します。

モード切替>公開モードで「PC/スマホサイトを公開」を選択している場合は、「お店のページへ」アイコンは非表示になります。 お店のページへ

タブメニューをクリックすると、それぞれの設定画面が表示されます。

タブメニュー
デザイン テンプレートの色やフォント等のデザイン設定が出来ます。

詳細はこちら

コンテンツ配置 作成したコンテンツを配置することが出来ます。

詳細はこちら

商品一覧 商品一覧ページのレイアウトや項目等を設定することが出来ます。

詳細はこちら

商品詳細 商品詳細ページの項目名変更や項目の表示設定をすることが出来ます。

詳細はこちら

各種ページ 特定商取引に基づく表記等の基本的なページや自由にページを作成することが出来るフリーページなどを作成・編集することが出来ます。

詳細はこちら

コンテンツ設定 サイト内に配置するコンテンツを作成することが出来ます。

詳細はこちら

カスタムCSS

カスタムCSSとは

カスタムCSSは任意のCSSを追加したい場合に使用できる設定です。

カスタムCSSは通常出力されるCSSの最後尾に追記されます。

HTML・CSSの記述方法や、カスタムCSSに記載した内容についてはサポート対象外です。
なお、テンプレートのid/class表は「デザイン」タブのHTML編集モードの切替設定より「上級者モードに切替」ボタンをクリックした際に表示される画面よりご取得可能です。

使用方法

1.テンプレート編集画面>カスタムCSSをクリックします

カスタムCSS

2.「利用する」を選択し、CSSを入力後、「設定する」をクリックします

カスタムCSS>利用する
カスタムCSSの利用 カスタムCSSを利用する場合は、「利用する」を選択します。
カスタムCSS 任意で追加したいCSSを入力します。

プレビュー

編集中のテンプレートを3つの方法でプレビューできます。

プレビュー
PC クリックすると、青枠内でPCサイズのプレビューが表示されます。
スマホ クリックすると、青枠内でスマホサイズのプレビューが表示されます。
別窓 クリックすると、プレビューが別窓で表示されます。