ブログを運営されている方の中で、時々ショッピングリストのようなページを作っている方がいます。
特にWordpressだと開発の幅が効くので簡単に「ランディングページ」として作ることができます。
せっかく、ガジェットや漫画などレビューしているのでアマゾンアソシエイトで収益を上げたい！
かなりド素人なりに作ったものですが「カエレバ・ヨメレバ」を応用したショッピングリストのコードを紹介していきます。
特にこだわったところはしっかりレスポンシブ仕様になっていることです。
では行ってみようっ！
カエレバ・ヨメレバについて（情報基）
当サイトでは、商品紹介をする際に「カエレバ・ヨメレバ」を使用させていただいてます。
アマゾンアソシエイトや楽天アフィリエイトなどを利用している方にとって、簡単にリンク作成ができる便利ツール（サイト）です。
今回作ったショッピングリストもこのサイトで作ったリンクを基に編集しました。
カエレバ：https://kaereba.com/
まだ使ってない人はこれを登録してもらった方が勝手が良いです。
ショッピングリストのコード（コピペor参考OK）
では先にコードを載せておきます。レスポンシブデザインになっているので、スマホとPCで表記が変わります。
一点注意したいのは、僕は通常の記事では別のCSSで「カエレバ・ヨメレバ」の装飾を行っています。
そのため、はてなブログの見たまま表記→HTML編集から「<style>内容</style>」で強引にCSSを組み込みました。
今回注意したポイントは次になります。
- HTMLとCSSはすべて記事に直接書き込んでます。
- classやidは便宜上「kaerebalink1」など番号を増やしただけにしました。
- リンク元や製品名は極力短く最長で２行まで
- PC用はクールな感じに、スマホは暖色系で配色してみました。
- Amazon, 楽天、Kindleの３サイト分しか用意してません。
- yahooオクなどもできると思いますが枠が大きくなりすぎて不格好になりそうだったので２つ～３つくらいでリンクを作った方が便利です。
ショッピングページの見た目
PC版のショッピングページ
こんな感じで、商品ごとの枠になっています。
アマゾンを残しておいて、楽天ボタンの代わりにレビュー記事のリンクを貼ってもいいかもしれません。
スマホ版のショッピングページ
スマホページはこんな感じで左に画像、右にリンクを設置しました。
文字とリンクがずれているので直すか検討しています。
238行目を「 text-align:center;」にすれば揃えることができます。
もしコピペ等で活用される方は自己責任でお願いします。
でも記事に直接打ち込むなら特にCSSを直接書き換えるわけじゃないのでむしろ簡単にチャレンジできちゃう気もしますね。笑
ショッピングリストを使ってできること
- ジャンル別にまとめて紹介ができる
- ランディングページとして収益性アップにつながる
- 「ハンター・ハンター」など人気漫画を巻数別にリスト化できる
- ブログをかっこよく見せられる
- 無いよりはあった方がいい気がするw
というような感じでブログで商品紹介している人たちの参考になれば嬉しいです。
最後に
過去にも、コピペでブログのデザインを編集してきましたが、今回初めて自分で０から書いてみました。
たった100行書くだけに１日半もかかったのでまだまだ知識が浅いなと思いました。笑
初めてまだ１週間程度のレベルなのでこれから少しずつレベルを上げていきます。
ではでは終わり、
ポメパンではガジェットや男性用の日用品、電子タバコや仕事論や転職まで幅広い記事を書いてます。読んでいただいた記事をSNS等でシェアいただけると今後の活動の励みになります。
