ここから本文です
掲載日:2020年09月15日

サイドナビパーツ:ストア内商品カテゴリ

【ご注意】
本ページで説明の機能は、2021年1月廃止予定です。
お早めに「新ストアデザイン」への切り替えを実施くださいますようお願いいたします。
「新ストアデザイン」に関するご案内 (実施概要、スケジュールのご確認)
「新ストアデザイン」対応のマニュアルよくある質問
「ストアデザイン」と「新ストアデザイン」の新旧パーツ比較一覧

「ストア内商品カテゴリ」パーツを利用するとストア内に作成した、ストアカテゴリへのリンクが自動表示されます。「ストア内商品カテゴリ」パーツは、共通領域のサイドナビに配置されます(かんたんモード/通常モード共通)。
このページでは、「ストア内商品カテゴリ」パーツの編集方法について説明します。

「ストア内商品カテゴリ」編集画面を開く

「ストア内商品カテゴリ」を編集する

お役立ち「ストア内商品カテゴリ」パーツを配置できる場所
「ストア内商品カテゴリ」パーツは、共通領域のサイドナビに配置できます。ヘッダー、フッターには配置できません。
ポイント表示数
ストアカテゴリは、8階層、12万件まで登録できます。ただし、ストア内商品カテゴリパーツでは、40カテゴリまでの表示となります。
参照ツールマニュアル
ページ編集>カテゴリページの編集  >>「カテゴリページを作成する」

※本マニュアルの掲載内容は、予告なく変更される場合があります。
※システム仕様に変更があった場合は、「ストアクリエイターPro」トップページでお知らせいたします。
  「ストアクリエイターPro」トップページを頻繁にご覧になることをおすすめいたします。

「ストア内商品カテゴリ」編集画面を開く

「サイドナビ共通設定」画面
ストアクリエイターPro「ストア構築」の[ストアデザイン]を選択します。

表示された画面左カラムの「ストアデザインメニュー」の共通設定から[サイドナビ]をクリックします。

「サイドナビ共通設定」「デザイン編集」タブの画面イメージに表示されている[ストア内商品カテゴリ]をクリックすると、画面下部に「ストア内商品カテゴリ」設定項目が表示されます。

お役立ち
「デザイン編集」タブの画面イメージに[ストア内商品カテゴリ]が見当たらない場合、「パーツの並び替え」タブを選択し、[ストア内商品カテゴリ]を画面イメージへドラックで移動してください。 画面イメージ[ストア内商品カテゴリ]が移動した後、再び「デザイン編集」タブへ戻り、「デザイン編集」タブの[ストア内商品カテゴリ]をクリックします。
参照ツールマニュアル
ストアデザイン>通常モード:サイドナビ
>>「サイドナビパーツの並べ替えとデザイン編集方法」

「ストア内商品カテゴリ」を編集する

手順1

「ストア内商品カテゴリ」設定項目
「ストア内商品カテゴリ」は5つの表示タイプから選択できます。
表示パターンを選択します。

パターンごとの表示例、仕様は「表示例と仕様」の項をご確認ください。

表示例と仕様

全タイプ
共通仕様
  • 「ページ編集」の「サイトマップ」で表示されている並び順で商品カテゴリが表示されます。
  • 「ページ公開」を「非公開」に設定しているカテゴリは表示されません。
  • 「隠しページ設定」されているカテゴリは表示されません。
  • お役立ち
    「hiddenpage」も「隠しページ設定」を解除することで表示されます。

タイプ1  表示例 
  • 第一階層のカテゴリ(トップページ直下に作成したカテゴリ)のみが、文字のリンクで表示されます。
  • カテゴリ名左側の、三角の画像は変更できません。
タイプ2  表示例 
  • 第一階層のカテゴリのみが、自動生成されたボタンのリンクで表示されます。
タイプ3  表示例 
  • 第一階層のカテゴリのみが、設定された画像のリンクで表示されます。
  • ボタン画像はサイドナビ幅より2ピクセル引いたサイズ以下にしてください。
  • 大きなサイズの画像をアップロードすると、ページの崩れが起こります。
タイプ4  表示例 
  • 開いているページ以下のカテゴリが展開されて表示され、商品ページではパーツ自体が非表示となります。
  • カテゴリ名が文字のリンクで表示され、カテゴリ名左側の三角の画像は変更できません。
タイプ5  表示例 
  • カテゴリの第一階層と第二階層を表示します。
  • 第一階層のみ画像を設定できます。
  • ボタン画像はサイドナビ幅より2ピクセル引いたサイズ以下にしてください。
  • 大きなサイズの画像をアップロードすると、ページの崩れが起こります。

手順2

「ストア内商品カテゴリ」編集フォーム
「ストア内商品カテゴリ」パーツ編集フォーム
表示させる「ストア内商品カテゴリ」の色・デザインを確認します。
タイトルの表示方法を3種類から選択し、必要事項を入力します。選択したパターンにより入力必須項目が異なるので、パターンに合わせた入力を行います。
画像
タイトルで「画像」を選択した場合、設定が必要な項目です。
利用したい画像は[参照]をクリックし、アップロードをおこなうか、あらかじめ「追加画像」としてアップロードした画像を選択指定します。
タイトル
表示方法で「シンプル」を選択した場合、入力が必要な項目です。
全角10文字(20バイト)以内のテキストを入力します。
HTML
表示方法で「HTML」を選択した場合、入力が必要な項目です。
全角500文字(1000バイト)以内でHTMLの記述が可能です。
パーツの色は、「テンプレート選択」やストアデザインの「全体の設定」で設定した色に従って表示されます。
「ストア内商品カテゴリ」パーツに画像を使用せず、また色の変更もおこなわない場合、画面下部の[保存]をクリックを押すと「ストア内商品カテゴリ」パーツの設定が完了します。

全体設定の色ではなく、このパーツのみ色変更をしたい場合は、手順3に進みます。

また、任意のボタン画像を配置する場合は、タイプ3または5を選択し、「画像」欄のそれぞれの[参照]ボタンを押し、画像を設定します。
利用したい画像は[参照]をクリックし、アップロードをおこなうか、あらかじめ「追加画像」としてアップロードしたい画像を選択指定します。

ポイント画像サイズ
ボタン画像はそのままのサイズで表示されます。
ページの幅にご注意ください。

画像を指定したら、画面下部の[保存]をクリックを押すと「ストア内商品カテゴリ」パーツの設定が完了します。


参照ツールマニュアル
ストアデザイン>通常モード
>>「テンプレートの選択」
>>「全体の設定」

手順3

「詳しく設定する」画面
「詳しく設定する」画面
このパーツのみ色変更をしたい場合は、[詳しく設定する]をクリックします。

「色パネル」が開くので、ボタン色や文字色、枠色などの設定をおこないます。
[色を選ぶ]をクリックすると「色参照パネル」が開き、色見本を確認しながらの設定が可能になります。

設定したい色をクリックして[保存]ボタンを押すと、入力欄には選択した色を表すRGB値(カラーコード)が自動で表示されます。
お役立ち
入力欄に直接RGB値(カラーコード)を入れて指定することもできます。

各項目の色を選択を行なった後、[このモジュールの色を優先する]にチェックを入れると、テンプレートや全体設定で指定した色ではなく、ここで指定した色が優先表示されます。

色を指定したら、画面下部の[保存]をクリックを押すと「ストア内商品カテゴリ」パーツの設定が完了します。
よくある質問サイドナビのカテゴリ表示
Q.サイドナビの「ストア内商品カテゴリ」は、何件までのカテゴリを表示できますか。
また、カテゴリをいくつかの階層に分けて設定している場合、すべての階層を表示できますか。
A.ストアカテゴリは、8階層、12万件まで登録できます。
ただし、「ストア内商品カテゴリ」パーツでの表示件数は、40カテゴリまで、 階層表示は第2階層までです。

すべてのカテゴリを表示するには、「ストア内商品カテゴリ」パーツを使わずに「フリースペース」パーツにHTMLタグを記述して表示する方法があります。

  1. 「ストアデザイン」で「ストアデザインメニュー」の[サイドナビ]をクリックします。
  2. [パーツの並べ替え]タブをクリックします。
  3. 「ストア内商品カテゴリ」パーツを外し、「フリースペース1」パーツを設定します。
  4. [デザイン編集]タブをクリックし、[フリースペース1]パーツを選択します。
  5. HTMLタグを使ってカスタムページへのリンクを記述します。
  6. [保存]ボタンを押します。
よくある質問サイドナビの設定
Q.サイドナビをなくすことはできますか。 もしくは、サイドナビの幅を変更できますか。
A.サイドナビの幅は、選択しているテンプレートの種類(タイプ)により異なります。

テンプレート選択機能でサイドナビのないテンプレート(タイプ1)を選択すると、サイドナビのないストア作成できます。
また、サイドナビのあるテンプレートを選択の場合、サイドナビ幅は180ピクセル、200ピクセル、220ピクセル のいずれかになります。

サイドナビ幅180ピクセル
テンプレートがタイプ2、タイプ5、タイプ7、タイプ10の場合
サイドナビ幅200ピクセル
テンプレートがタイプ3、タイプ6、タイプ8、タイプ11の場合
サイドナビ幅220ピクセル
テンプレートがタイプ4、タイプ9の場合

テンプレートの変更方法や、テンプレートによるサイドナビ幅は、本マニュアル「テンプレートの選択」をご確認ください。
よくある質問サイドナビのレイアウト崩れ
Q.サイドナビのデザインレイアウトが崩れてしまいました。直すにはどうしたらよいですか。
A.デザインレイアウト崩れを直すためには、なぜデザインレイアウト崩れたのか、原因を確認し、修正をおこなう必要があります。
本マニュアル「サイドナビレイアウト崩れの修正」にて、おもな原因と対処についてまとめていますので、ご確認ください。

ストアデザイン

よくある質問 素材集
本文はここまでです このページの先頭へ