コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
オプション
<ご契約状況管理画面の使い方>
  • [契約管理ポータル]
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
オプション
<ご契約状況管理画面の使い方>
  • [契約管理ポータル]
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
オプション
<ご契約状況管理画面の使い方>
  • [契約管理ポータル]
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
オプション
<ご契約状況管理画面の使い方>
  • [契約管理ポータル]

パネルパーツ追加・変更

コマースクリエイター>パーツ>パネルパーツ

パーツ一覧よりパネルパーツで作成されたパーツのボタン、
もしくは[パーツを追加する]ボタンよりパネルパーツを選択すると遷移します。

複数のパーツをまとめてレイアウトに配置できるパーツを作成できます。

複数のレイアウト(ページ)に共通で配置する、ヘッダやフッタなどをパネルパーツで作成すると、パネルパーツ内に含まれる共通パーツを一回の操作するだけで、全パネルパーツの内容を変更でき、ECサイトを効率的に運用できます。

パネルパーツに追加(内包)できるパーツは、フリーパーツ/パネルパーツ/パターンパーツ(カルーセル・コラム・箇条書き・任意商品表示・メニュー)です。

パーツについての解説と利用方法については、パーツ一覧-パーツとはをご覧ください。

スタートアップテーマでは、あらかじめヘッダー・フッター用パネルパーツを、すべてのレイアウトに配置済みです。
ページの種類に応じて配置されているパーツが異なります。

以下で確認してください。
スタートアップテーマのご利用方法-「headタグ」「ヘッダーエリア」「フッターエリア

利用方法などの参考として、管理画面内にてご覧ください。

スタートアップテーマでの利用例(一部)

  • headタグ共通(スマートフォン)
  • ヘッダーコンテンツ
  • サブエリア(メニュー等・PC)
  • 告知バナーパネル

※配置されているパーツの一覧はスタートアップテーマのご利用方法をご覧ください。

目次

オプションを設定する

画面上部の[オプションを設定する]を押下すると、HTMLタグや管理タグ、備考を設定するダイアログが開きます。

[オプションを設定する]ボタン
オプション設定ダイアログ
備考の表示場所
HTML要素
HTMLタグは、パーツを囲むwrapタグを設定できます。
div・article・section・nav・aside・header・footerタグのいずれか、または「指定なし」から選択してください。
id/classを指定する場合は、「指定なし」以外のいずれか選択してください。
id
HTML要素のid属性の値を設定できます。半角英数・記号(-_):100字
class
HTML要素のclass属性の値を設定できます。半角英数字・半角スペース・ 記号(-_{}@.):100字
管理タグ
管理タグ追加・変更-管理タグ活用のポイントをご覧ください。
備考
パーツの用途や表示画面などを入力すると管理がしやすくなります。文字数:400字

パーツ名

パーツの名称を設定できます。文字数:100字

置換文字

パーツ置換文字を入力します。
どのパーツの置換文字であるか、分かりやすい任意の文字列を入力してください。半角英数・記号(._-):100字
パーツ置換文字は複製・追加時に設定できます。一度設定すると変更はできません。

置換文字の活用方法

フリーパーツに、置換文字を記述すると読み込まれます。
変更や修正を加える際、該当のフリーパーツを一つ作業するだけで置換文字を記述した他のすべてのパーツに反映されるので、運用のミス防止や効率化につながります。

フリーパーツ-パーツ置換文字の活用方法もご参照ください。

パーツ一覧

パーツ検索

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

パーツ名
パーツをパーツ名で検索できます。パーツ名を部分一致で検索できます。文字数:100字
管理タグ
パーツを管理タグで検索できます。管理タグ欄を選択すると、候補が表示されます。
インクリメンタルサーチ機能があり、文字を入力するたびに前方一致で候補が絞込まれます。
種類
パーツを種類で検索できます。
フリーパーツ/カルーセル/コラム/メニュー/箇条書き/任意商品表示/パネルパーツから検索できます。
検索するボタン
指定した条件でパーツを検索できます。

パーツ検索結果一覧

検索条件に合致したパーツが表示されます。
パーツは100件まで表示されます。

パーツ名
パーツの名称が表示されます。選択すると並び替えできます。
更新日時
選択するとパーツの更新日時で並び替えできます。パーツの更新日時自体は表示されません。
パーツ配置エリアへ移動
配置するボタンを押下すると、パーツ配置エリアの下部に追加されます。

パーツ配置エリア

パネルパーツ変更画面左側のパーツ配置エリアに表示されているパーツがパネルパーツとしてまとめて表示されます。

パーツが配置されていない状態
パーツ一覧からパーツをドラッグして配置

表示順を変更する

パーツの表示順を変更するボタンを選択してドラッグするとパーツを上下に移動でき、パーツの表示順を変更できます。

パーツを表示/非表示にする

非表示にする

パーツ操作ボタンからポップアップメニューを表示し、「表示しない」を選択します。
「表示しない」を選択すると、パーツはパネルに配置されていますが、ECサイトに表示されなくなります。
「表示しない」に設定されたパーツはHTMLタグ自体が出力されなくなります。

表示する

パーツ操作ボタンからポップアップメニューを表示し、「表示する」を選択します。
パーツがECサイトには表示されます。(HTMLも出力されます。)

パーツを外す

パネルパーツ変更画面では、パーツ配置エリアに配置されているパーツを外せます。
パーツを非表示にすることもできますが、使用しない場合などはパーツを外してください。

パーツ配置エリアに配置されているパーツの操作するボタンを押下してください。
選択肢にある「パーツを外す」を選択すると、パーツがパーツ配置エリアから消去されます。

パーツを外すとパネルパーツの内容から消去されますが、パーツ自体は削除されません。
再度、パーツ配置エリアに配置するには、パーツ検索してパーツ一覧に表示させた後、パーツ配置エリアにドラッグ&ドロップしてください。

パーツを追加する

画面右側の「パーツ一覧」で追加したいパーツを検索し、パーツ一覧に表示されたパーツの追加するボタンを押下すると、パーツ配置エリアの最下部に追加されます。
パーツ一覧に表示されたパーツのを選択し、パーツ配置エリアへドラック&ドロップしても追加できます。

パネルパーツに追加できるパーツは、フリーパーツ/パターンパーツ(カルーセル・コラム・箇条書き・任意商品表示・メニュー)/パネルパーツです。

パーツを変更する

パネルパーツ変更画面では、パーツ配置エリアに配置されているパーツの変更画面へ直接遷移できます。
パネルパーツでは、配置されているパーツの「パーツ名」が表示されていますので、パネルパーツに配置されているパーツを確認した上で、対象のパーツを変更していくという作業がしやすくなります。

修正したいパーツの操作するボタンを押下してください。
選択肢にある「パーツを変更する」を押下してください。
該当パーツの変更画面へ遷移できます。
なお、遷移元のパネルパーツで保存していない作業内容がある場合、破棄されます。変更画面に遷移する前に保存するボタンを押下して下さい。

保存する

パーツを保存します。

キャンセルする

未保存の作業内容を破棄します。

パネルパーツを削除する

削除するボタンを押下すると、パネルパーツを削除できます。
パネルパーツを追加する(新規作成)場合には表示されません。

戻る

レイアウト変更から直接パーツを変更する場合にのみ表示されます。
押下すると、レイアウト変更に戻ります。
未保存の作業内容は破棄されます。
保存するボタンを押下した後、[戻る]ボタンを押下してください。

レイアウト変更から直接パーツを変更する方法については、パーツ配置エリア上からパーツを変更するをご覧ください。