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

Question

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

Answer

ECマスターズの田中です。選択肢自体の見た目を改善するのは難しいですが、選択肢を囲む親要素の横幅を制限・はみ出した部分をそのまま表示するよう設定していただくことで、ページ全体の横幅が拡げられることを防ぐことはできます。下記

Answer

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

Answer

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

Answer

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

Answer

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

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

カテゴリーから探す