pcトップページと商品ページにバナーの位置ずれ

Question

お世話になります。

スーパーセール期間ですので、ご回答急いでおります。
宜しくお願い致します。

楽天pcトップページではバナーの位置崩れが見あ当たらないのですが、
商品ページだとレフトやフッダーが少し左に移動してしまっております。

同じヘッダーフッダーレフトのテンプレートを使用しております。
修正箇所が特定できない状況です。

ご教授頂ければ幸いです。

Answer

ECマスターズの田中です。

原因について、改めてご案内いたしますので、
まずは下記styleタグを
ヘッダー・フッター・レフトナビ内の任意の場所に
ご記載の上、位置崩れが直るかどうかご確認をお願いいたします。


/* 位置崩れ緊急対応 */
body span.item_name,
body .cashlessPtBack {
    width: auto;
}

Answer

ECマスターズの田中です。

私よりご案内差し上げたソースを
無事ご設定いただけており、
ビーフさんも、位置崩れが解決している様子を
ご覧いただけているかと思います。

ビーフさんのショップでは、
楽天GOLDの「/css/cart.css」ファイルによって
商品ページの見た目の調整を行われているのですが、
その中で

span.item_name
つまり商品名の部分、および
.cashlessPtBack
つまりキャッシュレス５％の注意書き部分に対して
横幅のサイズが指定されたことが原因で、

買い物かご部分の横幅を押し広げ、
ページ全体の横幅を広げて、
位置崩れを起こしておりました。

CSSが複数箇所に書かれていると、
今後混乱を招く原因となる可能性がございますので、

cart.cssファイル内にある
span.item_name
.cashlessPtBack
両規則に含まれるwidthプロパティを
削除、もしくは数値を小さくした上で、
緊急対応用のstyleタグを外していただきますよう
お願いいたいます。

Answer

ECマスターズの田中です。

失礼しました、
.cashlessPtBack
の規則につきましては、
cart.cssではなく、楽天市場本来の指定であることを
確認いたしました。

.item_name に対する横幅の処理を行われた後で、
cart.cssの任意の場所に、
下記規則の追記をお願いいたします。

body .cashlessPtBack {
width: auto;
}

Answer

ご回答有難うございます。

>>>.item_name に対する横幅の処理を行われた後で、

□がよく分かりませんでしたがとりあえずwidthのタグを消しました。

>>>cart.cssの任意の場所に、
下記規則の追記をお願いいたします。

body .cashlessPtBack {
width: auto;
}

更新致しました。

>>>緊急対応用のstyleタグを外していただきますよう
お願いいたいます。

こちらも外しました。

上記と関係があるか分かりませんが、商品画像urlの画像や商品名などが表示されなくなりました。
一度、ご確認宜しくお願い致します。

Answer

ECマスターズの田中です。

申し訳ありません、他の商品を確認したところ、
対応不足な点がございましたので、
cart.cssの修正点とともにお伝えします。

先程追記していただいた
body .cashlessPtBack {
の上にある、単独の
}
を削除していただきますようお願いします。

続いて、削除された位置で結構ですので、
下記規則の追記をお願いします。

= この下の行から ====================
body .cart-button-container,
body div#rakutenLimitedId_aroundCart .rItemUnits {
  display: block !important;
}

/* 商品画像幅 緊急対応 */
.rakutenLimitedId_ImageMain1-3 img {
  max-width: 200px;
}
= この上の行まで ====================

詳細はのちほどご説明いたしますので、
まずは上記変更を行っていただきますようお願いします。

> 上記と関係があるか分かりませんが、商品画像urlの画像や商品名などが表示されなくなりました。

こちらの現象を確認することができませんでしたので、
実際にその様子が確認できるURLを
返信、もしくは元質問右下の「投稿内容について報告する」より
お知らせいただきますようお願いいたします。

Answer

ご回答有難うございます。

css修正致しましたがあっておりますでしょうか？

>>>> 上記と関係があるか分かりませんが、商品画像urlの画像や商品名などが表示されなくなりました。

こちらの現象を確認することができませんでした

どの商品も表示されておりません。
pc販売説明文での商品画像はございますが、その下部にでていた画像urlや商品名が表示されておりません。
御社では表示されているのでしょうか？？

Answer

ECマスターズの田中です。

> 御社では表示されているのでしょうか？？

私では確認できるように見えます。
弊社にて実際に閲覧できるURL、および見えている様子を
「投稿内容について報告する」よりお送りしますので、
同じ見た目になっているかどうか、ご確認をお願いいたします。
（届いていない場合はお知らせください）

> css修正致しましたがあっておりますでしょうか？

問題なく修正されておりました。
ご対応ありがとうございます。
追記していただいた規則についてご説明いたします。

= この下の行から ====================
body .cart-button-container,
body div#rakutenLimitedId_aroundCart .rItemUnits {
  display: block !important;
}
= この上の行まで ====================

横に並んだ「商品をかごに追加」「ご購入手続きへ」ボタンの横幅が
デザイン上想定された横幅を超えており、
レイアウト崩れの原因となることがわかりましたので、
同規則によって、縦並びになるように変更しております。

各ボタンの表示をご確認の上、横並びに戻される場合は、
全体のデザインとしての横幅を見直していただきますようお願いします。

= この下の行から ====================
/* 商品画像幅 緊急対応 */
.rakutenLimitedId_ImageMain1-3 img {
  max-width: 200px;
}
= この上の行まで ====================

商品画像のサムネイルのサイズが、
「高さを200pxに揃える」という設定になっているため、
横長の商品画像が設定されていると、横幅が長くなってしまい、
その分ページ全体の横幅を押し広げてしまいます。

上記規則をそのままご利用いただくか、
https://navi-manual.faq.rakuten.net/design/000009474
RMSの「商品画像サイズの設定」にて、
「幅」にご変更いただく、サイズの値を小さくする、
などの対応を行っていただいた上で、
上記規則を削除していただきますようお願いします。

Answer

ECマスターズの田中です。

ページをお知らせいただき、ありがとうございました。
確認したところ、PC用販売説明文に記載されている

 と記載されるべきところを -- とだけ記載されていることが原因で、
買い物かご周りほとんどの内容が、コメントとしてみなされて
無効化されていることがわかりました。

上記タグが入っているすべての商品に対して、

に修正していただきますようお願いいたします。