未分類

コピペ?OKではてなブログ用のショッピングリストを作ってみた!!

ブログを運営されている方の中で、時々ショッピングリストのようなページを作っている方がいます。

特にWordpressだと開発の幅が効くので簡単に「ランディングページ」として作ることができます。

せっかく、ガジェットや漫画などレビューしているのでアマゾンアソシエイトで収益を上げたい!

 

かなりド素人なりに作ったものですが「カエレバ・ヨメレバ」を応用したショッピングリストのコードを紹介していきます。

特にこだわったところはしっかりレスポンシブ仕様になっていることです。

では行ってみようっ!

カエレバ・ヨメレバについて(情報基)

当サイトでは、商品紹介をする際に「カエレバ・ヨメレバ」を使用させていただいてます。

アマゾンアソシエイトや楽天アフィリエイトなどを利用している方にとって、簡単にリンク作成ができる便利ツール(サイト)です。

今回作ったショッピングリストもこのサイトで作ったリンクを基に編集しました。

カエレバ:https://kaereba.com/

ヨメレバ:https://yomereba.com/

 

まだ使ってない人はこれを登録してもらった方が勝手が良いです。

ショッピングリストのコード(コピペor参考OK)

では先にコードを載せておきます。レスポンシブデザインになっているので、スマホとPCで表記が変わります。

一点注意したいのは、僕は通常の記事では別のCSSで「カエレバ・ヨメレバ」の装飾を行っています。

そのため、はてなブログの見たまま表記→HTML編集から「<style>内容</style>」で強引にCSSを組み込みました。

 

今回注意したポイントは次になります。

  • HTMLとCSSはすべて記事に直接書き込んでます。
  • classやidは便宜上「kaerebalink1」など番号を増やしただけにしました。
  • リンク元や製品名は極力短く最長で2行まで
  • PC用はクールな感じに、スマホは暖色系で配色してみました。
  • Amazon, 楽天、Kindleの3サイト分しか用意してません。
  • yahooオクなどもできると思いますが枠が大きくなりすぎて不格好になりそうだったので2つ~3つくらいでリンクを作った方が便利です。

ショッピングページの見た目

PC版のショッピングページ

f:id:xyzkitazyx:20180103215320j:plain

 こんな感じで、商品ごとの枠になっています。

アマゾンを残しておいて、楽天ボタンの代わりにレビュー記事のリンクを貼ってもいいかもしれません。

スマホ版のショッピングページ

 

f:id:xyzkitazyx:20180103215616p:plain

スマホページはこんな感じで左に画像、右にリンクを設置しました。

文字とリンクがずれているので直すか検討しています。

238行目を「 text-align:center;」にすれば揃えることができます。

もしコピペ等で活用される方は自己責任でお願いします。 

でも記事に直接打ち込むなら特にCSSを直接書き換えるわけじゃないのでむしろ簡単にチャレンジできちゃう気もしますね。笑

 

ショッピングリストを使ってできること

  • ジャンル別にまとめて紹介ができる
  • ランディングページとして収益性アップにつながる
  • 「ハンター・ハンター」など人気漫画を巻数別にリスト化できる
  • ブログをかっこよく見せられる
  • 無いよりはあった方がいい気がするw

というような感じでブログで商品紹介している人たちの参考になれば嬉しいです。

最後に

過去にも、コピペでブログのデザインを編集してきましたが、今回初めて自分で0から書いてみました。

たった100行書くだけに1日半もかかったのでまだまだ知識が浅いなと思いました。笑

初めてまだ1週間程度のレベルなのでこれから少しずつレベルを上げていきます。

 

 ではでは終わり、