ここから本文です
掲載日:2020年02月10日

ページレイアウト崩れの修正

ストアデザイン時の、ページレイアウトが崩れてについて説明します。

ページレイアウト崩れのパターン

ページ作成にあたってのご注意とお願い

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

ページレイアウト崩れのパターン

崩れていないページ例
崩れていないページ例
ストアデザインにおいて、ページのレイアウトが崩れてしまうことがあります。

正しくは左図のようになるはずのストアが、下の図のように崩れてしまう場合があります。

ページくずれの主なパターンは、
…です。その原因の探し方、修正方法について、サイドナビ、ボディ、フッターに分けて説明していますので、リンク先ページにて詳細をご確認ください。

サイドナビ 設定したタイプのサイドナビ幅に中身が収まっていますか?
ボディ 設定したタイプのボディ幅に中身が収まっていますか? ボディ全体がサイドナビの下に回り込んでいませんか?
フッター 設定したタイプのフッター幅に中身が収まっていますか?

ページ作成にあたってのご注意

商品詳細ページ例
商品詳細ページ例
Yahoo!ショッピングのストアページは、ストアページ作成ツール「ストアエディタ」を使って編集できる
“ストアページ領域”(赤枠内)と、
“Yahoo!ショッピング共通領域”(青枠内)の
大きく二つに分類できます。
“Yahoo!ショッピング共通領域”は、基本、出店者様による任意の編集ができません。
また、随時、Yahoo!ショッピング側でレイアウト変更などを実施しています。

そのため、“ストアページ領域”のデザイン次第では、“Yahoo!ショッピング共通領域”との表示の兼ね合いなどが原因で、ページレイアウト崩れが発生する可能性があります。

レイアウト崩れが発生する主なパターンをご紹介しますので、ページデザインをおこなう際は、下記のパターンにご注意、ご確認のうえ、作成ください。

  1. タグエラー
  2. 表示崩れがおきやすいCSS
  3. position:fixedの利用

重要
Yahoo!ショッピングストアヘルプデスクでは、HTMLタグのサポートをしておりません。詳細なデザイン設定については、出店者様にてお試しくださいますようお願いいたします。

1.タグエラー

設定タグの閉じ忘れなど、タグエラーがおきている場合、ヘッダーなど“Yahoo!ショッピング共通領域”のレイアウトが崩れやすくなります。
「ストアエディター」の「タグ確認ツール」を利用し、タグチェックを行ってください。

参照ツールマニュアル
はじめに>ストア運営ツール  >>「HTMLタグ確認ツール」

2.表示崩れがおきやすいCSS

「フリースペース」におけるCSSのコーディング方法によっては、“Yahoo!ショッピング共通領域”にある「おすすめ商品」欄が意図しない位置に表示されるなどのレイアウト崩れが発生します。
以下設定の場合、レイアウトが崩れる可能性が高いため、ご利用をお控えください。

position:absoluteの多用 ページの高さが正しく検出されず表示が崩れやすくなります。
position:absoluteの多用
 (表示例
“Yahoo!ショッピング共通領域”にある「おすすめ商品」欄が以上に低い位置に表示され、ページが長くなる可能性があります。
表示例
!importantの利用 テキストリンク部分がすべて青色になるなどの表示不具合が発生いたします。
!importantは利用しないでください。

表示例:position:absoluteの多用例
表示例1:position:absoluteの多用例
緑の矢印部分が不要な空白です。

3.position:fixedの利用

表示例:position:fixedの利用例
position:fixedの利用例
出店者様が設定したposition:fixedにより、“Yahoo!ショッピング共通領域”部分にデザインが被ると、お客様の視認性が低下し、「ページレイアウト崩れ」と誤認されるため、position:fixedの利用はお控えください。

左図は緑枠の部分がYahoo!ショッピング共通領域にかぶってしまっている例です。

ストアデザイン

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