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

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

［オプションを設定する］ボタン

HTML要素

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

id

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

class

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

管理タグ

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

備考

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

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

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

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

置換文字の活用方法

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

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

パーツにclassを追加できます。ECサイト画面に出力されます。 半角英数字・半角スペース・記号("以外)：100字

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

メニューの作成方法

3つの方法をご紹介します。

• 【方法1】登録済みの商品グループを読み込む
• 【方法2】独自に作成したメニュー項目を配置する
• 【方法3】登録済みの商品グループと独自に作成したメニュー項目を組み合わせる

【方法1】登録済みの商品グループを読み込む

運用＞商品管理＞商品グループ管理にてあらかじめグループを作成してください。

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

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

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

※同じ階層内でのみ順番変更できます。
※非公開状態の商品グループも取り込まれますが、ECサイトには表示されません。
※闇市に指定した商品グループは取り込まれません。

メニューの読み込み設定方法

以下の2パターンあります。

すべての商品グループにリンクを設定する

読み込み時、すべての商品グループで、商品グループページへのリンクを設定します。
読み込み後、商品グループごとにリンク設定（有・無）を変更できます。

最下層の商品グループにリンクを設定する

読み込み時、子グループの設定されていない商品グループのみリンクを設定します。
読み込み後、商品グループごとにリンク設定（有・無）を変更できます。

以下の例では、「ファッション」には子グループが設定されているためリンクされません。（「>」マーク非表示）

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

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

いったん商品グループを読み込んで保存した後に、運用＞商品管理＞商品グループ管理にて新たにグループを追加しても、自動的にメニューには読み込まれません。

追加登録した商品グループをメニューに追加するには、再度［商品グループを読み込む］ボタンを押下する必要があります。

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

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

上のように登録されている商品グループについて、

• 「3階層目まで（すべてのグループにリンク設定）」を選択
• ［商品グループを読み込む］ボタンを押下した場合 の、「メニュー内容」エリアとユーザー画面（ECサイト）上の表示例です。

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

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

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

ユーザー画面（ECサイト）の表示

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

【方法2】独自に作成したメニュー項目を配置する

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

「メニュー内容」エリア（左）と「メニュー項目」エリア（右）にて作成します。

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

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

新たに独自メニューを追加したい場合

［メニュー項目を追加する］を押下します。
［メニュー項目追加・変更画面］が開きますので、ラベルやリンク先などを設定します。

くわしい設定方法は、［メニュー項目追加・変更画面］をご覧ください。

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

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

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

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

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

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

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

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

表示順を変更する

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

同じ階層内でのみ順番変更できます。
入れ子状態の場合は、親メニューを移動すると、子メニューも一括で表示順が変更されます。

メニューを開くボタン

下部階層があるメニュー項目に表示されます。
　を押下すると下部階層を表示します。

リンクありボタン/リンクなしボタン/表示しないボタン

メニューをリンクあり・リンクなし・非表示に切り替えできます。

表示状態のメニューは、 表示しないボタンを選択するとECサイトで非表示にできます。（HTMLタグが出力されません。）
非表示状態のメニューは、 リンクありボタン・ リンクなしボタンいずれかを押下すると表示できます。

下部階層にメニューがある（子グループがある）場合は、親メニューを非表示にすると、子メニューも一括で非表示になります。

メニューを外すボタン

外すボタンを押下します。
独自メニュー項目の場合、独自メニュー項目自体は削除されませんので、メニュー項目検索すればメニュー項目一覧に表示されます。

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

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

キーワード

メニュー項目を「メニュー項目名」「URL」で検索できます。部分一致で検索できます。 文字数：100字
複数指定する場合は、空白で区切ってください。AND検索になります。

検索するボタン

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

メニュー項目一覧

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

メニュー項目名

メニュー項目名が表示されます。選択すると並び替えできます。

更新日時

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

メニュー項目を変更する

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

メニュー項目を追加する

［メニュー項目］エリアから［メニュー内容］エリアにドラッグ&ドロップします。

追加したメニュー項目はメニューパーツ間で共通して使用できますので、他のメニューパーツにも追加できます。
またメニュー内容に配置された後も、メニュー項目一覧にはそのまま表示されるため、同じメニューに同じメニュー項目を複数追加できます。

なお、メニュー項目には下部階層を作成できません。

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

メニュー項目名

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

class

メニュー項目を囲むHTMLタグに表示するclassを設定できます。 半角英数字・半角スペース・記号("以外)：100字

任意のメニューにCSSデザインを行う場合に使用できます。

リンク先

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

ー新規ウインドウで開く

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

保存する

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

既存メニュー項目を変更して保存する場合は、更新されるメニューの一覧がモーダルで表示されます。

［メニュー項目を変更して保存する］ボタン

押下すると、変更内容が保存されます。

戻る

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

メニュー項目を削除する

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

保存する

パーツを保存します。

［キャンセル］ボタン

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

［メニューを削除する］ボタン

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

［戻る］ボタン

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

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

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