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

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

Answer

ECマスターズの田中です。＞

＞のように記述しましたが、ほんの少しはみ出してしまいます。90%にしてもみましたが変わりません。なぜでしょうか。もし、画像と同じ囲い（

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

Answer

田中様ありがとうございます。単に

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

Answer

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

Answer

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

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

カテゴリーから探す