楽天のページレイアウトがある商品のページだけくずれる。

Question

いつもスケッチページで　ヘッダーフッター、商品ページ等を作成しています。

スケッチページで商品ページを作成し、反映後、
RMSでその商品の、

PC用商品説明文、スマートフォン用商品説明文、PC用販売説明文　に文章を付けたしたりしています。

他の商品と同じように登録したのですが、1商品だけ、ＰＣページのレイアウトが崩れ、
ページ全体の幅が大きくなり、看板の位置がずれ、PC用商品説明文も通常よりも幅が大きくなります。

何が間違っているのかわからず、どうやって修正すればよいかわかりません。
修正方法を教えて頂けないでしょうか。

Answer

ECマスターズの伊藤です。

> 他の商品と同じように登録したのですが、1商品だけ、ＰＣページのレイアウトが崩れ、
> ページ全体の幅が大きくなり、看板の位置がずれ、PC用商品説明文も通常よりも幅が大きくなります。

いただきましたURLを確認させていただいたところ、	
項目選択肢別在庫の表が横に長く、
商品説明文の枠を押し広げてしまっているために、
レイアウトが崩れておりました。

項目選択肢在庫の縦軸と横軸を変更していただければ
解消することができますが、
こちらを行いますと、販売実績が削除され、
検索結果に影響が出る可能性がございます。

項目選択肢別在庫はそのままで
レイアウトの崩れを解消する方法としまして、
CSSにて項目選択肢別在庫の表を、
商品説明文の枠を突き抜けて表示させる方法がございます。

下記のCSSを追加して、ご登録ください。
＝＝＝＝＝＝＝＝＝

/* 項目選択肢別在庫によるページの拡がりを抑える */
#rakutenLimitedId_aroundCart {
width: 500px;
overflow-x: visible;
}

＝＝＝＝＝＝＝＝＝
特にCSSをまとめている場所などがないようでしたら、
商品説明文に登録していただければ、登録することができます。

ご不明な点がございましたら、ご質問ください。
どうぞよろしくお願いいたします。

Answer

ECマスターズ
伊藤様

ご回答ありがとうございます。

>項目選択肢別在庫の表が横に長く、
>商品説明文の枠を押し広げてしまっているために、
>レイアウトが崩れておりました。

そういうことだったのですね。
謎が解けました。

>項目選択肢別在庫はそのままで
>レイアウトの崩れを解消する方法としまして、
>CSSにて項目選択肢別在庫の表を、
>商品説明文の枠を突き抜けて表示させる方法がございます。

>下記のCSSを追加して、ご登録ください。
＝＝＝＝＝＝＝＝＝

/* 項目選択肢別在庫によるページの拡がりを抑える */
#rakutenLimitedId_aroundCart {
width: 500px;
overflow-x: visible;
}

＝＝＝＝＝＝＝＝＝
>特にCSSをまとめている場所などがないようでしたら、
>商品説明文に登録していただければ、登録することができます。

特にCSSをまとめている場所などないので、
RMSの当該商品編集ページの
「PC用商品説明文」の枠に　文頭にそのままソースを入れたところ、
看板がずれたり、商品説明の横幅が長くなることなく表示できました。

感動です！
こういうことって、解決方法がわからなくて、
誰に聞いていいかもわからくて困っていたので、
本当に助かります。
ありがとうございます！

項目選択肢別在庫の表がは、改行などされずに、横に長いままですが、
これは、ソースを入れてもこのままの状態ですよね？

Answer

ECマスターズの伊藤です。

> 「PC用商品説明文」の枠に　文頭にそのままソースを入れたところ、
> 看板がずれたり、商品説明の横幅が長くなることなく表示できました。

無事、レイアウトが直ったようで安心いたしました。

> こういうことって、解決方法がわからなくて、
> 誰に聞いていいかもわからくて困っていたので、
> 本当に助かります。

まさにそのためにこのフォーラムがありますので
レイアウトに限らず、いろいろとご質問してください。

> 項目選択肢別在庫の表がは、改行などされずに、横に長いままですが、
> これは、ソースを入れてもこのままの状態ですよね？

はい、項目選択肢別在庫の表の見た目は変わらずに表示されます。
レイアウト的には下記のように、表が商品説明文の枠を突き抜けています。

修正前

□□ヘッダ□□□□□□
□□商品説明文□□□□□□□□□　←広がっている
□■表■■■■■■■■■■■■■■ □
□□□□□□□□□□□□□□□□□□□

修正後

□□ヘッダ□□□□□□
□□商品説明文□□□　　　　
□■表■■■■■■■■■■■■■■■ ←突き抜けている
□□□□□□□□□□□□□　　　　

少し小さめの画面になると、スクロールが表示されてしまうといった
問題もあるため、可能な場合は、表の横幅が広くならないように
作成していただいたほうが、お客様が使いやすいページになると思います。

Answer

ECマスターズ
伊藤様

ご回答ありがとうございます。

とても丁寧なご回答でわかりやすかったです。

助かりました。

ありがとうございました。