パネルパーツ追加・変更

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

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

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

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

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

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

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

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

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

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

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

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

<目次>

オプションを設定する

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

[オプションを設定する]ボタン

[オプションを設定する]ボタン

オプション設定ダイアログ

オプション設定ダイアログ

備考の表示場所

備考の表示場所

HTML要素

HTMLタグは、パーツを囲むwrapタグを設定できます。

div・section・nav・article・aside・header・footer・dialogタグのいずれか、または「指定なし」から選択してください。
id/classを指定する場合は、「指定なし」以外のいずれか選択してください。

id

HTML要素のid属性の値を設定できます。 半角英数・記号(-_):100字

class

HTML要素のclass属性の値を設定できます。 半角英数字・半角スペース・記号("以外):100字

管理タグ

管理タグ追加・変更-管理タグ活用のポイントをご覧ください。

備考

パーツの用途や表示画面などを入力すると管理がしやすくなります。 文字数:400字

パーツ名

パーツ名

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

置換文字

置換文字

パーツ置換文字を入力します。

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

置換文字の活用方法

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

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

パーツ一覧

パーツ一覧

パーツ検索

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

パーツ検索

パーツ検索

パーツ名

パーツをパーツ名で検索できます。パーツ名を部分一致で検索できます。 文字数:100字

管理タグ

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

種類

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

検索するボタン

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


パーツ検索結果一覧

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

パーツ名

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

更新日時

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

パーツ配置エリアへ移動

配置するボタンを押下すると、パーツ配置エリアの下部に追加されます。

パーツ配置エリアへ移動

パーツ配置エリア

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

パーツ配置エリア

パーツが配置されていない状態

パーツが配置されていない状態

パーツ一覧からパーツをドラッグして配置

パーツ一覧からパーツをドラッグして配置


表示順を変更する

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


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

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

非表示にする

パーツ操作ボタンからポップアップメニューを表示し、「 表示しない」を選択します。

「表示しない」を選択すると、パーツはパネルに配置されていますが、ECサイトに表示されなくなります。
「表示しない」に設定されたパーツはHTMLタグ自体が出力されなくなります。

表示する

パーツ操作ボタンからポップアップメニューを表示し、「 表示する」を選択します。

パーツがECサイトには表示されます。(HTMLも出力されます。)


パーツを外す

パーツを外す

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

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

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


パーツを追加する

パーツを追加する

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

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


パーツを変更する

パーツを変更する

パネルパーツ変更画面では、パーツ配置エリアに配置されているパーツの変更画面へ直接遷移できます。

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

修正したいパーツの操作するボタン を押下してください。
選択肢にある「 パーツを変更する」を押下してください。
該当パーツの変更画面へ遷移できます。

なお、遷移元のパネルパーツで保存していない作業内容がある場合、破棄されます
変更画面に遷移する前に保存するボタンを押下して下さい。

保存する

保存する

パーツを保存します。


キャンセルする

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


パネルパーツを削除する

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


戻る

レイアウト変更から直接パーツを変更する場合にのみ表示されます。
押下すると、レイアウト変更に戻ります。

未保存の作業内容は破棄されます。
保存するボタンを押下した後、[戻る]ボタンを押下してください。

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