はてなブログの「Amazon商品紹介」を見やすく・分かりやすくしてクリック率を高める。

記事にした商品の購入リンクとしてAmazonのリンクを貼る機能がありますが、はてなブロガーはそれが「Amazonのリンク」だと分かりますが、普通の人は意外とそれが「Amazonのリンク（購入先）」だと分かってないような気もします(´･ω･`)ゝ

どこにもAmazonとは書いてませんし（笑

そこで、以前から何人かのはてなブロガーな人たちが使ってて
気になってた【カエレバ】と【ヨメレバ】という
外部アフィリエイトリンクパーツが気になってたので今回、導入してみる事に。

このブログパーツはAmazon＆Kindleをはじめ、楽天市場や7netなど主要なアフィリエイトが可能なショップへのリンクをまとめて貼れるすぐれものパーツです。

【ヨメレバ】は主にKindleに対応してて紙の書籍のAmazonリンクと電子書籍のAmazonリンクが分かれてます。
【カエレバ】はAmazonのリンクとそれ以外の業者のリンクと言った感じでしょうか。
どちらも同じ人が開発してます。

さてこのブログパーツ、CSSでデザインをカスタマイズできるように組まれているため
自由度が高いのですが、CSSが苦手な私にはムリゲーです_(˃̣̣̥ω˂̣̣̥｣ ∠)_

そこでCSSカスタマイズしてソースを公開してる人のサイトを探す旅へ( ˘ω˘)

こちらのサイトが引っ掛かり、見出しの「ボタンっぽくしたからクリック率上がるかな」に激しく同意。

　[CSS紹介] ヨメレバの見た目をカスタマイズしてボタンっぽくしたからクリック率上がるかな
　[CSS紹介] カエレバのCSSをカスタマイズしてボタン化、ヨメレバのCSSとの干渉回避

しかし、導入してみるもうまく反映されずorz

そこで次に【はてなブログ】で【カエレバ】をカスタマイズCSSを公開してる人のサイトを探してみました。

まず最初に見つけたのはもっちさんのブログ。

　カエレバ・ヨメレバのデザインをCSSコピペで簡単カスタマイズ！（レスポンシブ修正版）

ボタンがオシャレでとても良いですね！

早速、コピペで導入してみました。

ボタンが角丸で光沢感もありとてもオシャレ！

ただ、商品写真がセンターで下に詳細、そして購入リンクが並びますが、1商品の縦の長さが多めで複数掲載するとかなり長いページになってしまいそうだ(´･ω･`)

あと、当ブログでは何故かスマホ対応版CSSがうまく反映されなかった…orz

もう少し探しているとshunさんのブログを発見。

タイトルが【コピペ一発！はてなブログでカエレバ・ヨメレバをオシャレにカスタマイズ！】で私にも出来そうな予感（笑

記事によると【ヨメレバ】と【カエレバ】はCSS同士が干渉し合ってレイアウトが崩れるようですが、それらもうまく調整してるようです。スバラシイ.｡ﾟ+.( ﾟ∀ﾟ)b｡+.ﾟ

PCだとこんな感じで表示されます。

スマホだとこんな感じ。

PCでは、商品画像が左に来て詳細とリンクボタンが右なので、縦幅が大きくならず見やすいです。
スマホでは画面が縦長で横幅がないので縦長にレイアウトされます。

導入方法やCSSソースはコチラを見てください。

＊＊＊

PC用とスマホ用でCSSが異なり、はてなブログのメニューから「デザイン」＞「設定アイコン」＞「デザインCSS」の所にPC用のCSSを貼ります。

スマホはPC用とスマホ用でCSSが異なり、はてなブログのメニューから「デザイン」＞「スマホアイコン」＞「記事」＞「記事下」にスマホ用のCSSを貼ります。

これで【はてなブログ】側の下準備は完了です。

次に【ヨメレバ】か【カエレバ】でAmazonや楽天のアフィリエイトIDを登録します。

サイトを少しスクロールすると「ユーザーデータ入力」と言う項目があるので各IDを入力。

楽天アフィリエイトのIDは楽天にログインした状態でここ（ https://webservice.rakuten.co.jp/account_affiliate_id/ ）で調べられます。

登録したデータはブラウザのクッキーで管理されているのでブラウザのキャッシュを消すと消えます。
毎回入力するは面倒なのでこちらの「登録データーバックアップ&バックアップデーター復活」で登録情報を取得、メモ帳などで保存しておきましょう。

　カエレバ　http://kaereba.com/move.php
　ヨメレバ　http://yomereba.com/move.php

各種IDを登録し終えたら改めて貼り付けたい商品を検索します。

検索結果から該当商品を選択します。

商品ページが出たらレイアウトを「amazlet風-2(cssカスタマイズ用)」に変更して
Amazon、Kindle、楽天などのチェックボックスに印を入れます。

下部に貼り付け用HTMLが生成されるのでそれを全てCTRL+Cでクリップボードに保存して、ブログの貼り付けたい所のソースにCTRL+Vで貼り付けます。

サンプルとしてこのような記事を作りました。

横に長い罫線は【水平線】という昔からあるHTMLタグで、「HTML編集モード」で「<HR>」と入力すると作れます。
「見たまま編集モード」だと記事と商品リンクの境目が分からないので水平線を入れておくと便利です（笑

「HTML編集モード」に切り替えたら商品紹介を貼りたい箇所に先ほどクリップボードにコピーしたものを貼り付けます。