楽天スマートフォンのカテゴリーページサムネイルについて

Question

お世話になります。

https://item.rakuten.co.jp/life-styling/c/0000000445/
こちらのスマホの商品サムネイルのように大きくきれいにしたいです。

どのようにすればよろしいでしょうか、

Accepted Answer

ECマスターズの伊藤です。

> 以前の正方形で作っていた部分は綺麗に表示されますが、
> width: 160px;
> height: 160px;
> を指定しているためにずんと横に伸びます。

CSS記述内容を、下記の通り修正していただき
ご希望どおりに表示されるか
ご確認いただけますでしょうか。

div#sCSLContainer .sCSLBox01 div.inLeft img,
div#sCSLContainer .sCSLBox02 div.inLeft img {
  width: 160px;
  height: 160px;
  max-height: none !important;
  max-width: none !important;
}

↓↓↓

div#sCSLContainer .sCSLBox01 div.inLeft img,
div#sCSLContainer .sCSLBox02 div.inLeft img {
    width: auto;
    height: auto;
    max-height: 100% !important;
    max-width: 100%  !important;
}


#sCSLContainer .inLeft{
  width: auto !important;
  height: auto !important;
}

↓↓↓

#sCSLContainer .inLeft {
    width: 160px !important;
    height: 160px !important;
    text-align: center;
}

Answer

ECマスターズの田中です。

いただいたカテゴリページでは、
外部JS・CSSファイルを活用して、
サムネイルを大きくする処理を実現しております。

https://www.rakuten.ne.jp/gold/life-styling/js/sp-item-images2.js
上記外部JSファイルで
きれいな商品画像を読み込み直し、

https://www.rakuten.ne.jp/gold/life-styling/css/sm-ctg.css
上記外部CSSファイルの
/* 画像サイズを大きく表示する */
以降のCSSで見た目を整えることで
実現しておりますので、

taketake(タケタケ)さんのショップでも、
同様の外部JS・CSSファイルをGOLDにご用意の上、
読み込んでいただければ結構です。

読み込む方法がわからない、
楽天GOLDに外部JS・CSSファイルを用意する方法がわからない、など、
不明な点がございましたら、返信にてお知らせください。

Answer

ECマスターズ田中様

無事設定できました。ありがとうございます。
設定できたら問題がありまして、弊社が最近作っている画像１（サムネイルになる画像）が縦に長い長方形で作成しています。
以前の正方形で作っていた部分は綺麗に表示されますが、
  width: 160px;
  height: 160px;
を指定しているためにずんと横に伸びます。

正方形、長方形に対応できる方法はございますでしょうか。
よろしくお願い致します。

Answer

伊藤さま
うまく表示できました！ありがとうございます！！