キャンセル
検索
導入前のご相談 06-6485-5330
運用サポート:06-6485-6485 平日9:30~18:00(土日祝除く)
コマースクリエイター無効コマースクリエイター有効コマースクリエイター運用中?

レイアウト追加・変更

×

マニュアル閲覧上の注意

店舗の状態にあわせて、上のボタンからいずれかを選択してください。表示される項目が変更されます。

コマースクリエイター無効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用されている場合(コマースクリエイターをご利用でない場合)はこちらを選択してください。
コマースクリエイター有効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用しながら、コマースクリエイター管理画面が使用できる場合はこちらを選択してください。
コマースクリエイター運用中(切替後)
コマースクリエイター管理画面で構築し、コマースクリエイター専用ECサイト(ユーザー画面)で店舗を構築・運用されている場合(以前からのユーザー画面をご利用でない場合)はこちらを選択してください。

上記のボタンは再選択できます。店舗の状態がわからない方はコマースクリエイターご利用状況の確認方法についてをご覧ください。

レイアウト

haedタグとbodyタグ

すべてのページのレイアウトで、haedタグとbodyタグの内容をそれぞれ設定できます。

<haed設定>内を変更する

システムで固定の記述に続いて、headタグに任意の内容を出力できます。記述する内容はフリーパーツを使用して設定します。

  1. フリーパーツを追加します。
  2. フリーパーツの表示内容にheadタグ内に出力するタグを直接入力します。
  3. レイアウトで「<haed>内を変更する」ボタンを押下し、上記で保存したフリーパーツを配置します。

<body設定>内を変更する

パーツを配置することで、bodyタグ内に任意の内容を出力できます。

レイアウトタイプによって、あらかじめシステムパーツが配置されています。システムパーツの間や上下に、任意のパーツを配置できます。

レイアウト名

レイアウト名が表示されます。
レイアウト名の右にある変更するボタンを押下するとレイアウト名変更ダイアログが表示され、レイアウト名を変更できます。

レイアウト名変更

レイアウト名

レイアウトの名称を変更できます。

OK

レイアウト名を入力します。

キャンセルする

レイアウト名を変更しません。

有効にする(デフォルトレイアウトにする)

「有効にする(デフォルトレイアウトにする)」のチェックがあるレイアウト(有効なレイアウト)がECサイトに表示されます。
各ページごとに「有効」なレイアウトが必須となります。初期状態ではページ(レイアウトタイプ)ごとに有効なレイアウトが設定されています。
デフォルトレイアウトとは、割当名がない有効なレイアウトという意味です。

レイアウトの切り替え

レイアウトは複製や追加が可能で、同じページ用の(レイアウトタイプが同じ)レイアウトを複数追加できます。複数あるレイアウトのうち、「有効」なレイアウトがECサイトに表示されます。
「有効にするチェックボックス」にチェックしてレイアウトを保存すると、レイアウトが有効になります。あるレイアウトを有効にすると、それまで有効だったレイアウトは(自動的に)無効になり、ECサイトに表示されるレイアウトが切り替わります。

割当名(商品詳細・商品グループ・フリーページ用レイアウト)

レイアウト割当(わりあて)とは

通常、ページ(レイアウトタイプ)ごとに有効なレイアウト(デフォルトレイアウト)がECサイトに表示されます。商品グループ・商品詳細・フリーページは、個別に表示するレイアウトを指定でき、レイアウトを個別に使い分けることができます。レイアウトを指定し、使い分ける機能を「レイアウト割当」といいます。
例えば商品詳細なら、特定の商品のみ、他と違うレイアウトを使用できます。

割当名の使用方法

「レイアウト」と「商品グループ・商品詳細・フリーページ」を紐づけるために、それぞれに「割当名」を設定します。

  1. レイアウトに割当名を設定します。最大文字数:全角50字
    割当名には半角と全角を問わず、「カンマ」と「スペース」は使えません。
    割当名は複数設定でき、1レイアウトで1000まで登録できます。
    割当名欄を選択すると、すでに使用されている割当名が候補として表示されます。インクリメンタルサーチ機能があり、文字を入力するたびに前方一致で候補が絞込まれます。
  2. 割当名を設定したレイアウトを有効にします。
    なお、割当名を設定すると、デフォルトレイアウトではなくなるため、「有効にする」チェックボックスに「(デフォルトレイアウト)」の表示がされません。
  3. 商品詳細・商品グループ・フリーページで、使用したいレイアウトに設定した割当名を指定します。
    指定する画面は以下の通りです。
    商品詳細:運用メニュー>商品管理>商品情報(レイアウト・SEO設定)-レイアウト割当-レイアウト割当名
    商品グループ:運用メニュー>商品管理>商品グループ管理(レイアウト・SEO設定)-レイアウト割当-レイアウト割当名
    フリーページ:フリーページ-レイアウト割当
  4. 商品詳細・商品グループは運用メニュー>商品管理>商品データ一括登録から、CSVファイルを利用して割当名の一括登録ができます。
  5. 割当名を指定した商品詳細・商品グループ・フリーページで、割当名が合致するレイアウトがECサイトに表示されます。
  6. 「スマートフォン用」「PC/その他用」など、複数のテーマを使用している場合は、テーマで利用中になっているすべてのテーマに、同じ割当名を設定したレイアウトを用意します。
    利用中のテーマに、該当の「割当名」が設定されたレイアウトがない場合、デフォルトレイアウトが適用されます。

割当名を入力せずに「有効にする(デフォルトレイアウト」チェックをつけて保存すると、デフォルトレイアウトが切り替わります。割当名のないすべての商品はデフォルトレイアウトで表示されます。
意図したレイアウトとならない場合がありますのでご注意ください。

パーツ配置エリア

パーツ配置エリアではheadタグの内容、bodyタグの内容をそれぞれ設定できます。
すべての表示内容はパーツとして表示されています。(システム固定の一部を除く)
レイアウトエリアに配置されたパーツがECサイトに表示されます。配置されたパーツのHTMLタグが、上から順に出力されます。
パーツ配置エリアを確認すれば、ページに表示されるすべての内容がパーツとして確認できます。

パーツの配置確認

パーツの配置は、パーツ配置エリアに表示されたパーツを確認するほか、パーツ配置エリアにあるレイアウト確認ボタンボタンを押下して確認できます。すべての配置パーツ名が表示されます。パネルパーツについてはパネルパーツに含まれるパーツも出力されます。
フリーパーツに「パーツ置換文字」で記載されているパーツについては表示されません。

パーツの配置変更

パーツの配置変更を変更できます。配置を変更したいパーツをドラッグして、任意の場所にドロップしてください。パーツの配置を変更できます。
パーツの配置変更方法は以下です。

  • パーツ配置エリアに配置されているパーツの表示順変更ボタンを選択し、ドラッグ&ドロップする。
  • パーツ配置エリアに配置されているパーツの操作するボタンから、「パーツをレイアウトから外す」を選択して、一度レイアウトから外す。 (必要ならばパーツ検索し)外したパーツをパーツ一覧に表示し、再びパーツ配置エリアの任意の位置にドラッグ&ドロップする。
  • レイアウトパーツをパーツ配置エリアに配置し、レイアウトパーツを開いて、レイアウトパーツの中(階層)に配置する。

パーツ配置エリアに配置できるパーツの数に制限はありません。

レイアウトの保存

保存ボタンを押下すると、システムに保存されます。有効なレイアウトであれば、変更された配置でECサイトに反映されます。

パーツ配置の作業状態保存とパーツ変更への遷移について

パーツ配置エリアに配置されたパーツは、「保存する」ボタンを押下する前、未保存の状態(作業状態)で一時的に保持されます。この機能によって、レイアウト画面からパーツを変更して、またレイアウトに戻るといった使い方ができます。

  1. レイアウト画面のパーツ配置エリアにあるパーツの操作するボタンから、「パーツを変更する」を選択して、パーツ変更画面に遷移。
  2. パーツを変更して保存。
  3. パーツ変更の「レイアウト設定に戻る」ボタンを押下。
  4. 遷移前の状態でレイアウト画面に戻り、作業を続行し、レイアウトを保存。

未保存の作業内容は、管理画面で作業したアカウント・ブラウザでのみ一時保存されます。他のアカウント・ブラウザには、未保存の作業内容を共有できません。
未保存の作業内容があるレイアウトは、レイアウト一覧で未保存アイコンが表示されます。

作業状態の保存は一時的なものであり、管理画面の操作をやめてしばらく経過すると消去されます。レイアウトを保存する場合は、保存するボタンを押下してください。

パーツアイコンについて

パーツ配置エリア、パーツ検索結果一覧ではパーツは以下のアイコン付きで表示されます。

システムパーツ

パネルパーツ

パターンパーツ(カルーセル・コラム・箇条書き・任意商品一覧・メニュー)

フリーパーツ

レイアウトパーツ(パーツ配置エリアのみ)

必須のシステムパーツについて

各レイアウトにおいて、ECサイトの動作・処理に必要なシステムパーツはあらかじめ配置されています。 配置されているシステムパーツは「パーツを外す」ことができ、パーツ配置エリアから一時的に削除できます。これはパーツ配置エリア内での移動のための機能です。 各レイアウトに必須なシステムパーツは、保存時にエラーチェックがされます。

こちらのエラーが表示された場合、必須のシステムパーツが足りないので、パーツ検索を行い、パーツ配置エリアに配置してください。

レイアウトパーツ

レイアウトパーツはレイアウト内で使用するパーツです。レイアウトのパーツ配置エリアにレイアウトパーツを配置すると、レイアウトパーツの中にパーツを配置できます。 レイアウトパーツはHTML要素を出力できるため、括り(wrap)タグとして使用できます。

閉じているレイアウトパーツ

レイアウトパーツは閉じている場合は、レイアウトパーツ内に配置したパーツは表示されません。レイアウトパーツの開くボタンを押下すると、レイアウトパーツ内にパーツを配置する画面へ遷移します。 なお、レイアウトパーツの中に、さらにレイアウトパーツを配置できます。レイアウトに階層があるかのように表現されます。

レイアウトパーツ「メインエリア」内

レイアウトパーツの操作するボタンを押下し、選択肢にある「パーツを変更する」を選択します。
レイアウトパーツ設定ダイアログが表示されます。レイアウトパーツに設定されたHTML要素とid/classを確認できます。

レイアウトパーツには表示条件設定ができます。表示条件を設定した場合、レイアウトパーツの中に配置されたパーツは、設定された条件に合致した場合のみ表示されます。詳しくはレイアウトパーツ-表示条件設定をご覧ください。

レイアウトパーツは他のレイアウトへ移動できません。レイアウトを複製すれば、レイアウトパーツも複製されます。

パーツの表示/非表示

パーツ操作ボタンから「表示しない」を選択します。
パーツはレイアウトに配置されていますが、ECサイトには表示されません。HTMLタグも出力されません。(コメントアウトではありません)

パーツ操作ボタンから「表示する」を選択します。
パーツがECサイトに表示されます。HTMLも出力されます。(コメントアウトではありません)

パーツを変更する

パーツ配置エリアにあるパーツの操作するボタンから、「パーツを変更する」を選択すると、パーツ変更画面へ遷移します。パーツ変更画面で作業してください。
レイアウトは一時保存されていますので、パーツ変更作業が完了したら、再びレイアウト画面に戻れます。

システムパーツはレイアウトから変更できません。文言を変更する場合はメッセージから、設定を変更する場合は、以前からの管理画面で変更します。

パーツをレイアウトから外す

パーツ配置エリアに配置されているパーツの操作するボタンから、「パーツを外す」を選択すると、パーツがレイアウトから消去されます。パーツ自体は削除されません。再度、レイアウトエリアに配置するには、パーツ検索してパーツ一覧に表示させた後、レイアウトエリアにドラッグ&ドロップしてください。

パーツ検索

レイアウトに配置するパーツを検索できます。検索条件を表示するボタンを押下すると「管理タグ」「種類」で検索できます。

キーワード

パーツを「パーツ名」「パーツ置換文字」で検索できます。複数指定する場合は、空白で区切ってください。AND検索になります。

管理タグ

パーツを管理タグで検索できます。管理タグ欄を選択すると、候補が表示されます。インクリメンタルサーチ機能があり、文字を入力するたびに前方一致で候補が絞込まれます。

種類

パーツを種類で検索できます。フリーパーツ/カルーセル/コラム/メニュー/箇条書き/任意商品一覧/パネルパーツ/システムパーツから検索できます。

検索するボタン

指定した条件でパーツを検索できます。

パーツ一覧

検索条件に合致したパーツが表示されます。パーツのドラッグするボタンや追加するボタンを選択して、パーツ配置エリアにドラッグしてください。

パーツ名

パーツの名称が表示されます。選択すると並び替えできます。

更新日時

パーツの更新日時が表示されます。選択すると並び替えできます。

プレビューを表示する

作業中のレイアウトを適用した場合のプレビューを表示します。プレビューを表示するボタンを押下すると、新規タブで表示されます。
プレビューは2種類の動作モードがあります。

デザイン確認モード
管理画面の設定にかかわらず、ECサイトで各オプション機能を利用する設定として表示されます。
オプション機能のデザイン調整にご利用いただけます。また、非公開の商品や商品グループが表示されます。
動作確認モード
管理画面の設定にしたがって、ECサイトが表示されます。非公開の商品や商品グループは表示されません。

プレビュー用URL・QRコード

スマートフォンからテーマをプレビューする場合、表示されたQRコードをQRコード読取機能があるアプリで読み取ってください。または併記されたURLをメールなどで共有してください。

未保存のレイアウトでプレビュー

レイアウトの作業中に、保存せずにプレビューできます。パーツ配置エリアで作業中の状態でプレビューできます。

商品詳細・商品グループのプレビューについて

レイアウトタイプが「商品詳細」または「商品グループ」であるレイアウトでは、レイアウト割当の設定にかかわらず、全ての商品、または商品グループがプレビューしたレイアウトで表示されます。
プレビューボタンを押下すると、トップページが表示されますので、作業中のレイアウトで表示したい商品または商品グループへ画面遷移してください。

運用メニュー>商品管理>商品グループ管理(新規登録・編集)または運用メニュー>商品管理>商品新規登録・商品基本情報編集からもプレビューでき、その場合は、割当名設定に従って表示されます。

割当名が設定された商品または商品グループは、割当名で設定されたレイアウトでプレビューされます。
割当名がない商品または商品グループは、有効なデフォルトレイアウトでプレビューされます。

フリーページのプレビューについて

レイアウトタイプが「フリーページ」であるレイアウトでは、レイアウトの割当にかかわらず、プレビューしたレイアウトで全てのフリーページが表示されます。
プレビューボタンを押下すると、トップページが表示されますので、作業中のレイアウトで表示したいフリーページへ画面遷移してください。
未公開のフリーページも表示できます。

なお、フリーページ変更画面からはプレビューできません。

それ以外のページ

プレビューボタンを押下すると、トップページが表示されますので、作業中のレイアウトで表示したいページへ画面遷移してください。

プレビューの詳細については、管理画面の使い方-プレビュー方法をご覧ください。

保存する

レイアウトを保存します。
有効なレイアウトを保存すると、該当のレイアウトを使用しているページが更新されます。

削除

レイアウトを削除するボタンを押下すると、レイアウトを削除できます。削除されたレイアウトは復元できません。

利用中のレイアウトは削除できません。

戻る

前画面に戻ります。未保存の作業内容は保存されています。

保存されていない変更があります(破棄する)

未保存の作業内容がある場合に表示されます。「破棄する」を押下すると、未保存の作業内容を破棄します。破棄すると、パーツ配置が最後にシステムに保存した状態になります。

ページやフリーページからレイアウトに遷移してパーツを変更する

ページ・フリーページとレイアウトについて

すべてのページフリーページには、各テーマごとに有効なレイアウトが指定されます。ページ設定またはフリーページ追加・変更のレイアウトという項目に「有効なレイアウト」が表示されています。
有効なレイアウトは各レイアウト変更画面へのリンクになっていますので、ページ設定またはフリーページ変更から、現在有効なレイアウトを確認でき、変更画面へ遷移していただけます。

各テーマごとのレイアウト変更画面からページ・フリーページのプレビューを確認できます。

レイアウトとレイアウトに配置されたパーツについて

ページ・フリーページから遷移したレイアウトには、パーツが配置されています。ページ・フリーページに表示する内容はすべてレイアウトのパーツ配置エリアにあります。
パーツ配置エリアのパーツにある操作するボタンから、パーツを変更するを押下すれば、パーツ変更へ遷移できます。

パネルパーツの場合はパネルパーツ変更から、パネルパーツに配置されたパーツの変更画面へ遷移して作業できます。

パーツ変更にあるレイアウトに戻るボタンを押下すれば、元のレイアウト画面に戻って作業を再開できます。レイアウトのパーツ配置エリアでの作業は保存ボタンを押下せずとも保存されています。(作業したブラウザのみ)

つまり、ページやフリーページの内容を変更する場合、レイアウトに遷移してパーツを確認し、パーツに遷移して作業する、という使い方がしやすくなっています。ECサイトを見ていて、変更する必要が生じた場合は、ページ・フリーページから作業すると便利です。

項目表示について

各項目は以前からのECサイト用・コマースクリエイター用・共通の3種類があります。コマースクリエイター有効(切替前)は両方の項目が表示されます。

以前からのECサイト用項目で、コマースクリエイターでは使用しません。(右側にこちらの色の点線が表示されます。)

コマースクリエイター専用ECサイト用の項目です。以前からのECサイトには影響しません。(右側にこちらの色の点線が表示されます。)

上記以外は共通で使用する項目です。(何も表示されません。)

×

店舗の状態にあわせて、下のボタンからいずれかを選択してください。

コマースクリエイター無効 コマースクリエイター有効 コマースクリエイター運用中
コマースクリエイター無効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用されている場合(コマースクリエイターをご利用でない場合)はこちらを選択してください。
コマースクリエイター有効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用しながら、コマースクリエイター管理画面が使用できる場合はこちらを選択してください。
コマースクリエイター運用中(切替後)
コマースクリエイター管理画面で構築し、コマースクリエイター専用ECサイト(ユーザー画面)で店舗を構築・運用されている場合(以前からのユーザー画面をご利用でない場合)はこちらを選択してください。

再度選択できますので、店舗の状態がわからない方はいったん「有効」をお選びください。
詳しくはコマースクリエイターご利用状況の確認方法についてをご覧ください。