楽天の商品ページの崩れについて

Question

お世話になります。

他商品ページのコピーから画像や商品名、説明文などを変更して、
テーブルなどは同じものを使って新たなページを作ろうとしておりますが、
なぜか、ページが崩れてしまいます。

部分的に検証しましたら、「PC商品説明文」を入力すると崩れることがわかりましたが、
どの部分が原因かがわからずに困っております。

個別にタグを送りたいのですが、ご教授お願いできますでしょうか？

Answer

ECマスターズの北原です。

>部分的に検証しましたら、「PC商品説明文」を入力すると崩れることがわかりましたが、
どの部分が原因かがわからずに困っております。

下記HTMLのように
 『style="max-width: 450px;"』を加えることで
レイアウトの崩れを直すことができます。

HTML（一部抜粋）

特徴


{商品説明.......}

{商品説明.......}の部分が横幅を
広げてしまい全体のレイアウトを
崩していました。

max-widthで横幅を限定することで、
レイアウト崩れを防ぐことができました。

450pxは横幅の数値ですので、
適時変更してお使いください。

Answer

ありがとうございます。
お陰様で解決いたしました。
他の商品は同じような事象にならなかったのですが、この商品のみ崩れてしまった原因は何かRMSの仕様変更などがあったのでしょうか？

今後同じように崩れてしまった際は、同じ部分を修正することに致しますが、
同じテーブルをかなりの数の商品に使っておりますが、今回初めての急な崩れだったので気になりました。
コメントの内容変更をしたり、キーワード追加する際に、他の商品も今後頻繁に崩れてしまうことが発生するのかどうかも気になりました。

今後についてお分かりになれば、、または対応策などあれば教えていただけますでしょうか？

Answer

ECマスターズの北原です。

>他の商品は同じような事象にならなかったのですが、この商品のみ崩れてしまった原因は何かRMSの仕様変更などがあったのでしょうか？

この商品のみ表示がおかしかった原因は、
下記説明文内にスペースが
大量に含まれていたためでした。

スペースによってtdタグの横幅が引き伸ばされ
他のレイアウトにも影響されていました。

一行目と二行目の間に大量のスペースが含まれています。

【説明文一部抜粋】
 ユニコーン 柄 の「 バックパック メイクセット 」の登場です。　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　リュック タイプ の 新デザイン で、 ユニコーン の耳と角がとびだした、とても キュート な仕上がりになっています。この リュック で お出かけ したら周りの目を引くこと間違いなし！

スペースを削除することでも、
レイアウト崩れを直すことができました。

商品説明文に関するRMSの
仕様変更はありませんので、
ご安心ください。

>今後についてお分かりになれば、、または対応策などあれば教えていただけますでしょうか？

styleで最大の横幅を指定する、
スペースを削除して登録する、
どちらでも問題なく解決できるかと思います。

作業する際に余分なスペースを入れていないか、
意識していただけますと幸いです。

Answer

ご教授ありがとうございました。

メーカーの案内ページの商品説明をコピペしましたが、知らない間に余分なスペースをまとめてコピペしていたことのようですね。

原因がわかりましたので今後気をつけます。