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

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

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

1.管理画面「サイト作成」＞レスポンシブ設定をクリックします

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

デザインパターン名	デザインパターン追加（詳細はこちら）時に設定した名称が記載されます。鉛筆マークをクリックすることで名称の変更が可能です。名称を入力後、チェックマーク（下図①）をクリックすることで変更を適用し、マイナスマーク（下図②）をクリックすることで変更を保留にします。
モード	設定されているモードが表示されます。モードは「標準」と「上級（詳細はこちら）」の2種類です。
操作	パターン選択以外の操作を行うことが出来ます。編集クリックするとパターン編集画面へ遷移します。複製クリックするとパターンを複製します。削除クリックするとパターンが削除されます。利用中のデザインパターンは「削除」ボタンが表示されません。削除されたデザインパターンを元に戻すことはできません。

デザインパターン追加

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

1.管理画面「サイト作成」＞レスポンシブ設定＞デザインパターン追加をクリックします

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

テンプレート
名称	パターンの名称を入力します。全半角50文字
デフォルトから作成	デフォルトのテンプレートから選択します。テンプレートは後から変更することが出来ません。 Default 2カラムのテンプレートです。 Defaultテンプレートを使用したデモサイトはこちら Sweets 1カラムのテンプレートです。 Sweetsテンプレートを使用したデモサイトはこちら School 2カラムのテンプレートです。ヘッダーメニューに検索フォームが常に表示されています。 Schoolテンプレートを使用したデモサイトはこちら
登録済みのデザインを複製	登録済みのデザインテンプレートのデザイン設定を複製します。上級者モード（詳細はこちら）を有効にしていた場合はその内容も複製されます。
コンテンツ設定
デフォルトから選択	コンテンツの配置について選択します。標準設定標準的なコンテンツの配置で作成されます。 PC設定から取り込み PC設定に設定されているコンテンツの内容と配置を取り込みます。一部コンテンツは取り込むことが出来ません。
登録済みのデザインから設定	登録済みのデザインパターンに設定されたコンテンツの内容と配置を複製して設定します。

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

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

タイトルリンクボタン

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

テンプレート選択へ（矢印アイコン）	クリックすると、テンプレート選択画面へ遷移します。
お店のページへ（家アイコン）	クリックすると、基本設定＞TOP＞ショップ情報確認に表示されているリンク先ページへ遷移します。モード切替＞公開モードで「PC/スマホサイトを公開」を選択している場合は、「お店のページへ」アイコンは非表示になります。

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

デザイン	テンプレートの色やフォント等のデザイン設定が出来ます。詳細はこちら
コンテンツ配置	作成したコンテンツを配置することが出来ます。詳細はこちら
商品一覧	商品一覧ページのレイアウトや項目等を設定することが出来ます。詳細はこちら
商品詳細	商品詳細ページの項目名変更や項目の表示設定をすることが出来ます。詳細はこちら
基本ページ	特定商取引に基づく表記等の基本的なページを編集することが出来ます。詳細はこちら
フリーページ	自由にページを作成することが出来るフリーページなどを作成・編集することが出来ます。詳細はこちら
コンテンツ設定	サイト内に配置するコンテンツを作成することが出来ます。詳細はこちら

カスタムCSS

カスタムCSSとは

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

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

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

使用方法

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

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

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

プレビュー

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

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

HTMLエディタ

上部のアイコンを利用することで、本文の装飾等を行うことができるエディタです。

入力欄部分で入力内容のプレビューができますが、実際に公開した際にサイト側のスタイルが影響し、プレビューと表示が異なる場合があります。必ずサイト適用後の状態を確認してください。

改行と改段落

HTMLエディタには、改行と改段落の2つの操作があります。

■改行

Enterキーで改行することができます。
「左揃え・中央揃え・右揃え」などの一部機能では、改行した文章全てにそのデザインが適用されます。

HTMLコードでは、＜br＞で表されます。

■改段落

Shift+Enterキーで改段落することができます。

HTMLコードでは、＜p＞と＜/p＞で囲まれます。

ソースコード

クリックするとソースコード入力欄が表示されます。

1.＜＞マークをクリックします

2.HTMLで入力し、「保存」をクリックします

「取消」をクリックすることで、保存していない入力内容を保存せずソースコード入力欄を閉じることが可能です。既に保存済みの内容に関しては、取消されません。

元に戻す・やり直し

「元に戻す」（下図①）では一つ前の状態に戻すことができ、「やり直す」（下図②）では元に戻した後に一つ先の編集状態に進めることができます。

段落

選択した箇所に選択したデザインを適用することが出来ます。
プルダウンをクリックすることで、複数の選択肢から選択することができます。

■見出し

選択した箇所を見出しに変更できます。

■インライン

「太字」や「斜体」といった効果を選択した文章に適用することができます。

選択後の表示について

「斜体」は英数字のみ適用することができます。

■ブロック

段落	文章が＜p＞タグで入力されます。
引用	文章が＜blockquote＞タグで入力されます。
分割	文章が＜div＞タグで入力されます。
整形済みテキスト	文章が＜pre＞タグで入力されます。

選択後の表示について

■配置

選択部分をそれぞれの位置に揃えることができる機能です。
両端揃えは段落ごとに文章を左右の幅でそろえることができます。

左揃え・中央揃え・右揃えの例はこちら

書式をクリア

選択した部分のスタイルやHTMLタグ情報をリセットできる機能です。

一部リセットできないスタイル・タグがございます。

左揃え・中央揃え・右揃え

選択部分をそれぞれの位置に揃えることができる機能です。

①左揃え	選択した文章を左寄せにすることができます。
②中央揃え	選択した文章を中央寄せにすることができます。
③右揃え	選択した文章を右揃えにすることができます。

改行（Enter）と改段落（Shift+Enter）の影響について
改行（Enter）した文章はまとめて左揃え・中央揃え・右揃えが適用されてしまいます。
揃え方を変えたい場合、行ごと改段落（Shift+Enter）する必要があります。

選択後の表示について

行の高さ

行の高さを1、1.1～1.5、2から選ぶことができる機能です。

太字

選択した文章を太字にすることができる機能です。

選択後の表示について

斜体

選択した文章を斜体にすることができる機能です。

斜体にできるのは半角英数字のみです。

選択後の表示について

下線

選択した文章に下線をつけることができる機能です。

選択後の表示について

取消線

選択した文章に取消線を引くことができる機能です。

選択後の表示について

下付き

選択した文字を標準より小さい文字サイズで、やや下に配置される文字に変更する機能です。

選択後の表示について

上付き

選択した文字を標準より小さい文字サイズで、やや上に配置される文字に変更する機能です。

選択後の表示について

文字色

選択した文章の文字色を変更することができます。
色は表示されているものから選択するか、「ユーザー設定の色」（下図②）からご希望の色を選択することができます。

「色設定を解除」（下図①）をクリックすることで、設定した色を解除することができます。

背景色

選択した文章の背景色を変更することができます。
色は表示されているものから選択するか、「ユーザー設定の色」（下図②）からご希望の色を選択することができます。

「色設定を解除」（下図①）をクリックすることで、設定した色を解除することができます。

選択後の表示について

文字サイズ

文字サイズを選択できる機能です。
ご希望の文字サイズを入力するか、＋／－で文字サイズを調整することができます。

箇条書き

箇条書きを追加する機能です。

改行（Enter）では、項目内での改行となります。次の項目へ進みたい場合は、改段落（Shift+Enter）を行う必要があります。

選択後の表示について

番号付き箇条書き

番号付き箇条書きを追加する機能です。

改行（Enter）では、項目内での改行となります。次の番号へ進みたい場合は、改段落（Shift+Enter）を行う必要があります。

選択後の表示について

リンクの挿入／編集

リンクの挿入／編集を行うことができます。

ショートカットキーは「Ctrl+K」です。

■挿入方法

必要項目を入力し、「保存」（下図赤枠）をクリックすることでリンクの挿入が行えます。

「取消」（下図青枠）をクリックすることで、入力内容を取り消すことが可能です。

挿入済みのリンクを選択し、「リンクの挿入／編集」ボタンをクリックするか、ショートカットキー（Ctrl+K）を押すことで編集することが可能です。

URL	挿入するURLを入力します。
表示するテキスト	リンクを挿入するテキストを入力します。 URLに入力した内容が自動で入力されますが、「表示するテキスト」のみを編集することが可能です。
タイトル	リンクにカーソルを合わせた際に表示させるテキストを入力します。
リンクの開き方	リンクをクリックした際の開き方を「同じウィンドウ」か「新規ウィンドウ」から選択します。

選択後の表示について

表

簡単に表を作成することができます。
プルダウンメニューをクリックすることで、細かい表の設定を行うことができます。

表を右クリックすることで、プルダウンメニューと同じメニューを表示することが可能です。

■表

作成したい行・列の分だけドラッグで選択することで、簡単に表が作成できます。

■セル

作成した表のセルについて、細かく変更することができます。

セルのプロパティ	セルの表示について以下の内容を細かく変更することができます。・幅　・セルの種類　・スコープ　・水平に整列・垂直に整列　・枠横幅　・枠線スタイル　・ボーダーの色・背景色
セルの結合	選択したセルを結合することができます。
セルの分割	結合したセルを分割することができます。

■行

作成した表の行について、細かく変更することができます。

前に行を挿入	選択した行の前に新たに行を挿入することができます。表下部にも「前に行を挿入」ボタンが表示されます。
後に行を挿入	選択した行の後に新たに行を挿入することができます。表下部にも「前に行を挿入」ボタンが表示されます。
行の削除	選択した行を削除することができます。表下部にも「前に行を挿入」ボタンが表示されます。
行のプロパティ	行の表示について以下の内容を細かく変更することができます。・行タイプ　・配置　・高さ・枠線スタイル　・ボーダーの色　・背景色
行の切り取り	選択した行を切り取ることができます。
行のコピー	選択した行をコピーすることができます。
上側に行を貼り付け	コピーした行を選択した行の上側に貼り付けます。行をコピーしていない状態では、「上側に行を貼り付け」をクリックすることができません。
下側に行を貼り付け	コピーした行を選択した行の下側に貼り付けます。行をコピーしていない状態では、「下側に行を貼り付け」をクリックすることができません。

■列

作成した表の列について、細かく変更することができます。

前に列を挿入	選択した列の前（左側）に新たに列を挿入することができます。表下部にも「前に列を挿入」ボタンが表示されます。
後に列を挿入	選択した列の後（右側）に新たに列を挿入することができます。表下部にも「後に列を挿入」ボタンが表示されます。
列を削除	選択した列を削除することができます。表下部にも「列を削除」ボタンが表示されます。
列をカット	選択した列を切り取ることができます。
列をコピー	選択した列をコピーすることができます。
前に列を貼り付け	選択した列の前（左側）にコピーした列を貼り付けることができます。列をコピーしていない状態では、「前に列を貼り付け」をクリックすることができません。
後に列を貼り付け	選択した列の後（右側）にコピーした列を貼り付けることができます。列をコピーしていない状態では、「後に列を貼り付け」をクリックすることができません。

■テーブルのプロパティ

表の表示について以下の内容を細かく変更することができます。

・幅　・高さ　・セルの間隔　・セル内のスペース
・枠線幅<・キャプション　・配置　・枠線のスタイル
・ボーダーの色　・背景色

表下部にも「テーブルのプロパティ」ボタンが表示されます。

■テーブルの削除

テーブルを削除することができます。

ビジュアルエディタ使用可能箇所

ビジュアルエディタが使用できる箇所は、以下になります。

テンプレート選択へ（矢印アイコン）	クリックすると、テンプレート選択画面へ遷移します。
お店のページへ（家アイコン）	クリックすると、基本設定＞TOP＞ショップ情報確認に表示されているリンク先ページへ遷移します。モード切替＞公開モードで「PC/スマホサイトを公開」を選択している場合は、「お店のページへ」アイコンは非表示になります。