おすすめページを作成

WordPress , ,

興味のあるものや購入したものをAmazonインスタントストアでテーマ毎にまとめ、おすすめページとして一覧として表示できるようにしました。

Amazonインスタントストアを表示させる上で色々悩んだ。

当初は、AmazonインスタントストアをWordpressの固定ページにiframeで埋め込みテーマ毎にページを作成しようと考えていました。

ただ、ここで問題。

以前の記事になりますが、Amazonインスタントストアは、PCやスマホでの表示が使いわけが大変難しい。これを解決するために、レスポンシブ化を行いましたが、縦表示をピクセルで指定しないといけないという問題がありました。

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

妥協のレイアウトにした

そこで、考えたのがインスタントストアのウィジェットを表示させること。わざわざインスタントストアをそのまま表示させるのではなく、ウィジェットとして一部を表示させるということ

インスタントストアウィジェット

このウィジェットは、表示の大きさをある程度指定することができます。

ウィジェット表示設定

そこで、300×250サイズで表示させることにしてみました。このサイズであれば、スマホでも見切れるということはなくなるだろうと踏みました。

ただの画像であれば、表示の際に大きさが調整されるのですが、このウィジェットはうまく調整されない・・・おそらくCSSあたりをいじればどうにかなるんだろうと思うのですが。めんどくさい。

そんなこともあり、ウィジェットで表示させたのがこんな感じです。

ウィジェット表示

ブロック毎にわかれていい感じです。
とりあえずという感じで、各テーマのタイトルは、普通に文字を打ち込んでいますが、WEBアイコンなどで調整しようと考えています。

実際に購入しているものもあるのでプラグインでレビューの記事表示

ここで、実際に使ったことがあったり、購入しているものに関しては、記事を書いたりしているのでレビューの記事のみを表示するために「Recent Posts Widget Extended」を使いました。

したのような感じになりました。さらに、表示順に関しては、時系列にすると過去の記事が見れない問題があるので、とりあえずランダム表示に設定しています。

レビュー表示

是非、おすすめページをごらんください。

 

スポンサーリンク

コメントを残す

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

CAPTCHA


おすすめ記事

  • エルゴとカバーエルゴとカバー 赤ん坊の抱っこ紐といえば、エルゴさん。我が家もエルゴさんを使用しています。 ただ、エルゴを使っていて、ただひとつ不満点。これを解消するために、カバーを購入しました。 やはり抱っこ紐はエルゴさんのようだ 赤ちゃんを抱 […]
  • Amazonインスタントストア「映画」のページを作成Amazonインスタントストア「映画」のページを作成 Amazonのアソシエイトで、こつこつとお小遣い稼ぎをしたいので、このサイトではAmazonアソシエイトのプログラムも含めて、A8やGoogleAdsensを邪魔にならない程度に散りばべていきたいと思います。 今まで […]
  • Amazonインスタントストアに「音楽」「書籍」ページを追加Amazonインスタントストアに「音楽」「書籍」ページを追加 Amazonインスタントストアのページをさらに追加しました。 特に苦労もせずに「音楽」「書籍」ページを 自分が今まで聴いたり、読んだりしたもののアーカイブ代わりに使っていたAmazonインスタントストアのページを公 […]
  • そうだ、財布を買おう!!そうだ、財布を買おう!! ペンケースに引き続き、その時使っていた財布がボロボロだったので、革の財布がほしいなと思いStealさんで買ってしまいました。 ペンケースと同じメーカーの革のサイフ ペンケースの購入した記事で、Stealという札 […]
  • そうだ、万年筆を買おう!!そうだ、万年筆を買おう!! 最近、PCばかり使っていてボールペンなどを使う機会がめっぽう減りました。 ふと、思いつき「そうだ、万年筆を買おう」と去年思い立ちました。 どんな万年筆を買うか まず、どんな万年筆がいいのかなと。モンブランとかペリカ […]
  • そうだ、LAMYを入れるペンケースを買おう!!そうだ、LAMYを入れるペンケースを買おう!! LAMYの万年筆を買いましたが、今度は、これを入れるペンケースを買おうと思い立ちました。2014年の出来事です。 とにかくこだわったペンケースがほしい 万年筆を入れるなら、どんなものがいいかなと悩みましたが、革製の […]