サムネイル画像の表示レイアウト

Question

ショップの大型リニューアルを予定しておりまして、
サムネイルを下記ショップのように変更したいのですが、
お知恵頂けると幸いです。

https://item.rakuten.co.jp/double-edge/pmo-pg001/

現在、自店舗は通常の縦並びのレイアウトになっていますので
より商品ページをコンパクトにミニマルに変更を検討しています。

どうぞ宜しくお願い致します。

Accepted Answer

ECマスターズの伊藤です。

> ショップの大型リニューアルを予定しておりまして、
> サムネイルを下記ショップのように変更したいのですが、
> お知恵頂けると幸いです。

ご参考に頂いた店舗さんですが、
https://www.rakuten.ne.jp/gold/double-edge/rms/productdetail/zoomblock/zb_pm099x.html
をiframeで読み込むほか、
tableの構造をくずすなど、かなり特殊なことを行っておりました。

代替案となりますが、下記のCSSを、商品説明文に入れることで、
商品第一画像の下に
サムネイルを複数列で表示することができるかと思いますので
お試しくださいませ。

なお、楽天の仕様変更により、
レイアウトが崩れるなどの可能性がございますので、
その点ご留意くださいませ。



/* PC版サムネイルを縮小表示 */
#pagebody .rakutenLimitedId_ImageMain1-2{
display:inline-block;
float: left;
}
#pagebody .rakutenLimitedId_ImageMain1-3:nth-child(1) {
width: 380px;
height: auto !important;
}

#pagebody .rakutenLimitedId_ImageMain1-3 {
width: 120px;
height: auto;
float: left;
margin: 5px;
}
#pagebody .rakutenLimitedId_ImageMain1-3 img {
width:100%
}

Answer

ありがとうございます！

楽天の仕様も色々と変わるので、教えて頂いたCSS挿入で対応させて頂きます。