SandBox（テスト環境）利用者向けマニュアル

ページレイアウトの崩れの多くは、画像などの要素の幅がテンプレートの幅より大きいことが原因です。
このページでは、サイドナビ部分のレイアウト崩れの原因を探す方法と、修正方法を説明します。

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

はじめに   サイドナビ幅を確認する

レイアウト崩れの原因を探すため、サイドナビの幅と配置した画像の幅を確認します。

はじめに、サイドナビの幅を調べます。サイドナビの幅は、設定しているテンプレートのタイプによって異なります。現在、設定しているテンプレートを確認します。

手順1  設定しているテンプレートを確認する

設定中のテンプレートは以下の手順で確認できます。

1. ストアクリエイターProトップページ「ストア構築」の［ストアデザイン］をクリックします。
2. 左カラム「ストアデザインメニュー」の「共通設定」から［テンプレート選択］をクリックします。
3. 表示された「テンプレート選択」画面の「1. テンプレートの種類を選択してください。」の項目で選択されているタイプ（タイプ1～11）を確認します。

手順2  サイドナビ幅を確認する

テンプレートのタイプを確認したら、さらに“サイドナビ幅”を確認します。
サイドナビの幅は、180ピクセル、200ピクセル、220ピクセルの3種類です。

タイプ名	テンプレート イメージ	サイドナビ幅 （単位:ピクセル）	デザインレイアウトパターン
タイプ1		―	サイドナビなし
タイプ2		180	全体2カラム サイドナビが短いレイアウトパターン
タイプ3		200
タイプ4		220
タイプ5		180	全体3カラム サイドナビが短いレイアウトパターン
タイプ6		200
タイプ7		180	全体2カラム サイドナビが長いレイアウトパターン
タイプ8		200
タイプ9		220
タイプ10		180	全体3カラム サイドナビが長いレイアウトパターン
タイプ11		200

お役立ちストア内商品カテゴリの幅について

サイドナビに配置できる「ストア内商品カテゴリ」パーツは自動的に両サイドに1ピクセルの枠線がつくため、使える画像の横幅はサイドナビ幅から2ピクセルをひいた幅になります。

原因を探す  配置した画像の幅を調べる

サイドナビ幅よりも大きな画像などは配置できません。
サイドナビ幅よりも大きな画像を配置するとレイアウト崩れが起こります。
サイドナビ内に配置した画像の幅を調べ、ページレイアウト崩れの原因となっている画像を探します。

手順1

レイアウトが崩れているストアページ、またはプレビュー画面を表示します。
幅を知りたい画像にカーソルを合わせ、 右クリックをし、［プロパティ］を選択します。

手順2

修正方法  その1.原因画像を縮小する

手順1

お手持ちの画像加工ソフトなどで、ページレイアウト崩れの原因となる画像の横幅を小さくします。
サイドナビの幅は、下記の3種類です（タイプ1はサイドナビがありません）。

お役立ち

必ず設定したサイドナビ幅よりも小さい横幅にしてください。
画像加工ソフトをお持ちでない場合は、フリーソフトなどをご利用ください。

手順2

修正方法  その2.テンプレートを変更する

手順

ポイントサイドナビ幅をひろげることができるテンプレート

サイドナビの幅は、180ピクセル、200ピクセル、220ピクセルの3種類です。
180ピクセル、200ピクセルのテンプレートは、よりサイドナビ幅が大きい別のテンプレート選択ができますが、サイドナビ幅220ピクセルの「タイプ4」「タイプ9」は、別の修正方法をお試しください。

同じデザインレイアウトを保持したまま、サイドナビ幅の拡大ができるパターンは下記の通りです。

作業後、レイアウト崩れが解消されない場合は、ほかの修正方法（原因画像を縮小する、HTMLタグを見直す、レイアウト崩れが直らなかったら）もお試しください。

修正方法  その3.HTMLタグを見直す

レイアウト崩れが直らなかったら

ここまでの方法で崩れが直らない場合は、ボディ部分やフッター部分に問題がある可能性があります。
それぞれの修正方法もあわせてご覧ください。

参照ツールマニュアル

ストアデザイン＞ストアエディタ活用のヒント  >>「ボディレイアウト崩れの修正」
ストアデザイン＞ストアエディタ活用のヒント  >>「フッターレイアウト崩れの修正」

それでも崩れが直らなかったら