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

アフィリエイト 

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

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

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

参考サイト

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

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

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

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

【適応後】

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

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

スポンサーリンク

コメントを残す

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

CAPTCHA


おすすめ記事

  • Amazonインスタントストアに「音楽」「書籍」ページを追加Amazonインスタントストアに「音楽」「書籍」ページを追加 Amazonインスタントストアのページをさらに追加しました。 特に苦労もせずに「音楽」「書籍」ページを 自分が今まで聴いたり、読んだりしたもののアーカイブ代わりに使っていたAmazonインスタントストアのページを公 […]
  • 今月のアフィリエイトが好調。XperiaXZ様様です。今月のアフィリエイトが好調。XperiaXZ様様です。 ある記事を書いてから、今月のアフィリエイトの成果(Amazonアソシエイト&GoogleAdsens)が好調です。まぁ、運が良かっただけで、あと数日で売り上げはゼロになるだろうと思いますが。 どんな記事を書い […]
  • 広告を載せる注意点広告を載せる注意点 このサイトでは、AmazonやA8のほかに、有名なGoogleAdsensも掲載しています。広告を掲載するのにあたり注意しなければならないことが多々あった。簡単に言えば、「広告」だよってキチンと明記しなさいってことです […]
  • エルゴとカバーエルゴとカバー 赤ん坊の抱っこ紐といえば、エルゴさん。我が家もエルゴさんを使用しています。 ただ、エルゴを使っていて、ただひとつ不満点。これを解消するために、カバーを購入しました。 やはり抱っこ紐はエルゴさんのようだ 赤ちゃんを抱 […]
  • オムツと愉快なグッズオムツと愉快なグッズ 子供が産まれてから、西松屋や赤ちゃん本舗などで買い物をするようになりました。そして、一番買うものといったら、やはりオムツ。病院では、天下のパンパースでしたが、自宅ではムーニーを使っています。オムツ以外でも、雪国に住んで […]
  • ごちゃごちゃしたコンセントケーブルをすっきりごちゃごちゃしたコンセントケーブルをすっきり テレビ裏のごちゃごちゃしたコンセントのケーブルを赤子がいじって感電しないようにケーブル収納ボックスを購入してすっきりしました。 ただの箱なのに高い・・・・ 前々からコンセントの収納カバーを購入しようと思っていたの […]