項目選択肢が多くてページ表示が崩れます・・・

Question

お世話になっております。

こちらの商品がスーパーＳＡＬＥで目玉枠に当選しました。
https://item.rakuten.co.jp/ladyb1010/001-030/


一日で大量に作るのが難しい為、ＥＣさんのアドバイスで
出荷日を複数設けて目玉枠の在庫数に達しました。

カラーの選択肢が11もある為、
横にずら～っと並ぶと、ＰＣで見た場合、ページの表示が崩れてしまっている
と思います。
これをもっと見やすくする方法はないでしょうか。

項目選択肢の名前を短くするしかないのでしょうか。
そうなると名前と在庫数を一旦消さないとダメなので、大変です。

何か良い方法があればアドバイスをお願いします。

Answer

ECマスターズの田中です。

選択肢自体の見た目を改善するのは難しいですが、
選択肢を囲む親要素の横幅を制限・はみ出した部分をそのまま表示するよう
設定していただくことで、
ページ全体の横幅が拡げられることを防ぐことはできます。

下記タグをPC用販売説明文にご記載いただき、
一度表示をご確認いただきますようお願いします。


/* 項目選択肢別在庫によるページの拡がりを抑える */
#rakutenLimitedId_aroundCart {
    width: 500px;
    overflow-x: visible;
}

Answer

有難うございます！
早速入れてみました。
スマホから見ると、表示が収まっている様に思います。
明日、会社のパソコンで確認します！

Answer

昨日はありがとうございました。
表示、見やすくなりました！
すごい裏技ですね！
助かりました。

Answer

なっちゃんさん、田中さん、横から失礼します。

当店でも１商品だけ項目選択肢のせいで横に広く
表示されている物があります。

末尾URLが「10000094」の商品です。

当店ではPC商品説明文のみにHTMLを入れているのですが、
この場合は商品説明文のHTML内に ～を
埋め込めばいいでしょうか？

ChromeとFirefoxで見て、特に表示内容が変わって
いないように見受けられます。

アドバイスよろしくお願いいたします。

Answer

ECマスターズの田中です。

> 当店ではPC商品説明文のみにHTMLを入れているのですが、
> この場合は商品説明文のHTML内に ～を
> 埋め込めばいいでしょうか？

はい、ページ内に記載されていればいいので、
商品説明文に埋め込んでいただいて結構です。

> ChromeとFirefoxで見て、特に表示内容が変わって
> いないように見受けられます。

変わっていないように見える原因として、
項目選択肢別在庫のテーブルの幅が
親要素よりさほど広くないことが挙げられます。

標準の見た目のように、
個数の入力欄と、
「商品をかごに追加」「ご購入手続きへ」ボタンの間に
改行が入る程度まで詰める場合は、
タグ中の 500 を 440 まで減らしていただきますようお願いします。