Amazonのインスタントストアをレスポンシブ化

アフィリエイト 

Amazonインスタントストアのページを作っていましたが、iframe形式でWordpressの固定ページに挿入すると、表示が切れたりスマホで綺麗に表示されない。そこで、綺麗に表示されるようにレスポンシブ化にしてみました。

レスポンシブのCSSを紹介しているサイトがあった

いろいろ調べると、レスポンシブに対応すればいいと。ただ、CCSをレスポンシブ対応はちと手間。floatとかいろいろ設定すればよいのだけれど・・・最近のCCS3?はさっぱり。そんなわけで、誰かがレスポンシブのCSSを公開していないかなぁって調べていたらあった!!

参考サイト

amazonインスタントストア レスポンシブ化(システムブレイン株式会社)

このサイトで公開されているCSSをとりあえずそのままインスタントストアに適応してみました。とりあえず、適応前と適応後を

【適応前】
デフォルトの設定だと、見切れてしまう場所があります。インスタントストア自体の幅とサイトのテーマの幅などをそ揃えないといけないです。一部画面を切り取ったのが下の画像。

Amazonインスタントストアレスポンシブ前

【適応後】

そして、レスポンシブにした場合は、下のとおりになります。きちんと表示されてます。
サイドバーとしてあったカテゴリや類似商品が下のほうに移動しています。
Amazonインスタントストア レスポンシブ

とりあえず、レスポンシブ化になったので、スマフォでも見切れることなく表示されるようになりました。
あとは、少しずつCSSを変えていこうかと思います。

Sponsored Link

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA