- 楽天
- Yahoo!
縦にズラッと並んだ商品画像がスッキリ！商品画像をパネル状に表示するTips
2018/06/25
こんにちは！先日ズンバというダンスを体験してきたのですが、
まるで自分の身体ではないほどにロボットなogaRia船水でした。
ダンスうまい人尊敬しちゃいます。
さて、先日店舗様からこんなご要望を頂戴しました。
「楽天で大量の商品画像(1～20)を登録した際に、ページが間延びしてしまうので、オーガランドさんの商品ページの様に1枚目の商品画像を大きく、そのほかを並べて小さめで表示する方法が知りたいです！」
ありがとうございます！
弊社ショップのページを見てご要望いただくとは、なんとうれしいことでしょうか！
こちらいろいろと確認がありレシピにするまでお時間頂戴したのですが（お察しください…）、
満を持して公開したいと思います！
同じように商品画像で商品ページが長くなっている店舗様必見です。
商品ページがどう変わる？
写真で見せたい情報が多くてついつい商品画像を登録しまくっちゃった・・・
そんな想いを詰め込んだ商品ページはおそらくこのように長くなっているかと思います。
それが、本レシピのTipsを活用するとこんなにスッキリ！！
全ての商品画像から買い物カゴまでの距離もグッと短くなり、
写真を確認しながらカートに入れられるので
お客様にとっても良い事尽くめです！
手順
1. 次の画面からCSSをコピーしてきましょう
CSSはこちら(フルバージョン会員様限定)
2. コピーしたCSSを全ての商品に反映させる場合は「全ページ共通説明文(大)」に貼り付けます
個別に設定したい場合は反映させたい商品ページの「PC用商品説明文」に貼り付けましょう
以上で設定完了です！
コンパクト且つスマートに見せることで
お客様にも商品の魅力をより伝えられますね！
ぜひご活用頂けると幸いです。
323 
コメント
2 件のコメント
お世話になっております。画像をスッキリ表示させるCSS、とても参考になりました！
さっそくに実装してみましたが、小さい画像の横に「△画像をクリックすると拡大されます 」というテキストが出てしまうのはどうすれば消せるのでしょうか？
小出さま、ご質問ありがとうございます！
また早速レシピを実施頂きありがとうございます！嬉しいです。
「△画像をクリックすると拡大されます 」というテキストが出るとの事、その原因は分からなかったのですが、以下の記述を足すことで無理やり非表示にできるかと思います..！
img[width="8"] + br { display: none; } a.etc_link.rakutenLimitedId_ImageMainLink { display: none; } a.etc_link.rakutenLimitedId_ImageMainLink + br { display: none; }一度お試し頂けないでしょうか。解消されない場合はご連絡くださいませ！