テスト環境（SandBox）マニュアル

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

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

はじめに   ボディ幅・ハーフ幅を確認する

レイアウト崩れの原因を探すため、ボディの幅、ハーフ幅と配置した画像の幅を確認します。
ボディ幅は、ストアデザインで設定したページ幅からサイトナビ幅と余白分を引いて計算します。

手順1  ページ幅を確認する

設定しているページの幅を確認します。ページ幅は以下の手順で確認できます。

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

手順2  設定しているテンプレートからサイドナビ幅を確認する

サイドナビの幅は、設定しているテンプレートのタイプによって異なります。
設定中のテンプレートは以下の手順で確認できます。

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

手順3  ボディ幅を計算する

ボディ幅は、ページ幅（手順1参照）からサイトナビ幅（手順2参照）と余白分を引いて計算します。

			ページ幅	－	サイドナビ幅	－	20ピクセル   （余白）		＝	ボディ幅
			お役立ち 1カラム・2カラム・3カラム、どのテンプレートでも同じ計算式です。

【例】 ページ幅950ピクセル / タイプ2 の場合

			ページ幅  950ピクセル	－	サイドナビ幅  180ピクセル	－	余白 20ピクセル		＝	ボディ幅  750ピクセル
			ボディ幅は750ピクセルのため、ボディ部分は幅「750ピクセル」利用できます。

手順4  ハーフ幅を計算する

ハーフ幅は、ボディを2分割したパーツ1個の横幅です。
ハーフ幅の計算は、ボディ幅（手順3参照）から余白分を引いた値を2で割った値になります。

			（	ボディ幅	－	19ピクセル  （余白）	）	÷	2	＝	ハーフ幅
			お役立ち 割り切れない場合は切り上げます。

【例】 ページ幅950ピクセル / タイプ2 の場合

			（	ボディ幅   750ピクセル	－	余白   19ピクセル	）	÷	2	＝	ハーフ幅   366ピクセル
			式としての答えは365.5になりますが、切り上げて366とします。 ハーフ幅は366ピクセルとなり、ハーフ部分は幅「366ピクセル」利用できます。

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

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

手順1

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

手順2

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

手順1

手順2

修正方法  その2.パーツのタイプを変更する

設定しているパーツのタイプ（パターン）変更で、表示崩れを修正することもできます。
選択タイプにより、ボディ部分に表示崩れをおこしているパーツは、下記になります。
表示崩れの箇所が下記に該当する場合、手順に従ってパーツタイプの変更をおこなってください。

■タイプで幅を変更できるパーツ

手順1

■各パーツに必要な最小幅

※テキストが画像の横にくるタイプのパーツは、1行に全角5文字として計算しています。

手順2

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

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

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

参照ツールマニュアル

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

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