今回は「もしもAPI」で取得した商品画像について解説していきます。


画像を表示させるためにこのような記述をしましたよね?


print ("<img src = ¥"http://www.moshimo.com/item_image/{$ImageCode}/1/l.jpg¥" border=¥"0¥" alt=¥"$name¥">");


これをURLの部分だけで分かりやすく解説すると・・・


http://www.moshimo.com/item_image/[画像のコード]/[画像の番号]/[画像のサイズ].jpg


となります。※仕様書6P参照
スポンサーリンク:

それぞれ下記のように

[画像のコード]

各商品画像に割り当てられている画像のコードです。


[画像の番号]

商品にもよりますが、それぞれの商品に1~6までの画像があります。

商品ID:306055 「厚切りカルビ」の場合は3枚しか画像がないので、1~3までが使用できます。

商品ページの確認


画像が3枚ありますよね?


左から1,2,3となっています。


6枚ある場合は、


1,2,3
4,5,6 です。


あなたの表示させたい画像を表示させることができます。


[画像のサイズ]

取得できる画像のサイズは4種類です。

コード 画像サイズ
 「 s 」 58px x 58px
 「 m 」 80px x 80px
 「 r 」 150px x 150px
 「 l 」 300px x 300px


サンプルで使用しているソースの画像部分をそれぞれ好きな数値に変更して確認してみてください。


どうですか?


画像やサイズがそれぞれ変わったと思います。


ここで一つ問題が発生します。


自分で商品ページやサイトなどをデザインし作成していくと、どうしても上記4サイズ以外のサイズじゃないとデザイン的に合わないこともしばしばあります。


そんな場合は直接画像のサイズを指定する事も可能です。


width(幅)とheight(高さ)を指定してやれば解決します!


【 例 (画像サイズを縦横200ピクセルで指定する場合)】

print ("<img src = ¥"http://www.moshimo.com/item_image/{$ImageCode}/1/l.jpg¥" border=¥"0¥" alt=¥"$name¥" width=¥"200¥" height=¥"200¥">");


こんな感じです。


縦横100ピクセルにしたい場合は 200 の数字を変更してやればOKです。


自分の好きなサイズで表示させることができます。


ただし、一つだけ注意点があります。


「もしもAPI」より取得する画像サイズより大きなサイズでは指定しないこと。


それは何故かと申しますと・・・


それぞれのサイズに最適化された解像度なので、「もしもAPI」より返ってくるサイズよりも大きいサイズを指定した場合、画像がかなりぼやけて表示されてしまいます。


HTMLなどのタグ初心者の方がよく陥る罠?ですので気を付けてください。
(実際には罠ではありません。)


今回は画像について解説していきました。


これを見ているアナタも管理人と同じく、日々レベルアップしていっていますね (^0^)/~


今回は以上です!!!お疲れ様でした。


次回はどんな記事にしようなかぁ~♪



もしもドロップシッピング

もしもドロップシッピング - 誰でも無料でネットショップ開業 副業にも