PC用販売説明文の画像サイズがバラバラで表示されてしまいます。均等に表示される方法はありますでしょうか？

Question

1商品に縦長の画像と正方形の画像を登録しています。

スマホ表示の場合は綺麗に表示されるのですが、
PCで見たときにとても見栄えが悪くなります。
PCの見栄えも綺麗にしたいです。

対応方法としましては、
登録する画像サイズを同じにすると綺麗に登録できると思いますが、
それ以外の方法はありますでしょうか？

もし知っていましたら教えて頂けますと幸いです。

Accepted Answer

ECマスターズの伊藤です。

> 対応方法としましては、
> 登録する画像サイズを同じにすると綺麗に登録できると思いますが、
> それ以外の方法はありますでしょうか？

商品管理番号10000028にて、
商品ページを拝見させて頂きましたところ、
画像サイズは、CSSにて設定されておりましたので、
下記の通り修正をお願いいたします。

-----------------------------------------------------
#item-cont-re .img-box img {
max-width: 100%;
min-width: 500px;
}
-----------------------------------------------------
↓↓
-----------------------------------------------------
#item-cont-re .img-box img {
width: 100%;
}
-----------------------------------------------------

ですが、例えば500pxの横幅の画像を
100％や700pxなどで指定すると、
画像が拡大表示されるので、画質が
多少荒く表示されることがあります。

画像サイズの横幅は、なるべく統一して
管理されていく事をお勧め致します。

楽天では、PC用商品販売説明文に
挿入する商品画像のサイズを
「横幅700pxを推奨」としております。

PC用商品販売説明文やPC用商品説明文に
挿入する画像は、700px前後で作成するか
widthで700px程度に表示する幅を設定
頂く事をお勧め致します。

下記マニュアルページに、画像サイズの
推奨値についてのご案内がございます。
ご参考ください。

■魅力的な商品ページを作りましょう
https://navi-manual.faq.rakuten.net/design/000036875

もし、上記方法で修正できない場合、
対象のページのURLをご連絡ください。

Answer

ご返信ありがとうございます。
推奨ピクセルサイズなどあるとは知りませんでした。
ご教授頂き、ありがとうございます。

すみません。コンパスをそのまま利用していて（コピー、ペーストなどで再利用などしています）
記号の知識がありません。


商品管理番号3nennnikki1	（URLではなくてすみません。）
を修正したいのですが方法はありますでしょうか？

Answer

ECマスターズの北原です。

>すみません。コンパスをそのまま利用していて（コピー、ペーストなどで再利用などしています）
>記号の知識がありません。

失礼しました。
下記のような手順でお試しいただけますでしょうか。

RMSの商品編集ページにアクセスいただき、
PC用販売説明文内に下記のように
記述されているかと存じます。

#item-cont-re .img-box img {
  width: initial;
  max-width: 100%;
}

こちらを下記のようにwidth: initial;から
width: 100%;へ変更してください。

#item-cont-re .img-box img {
  width: initial;
  max-width: 100%;
}

↓ ↓ ↓

#item-cont-re .img-box img {
  width: 100%;
  max-width: 100%;
}

何卒よろしくお願いいたします。

Answer

説明不足で申し訳御座いません。

上記内容はわかるのですが、
商品管理番号10000028
程度でしたらそれほど変更しない判断でいます。

商品管理番号3nennnikki1 （URLではなくてすみません。）
を修正したいのですが方法はありますでしょうか？

Answer

ご回答内容を詳しく確認せず、返信してしまい大変失礼いたしました。

出来ました。
正直この内容は直せないを思っていましたので、大変嬉しいですし驚きました。
感謝申し上げます。