YAHOOショッピングのスマホのレスポンシブ対応

Question

立て続けに質問すみません！

YAHOOショッピングの商品スマホページのレスポンシブ対応について、
普通に画像を入れるコードを記述しても、当たり前ですが登録した画像サイズがそのまま表示されますよね。。。

どのように対応するか教えてもらえませんか。

Answer

ECマスターズの塚本です。

こちらお調べしまして、
別途担当者よりお返事させていただきます。

お時間いただくと思いますが、
今しばらくお待ちください。

Answer

ECマスターズの田中です。

画像を入れるコード（タグ）に、横幅100%の指定をしていただきますと、
どのようなスマートフォンで見た時でも
ページの横幅いっぱいに画像を表示させることができます。


↓


なお、Yahoo!ショッピングの場合、
商品画像を挿入される際は、URLにご注意ください。

実際の商品ページに使われているURLを引用すると、
画像本来のサイズではなく、
引用元と同じサイズに補正された画像になってしまいます。

Yahoo!ショッピングの商品画像URLは
http://item.shopping.c.yimg.jp/i/表示サイズ指定（アルファベット一文字）/ストアアカウント_商品コード(_番号)
このような法則で作成されており、
「表示サイズ指定」の部分に　f　を指定すると、画像本来のサイズで表示させることができます。
（例）http://item.shopping.c.yimg.jp/i/f/yourstore_sampleitem

Answer

レスポンシブというか単純なことでしたね。
ありがとうございました！すべて商品に導入していきます。

Answer

こちらの質問を拝見させていただきまして、便乗質問させて頂きます。


のように記述しましたが、ほんの少しはみ出してしまいます。90%にしてもみましたが変わりません。なぜでしょうか。

画像は追加画像内のパソコン用画像を利用しています。スマホ用の画像を用意しfを指定すべきでしょうか。

よろしくお願い致します。

Answer

ECマスターズの田中です。

＞
＞のように記述しましたが、ほんの少しはみ出してしまいます。90%にしてもみましたが変わりません。なぜでしょうか。

もし、画像と同じ囲い（など）の中に、
画面からはみ出す横幅の要素が含まれていた場合、
囲いの横幅がその要素によって拡げられてしまい、
100%を指定すると拡がった囲いの横幅に合わせられてしまう、
という可能性もありますが、

90%でも変わらない、というのは
少し小さくなるのでもなく、全く見た目に変化がないということでしょうか。
その場合、横幅の指定が別の場所で行われている可能性があります。

実際に広がっている様子を確認することができれば
原因を調べることができますので、
広がっている様子が確認できるページのURLをお知らせいただけますでしょうか。
フォーラムで回答しづらい場合は、リクエストフォームよりお知らせください。

Answer

田中様
ありがとうございます。

単にで羅列してあるだけですので、はみ出す要素はないと思います。
商品説明（PCのみ）の記述をフリースペース（スマホのみ）にコピーしてみたところ、画像が大きくはみ出しましたのでwidthをピクセルから100%にしました。結果、大きくはみ出した画像は小さくなったのですが、5％くらいはみ出します。

商品URLはリクエストフォームでお送りします。よろしくお願いします。

Answer

ECマスターズの田中です。

ご返答が遅れてしまい、失礼いたしました。
また、商品URLをご連絡いただき、ありがとうございました。

商品URLを確認したところ、
toclearcase.jpgの横幅が固定値で指定（width="389"）されており、
これが全体の横幅を拡げる原因となっておりましたので、
他画像と同様に割合で指定していただきますようお願いします。

Answer

田中様

漏れがあったのですね。失礼いたしました。
お調べ頂き、ありがとうございました。お手数をおかけいたしました。