cozzy asked 4年 前
お世話になります。
UNIVERSEの商品詳細ページの画像についてです。
サムネールの写真がPCでは問題ないのですが、スマホで見るとサイドのマージンがない状態でずれた感じになってしまいます。また商品によっては3つのところで写真が2つしかなかったりすると、横並びの余白が広がってしまいます。
独自CSSで入力してはみましたが、変わりませんでした。すみませんがご指導の方よろしくお願いします。
BaseDesignInfo Staff answered 4年 前
ご質問ありがとうございます。
商品ページの画像レイアウト設定が「まとめてギャラリー」の場合、2枚目以降の画像サムネイルはスワイプスライダーになって表示されます。
さらにその状態で、商品画像が2枚しかないにも関わらず「写真サムネイル表示」が「3つ並び」や「4つ並び」になっている場合、どうしてもそのような状態になってしまいます。
商品ごとにページをカスタマイズしていくわけには行かない、ECサイトにおいて、まず最も良い状態としては「できるだけ商品全体で商品画像数を統一し、上記の設定を決める」のがベストですが、解決策としては次のような順でご検討ください。
解決策
まずは「画像レイアウト（ OFF:2枚目以降は広いエリアで）」をご検討ください。
この場合、サムネイルは別エリアにて、スワイプスライダーではなく単純な配置でレイアウトされますので、画像数がバラバラでもさほど違和感が出ません。
次に「写真サムネイル表示：2つ並び」をご検討ください。
どうしても今回のような設定がお好みでその状況を避けられない場合、独自CSSで以下のコードをご利用ください。（今回ご相談の点だけを解決することを目的としていますので、様々な条件の組み合わせによっては他の課題が現れるかもしれませんことだけご留意ください。）
.photoThumbs.thumbClm3 ul li,
.photoThumbs.thumbClm4 ul li {
width: auto;
}
cozzy answered 4年 前
すみません。レイアウト的にはクライアントの要望でこの形がベストなため、独自CSSで対応してみました。確かに写真と写真のマージンはなくなったものの、一番懸念している全体のマージンが左にズレたままになってしまい困っています。スマホの時だけなのですけど、ターゲット考えるとスマホユーザーが多いため、ご指導よろしくお願いします。
cozzy answered 4年 前
こんな感じです。独自CSSのところはメディアCSSは指定できるんでしょうか？？
https://gyazo.com/aa655c4c43a0819da5c9c94acd1cce77?fbclid=IwAR25Sx2LRg0Kl48BeUTuAj5H81zHW_F_pQt2QKo0GrBIOsGDeo6JdqvF7C8
> メディアCSS
というのがブレイクポイントを指定するCSSが記述できるか？ということでしたら、もちろん可能です。
@media screen and (xxx) { }
のように、必要なポイントを指定してマージンを取っていただければ大丈夫です。
ただ沢山の商品画像があるページがどうなるかも合わせて確認しながらCSSを調整して頂く必要はあるかと思います。
cozzy
replied 4年 前 @media only screen and (max-width: 480px){
.photoThumbs .thumbClm3 {
margin: 20px ;
}}
でやってみましたがうまくいきません。。。
cozzy answered 4年 前
コメントしたのですけど返答いただけると助かります。
お試し頂きありがとうございます。
こちらの商品数による特定条件での表示について、ケースとしては一般的に考えられるものであるといえるため、テーマ側にて調整対応させていただきました。
テーマアップデートは昨日自動配布されておりますので、一旦「独自CSS」を削除してご確認いただければと思います。
どうぞ宜しくお願いいたします
