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

メニューパーツ追加・変更

コマースクリエイター>パーツ>メニューパーツ

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

ECサイトのメニュー(ナビゲーション)を簡単な操作で作成できます。

任意のメニュー項目を追加、配置できるできるだけでなく、商品グループ情報を読み込み、親グループ・子グループの情報を自動的にメニューの階層にできます。
メニューには商品グループページへのリンクを表示できます。

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

スタートアップテーマでは、フリーパーツで作成したパーツがすでにサンプルとして準備され、レイアウトに配置されています。利用方法などの参考として、管理画面内にてご覧ください。

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

  • ヘッダーナビゲーションメニュー
  • 商品カテゴリメニュー
  • フッターメニュー

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

目次

オプションを設定する

パーツを囲むタグ(HTML要素とid/class)や管理タグなどを設定するパーツオプション設定へ遷移します。

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

パーツ名

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

置換文字

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

置換文字の活用方法

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

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

class

パーツにclassを追加できます。ECサイト画面に出力されます。半角英数字・半角スペース・記号(-_{}@.):100字

メニューを作成する

「メニュー内容」エリア(左)と「メニュー項目」エリア(右)にて作成します。
それぞれのエリア内での操作方法については「メニュー内容」エリア「メニュー項目」エリアをご覧ください。

新規追加の場合
変更の場合

メニューの作成方法は、以下の方法があります。

  1. 登録済みの商品グループを読み込む
    運用>商品管理>商品グループ管理にてあらかじめグループを作成してください。
  2. 独自に作成したメニュー項目を配置する
    商品グループ以外の独自メニュー項目を表示できます。
    [メニュー項目を追加する]ボタンより独自のメニュー項目を作成できます。
  3. 登録済みの商品グループと独自に作成したメニュー項目を組み合わせる
    1.2.を組み合わせて作成します。

商品グループの階層について

商品グループを登録した後、[商品グループを読み込む]ボタンを押下すると、メニュー内容欄に商品グループ情報が読み込まれます。
商品グループは、商品グループ(親)の配下に商品グループ(子)を登録でき、親子関係を作成できます。
これを「階層」と呼びますが、5階層まで作成できます。

商品グループに階層を作ると、パンくずリンクに「トップ > 第1階層 > 第2階層 > 第3階層 > 第4階層 > 第5階層」のように表示されます。
商品グループの階層がある場合に、何階層までメニューに再現するかを選択してください。

商品グループを読み込むと、「メニュー内容」に商品グループの第1階層が表示されます。
メニューを開くボタンを押下すると、第2階層のメニューが表示されます。

1階層あたり、100件までメニュー表示できます。

1.登録済みの商品グループを読み込む

商品グループ情報を読み込んで、自動的にメニューを作成できます。
商品グループの親子関係をそのままメニューの入れ子構造にします。

メニューに表示したい階層を「1階層目まで」から「全階層」(5階層目まで)の中から選択し、[商品グループを読み込む]ボタンを押下します。

メニューの読み込み設定は以下の2パターンあります。

すべての商品グループにリンクを設定する
読み込み時、すべての商品グループで、商品グループページへのリンクを設定します。
読み込み後、商品グループごとにリンク設定(有・無)を変更できます。
最下層の商品グループにリンクを設定する
読み込み時、子グループの設定されていない商品グループのみリンクを設定します。
読み込み後、商品グループごとにリンク設定(有・無)を変更できます。
以下の例では、「ファッション」には子グループが設定されているためリンクされません。(「>」マーク非表示)

通常は、メニューに「2階層目まで」記述されることが多いようです。

読み込んだ商品グループメニュー項目は、表示順を変更するボタンをマウスで選択し、そのままドラッグして順番を変更できます。
同じ階層内でのみ順番変更できます。

※非公開状態の商品グループも取り込まれますが、ECサイトには表示されません。
※闇市に指定した商品グループは取り込まれません。

【重要】商品グループを追加した場合の注意事項

いったん商品グループを読み込んで保存した後に、運用>商品管理>商品グループ管理にて新たにグループを追加しても、自動的にメニューには読み込まれません
追加登録した商品グループをメニューに追加するには、再度[商品グループを読み込む]ボタンを押下する必要があります。

商品グループとメニュー表示例

運用>商品管理>商品グループ管理での商品グループ登録

左のように登録されている商品グループについて、「3階層目まで(すべてのグループにリンク設定)」を選択し、[商品グループを読み込む]ボタンを押下した場合の、「メニュー内容」エリアとユーザー画面(ECサイト)上の表示例です。

「メニュー内容」エリアでの操作方法は「メニュー内容」エリアをご覧ください。

「メニュー内容」エリアの表示

第1階層が表示され、を押下すると、第2階層目が表示されます。

ユーザー画面(ECサイト)の表示

第1階層と2階層目は異なったデザインで表示されます。
リンクのあり/なし設定によって「>」マークの表示/非表示が変わります。

2.独自に作成したメニュー項目を配置する

商品グループ以外のメニューを独自で作成して表示します。
「メニュー項目」エリアに表示された独自メニューを「メニュー内容」エリアへドラッグ&ドロップします。

「メニュー内容」エリア(左)と「メニュー項目」エリア(右)にて作成します。
それぞれのエリア内での操作方法については「メニュー内容」エリア「メニュー項目」エリアをご覧ください。

※スタートアップテーマでは、よくあるメニューがあらかじめ準備されています。
適宜[メニュー項目追加・変更画面]にて変更してご利用ください。

新たに独自メニューを追加したい場合は、[メニュー項目を追加する]を押下します。
[メニュー項目追加・変更画面]が開きますので、ラベルやリンク先などを設定します。
くわしい設定方法は、[メニュー項目追加・変更画面]をご覧ください。

3.登録済みの商品グループと独自に作成したメニュー項目を組み合わせる

1.の方法にて商品グループをメニューとして取り込み、2.の方法にて独自メニューをドラッグ&ドロップで追加します。

「メニュー内容」エリア

左側エリアです。
実際にユーザー画面(ECサイト)に表示されるメニュー項目となります。

表示順を変更する
表示順を変更するボタンをマウスで選択してドラッグするとメニューを上下に移動でき、メニューの表示順を変更できます。
同じ階層内でのみ順番変更できます。
入れ子状態の場合は、親メニューを移動すると、子メニューも一括で表示順が変更されます。
メニューを開くボタン
下部階層があるメニュー項目に表示されます。を押下すると下部階層を表示します。
リンクありボタン/リンクなしボタン/表示しないボタン
メニューをリンクあり・リンクなし・非表示に切り替えできます。
表示状態のメニューは、表示しないボタンを選択するとECサイトで非表示にできます。(HTMLタグが出力されません。)
非表示状態のメニューは、リンクありボタン・リンクなしボタンいずれかを押下すると表示できます。
下部階層にメニューがある(子グループがある)場合は、親メニューを非表示にすると、子メニューも一括で非表示になります。
メニューを外すボタン
外すボタンを押下します。
独自メニュー項目の場合、独自メニュー項目自体は削除されませんので、メニュー項目検索すればメニュー項目一覧に表示されます。

[メニュー項目]エリア

右側エリアです。
商品グループメニュー以外の「独自メニュー」の一覧が表示されます。
ユーザー画面(ECサイト)には表示されていません。[メニュー内容エリア]に配置すると表示されます。

追加ずみのメニュー項目を検索できます。

キーワード
メニュー項目を「メニュー項目名」「URL」で検索できます。部分一致で検索できます。文字数:100字
複数指定する場合は、空白で区切ってください。AND検索になります。
検索するボタン
指定した条件でパーツを検索できます。

メニュー項目一覧

検索条件に合致したメニュー項目が表示されます。
メニュー項目はメニュー内容の任意の位置に配置できます。

メニュー項目名
メニュー項目名が表示されます。選択すると並び替えできます。
更新日時
選択するとメニュー項目の更新日時で並び替えできます。更新日時自体は表示されません。

メニュー項目を変更する

メニュー項目を変更できます。
変更ボタンを押下すると、[メニュー項目追加・変更画面]へ遷移します。

メニュー項目を追加する

[メニュー項目]エリアから[メニュー内容]エリアにドラッグ&ドロップします。
追加したメニュー項目はメニューパーツ間で共通して使用できますので、他のメニューパーツにも追加できます。
またメニュー内容に配置された後も、メニュー項目一覧にはそのまま表示されるため、同じメニューに同じメニュー項目を複数追加できます。
なお、メニュー項目には下部階層を作成できません。

[メニュー項目追加・変更画面]独自メニュー項目を追加・変更する

[メニュー項目を追加する]ボタンを押下すると、メニューに商品グループ以外の「独自メニュー項目」を追加できます。

メニュー項目名

パーツの名前です。一覧やレイアウトに表示されます。文字数:100字

class

メニュー項目を囲むHTMLタグに表示するclassを設定できます。半角英数字・半角スペース・記号(-_{}@.)":100字
任意のメニューにCSSデザインを行う場合に使用できます。

リンク先

メニューのリンク先を設定できます。文字数:2,000字

新規ウインドウで開く

「新規ウインドウで開く」にチェックすると、リンク先を新規ウインドウで表示します。

保存する

メニュー項目を保存します。

戻る

元の画面に戻ります。未保存の作業内容は破棄されます。

メニュー項目を削除する

削除するボタンを押下すると、メニュー項目を削除できます。
メニュー項目を追加する(新規作成)場合には表示されません。

保存する

パーツを保存します。

キャンセルする

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

削除する

[メニューを削除する]ボタンを押下すると、メニューパーツを削除できます。削除したパーツは復元できません。
メニューパーツを追加する(新規作成)場合には表示されません。

戻る

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

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