楽天市場商品画像20枚を調整するCSS

Question

お世話になります。
商品画像20枚はPCページが間延びしてしまうので、wy2[オーガランド画像のとおり、商品ページの様に1枚目の商品画像を大きく、そのほかを並べて小さめで表示する方法が知りたいです。ご対応をいただけると助かります。###HR######IMG00da0992ac0e4cfb1c302844757168cc2.jpegIMG0###

Accepted Answer

ECマスターズの田中美帆です。

> 商品画像20枚はPCページが間延びしてしまうので、wy2[オーガランド画像のとおり、商品ページの様に1枚目の商品画像を大きく、そのほかを並べて小さめで表示する方法が知りたいです。

以下のCSSにて実装が可能です。

====================

/* 1枚目の商品画像をトップに大きく表示する指定 */
a[data-ratid="itempopup_1"] img {
width: 500px !important;
height: auto !important;
}

/* 2枚目以降の商品画像を3列に並べて表示する指定 */
img[expid] {
width: 160px;
height: 160px;
float: left;
margin: 5px;
}

====================

PC用商品説明文などの
HTMLが利用可能な箇所へ記述していただき、
表示のご確認をお願いいたします。

なお、楽天の仕様変更により、
レイアウトが崩れるなどの可能性がございますので、
その点ご留意くださいませ。

Answer

ECマスターズの菅原です。

いただいたご質問につきましては
週明け担当より回答させていただきます。

恐れ入りますが、
もうしばらくお待ちいただきますようお願いいたします。

Answer

ヨコから申し訳ございません。

ヘッダーフッターレフトナビへCSSを入れてみましたが、
第一画像がボケてしまいます。
width: 500pxを450とかにしても同じです。
解決策はありますでしょうか？
宜しくお願いします。

Answer

私は各、通常商品編集のPC用販売説明文に入れてみました。

Answer

ありがとうございます。
どちらも試してみましたが、同様に解像度が低い感じになりますね。
何か方法ないですかねー。

Answer

ECマスターズの田中美帆です。

スパさん
> ヘッダーフッターレフトナビへCSSを入れてみましたが、
> 第一画像がボケてしまいます。

ご案内したCSSとともに、
以下のソースコードの記述をお願いいたします。

====================

====================

全ページに反映させたい場合は、
ヘッダー・フッター・レフトナビなど、
HTMLが利用可能な共通パーツに記述してください。

個別に反映させたい場合は、
PC用商品説明文など、各商品ページの
HTMLが利用可能な箇所に記述してください。

画像の表示が荒くなる原因を以下に記載しますので、
ご興味がありましたらご一読ください。

例：https://item.rakuten.co.jp/supereasy/harmonie82080015-200914/

こちらの商品ページでは、
1枚目の商品画像が以下のコードで記述されています。



URLの中に、パラメータとして
「_ex=200x200」とあり、
画像サイズが200pxに指定されています。

200pxの画像を500pxに引き伸ばしているため、
画像が荒く表示されております。

そのため、JavaScriptを使用して
URLのパラメータを変更することで、
画像が荒くなることを防いでおります。

Answer

田中美帆さん、完璧でーす！
助かりました。

サカナさん>
ありがとうございました。