ちょっとした工夫で商品リンクのクリック率と購入率がアップしました
スポンサードリンク
@soraです。
ブログで紹介した商品はカエレバを使って紹介してます。
カエレバの商品リンクに四角で囲う装飾とメモを追加したところクリック率と購入率がアップしましたので皆さんにもシェアしたいと思います。
手順
ボタン化
カエレバ標準のショップリンクがこれです。
僕のブログではボタン化のカスタマイズを施して目立つようにしてあります。
やり方はこちらをご覧ください。
四角で囲う
今回はボタン化した商品リンクの回りを、さらに四角で囲いメモを入力します。
予め、このCSSを登録しておきます。
.sikaku { border-style: solid ; border-width: 1px; color:#333333 ; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -moz-box-shadow:1px 1px 3px #c0c0c0; -webkit-box-shadow:1px 1px 3px #c0c0c0; box-shadow:1px 1px 3px #c0c0c0; background-color:#f7f7f7; margin:10px; padding:10px; }
「#f7f7f7」ここを変更すると背景色の変更が出来ます。
background-color:#f7f7f7;
はてなブログでの設定方法
・パソコン用画面
①ダッシュボード→デザインと移ります。
②デザインCSSに上記CSSをコピペします。
・スマホ用画面
詳細設定でレスポンシブデザインにチェックを入れてある場合は何もする必要はありません。
レスポンシブデザインのテーマを設定しているときのみ使用してください。
①ダッシュボード→デザイン→スマートフォン→記事と移ります。
②記事上か記事下に上記CSSコードを次の2行を追加してコピペします。
<style type="text/css"> ここにCSSを記入する。 </style>
スマートフォンの場合は、記事上か記事下に、この2行の間に記述されてるものをcssとして認識してくれます。
既にこの2行が記述済みなら新たに記述する必要はありません。
こんな感じ
<style type="text/css"> .sikaku { border-style: solid ; border-width: 1px; color:#333333 ; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -moz-box-shadow:1px 1px 3px #c0c0c0; -webkit-box-shadow:1px 1px 3px #c0c0c0; box-shadow:1px 1px 3px #c0c0c0; background-color:#f7f7f7; margin:10px; padding:10px; } </style>
記事中での指定方法
このように指定すると
<div class="sikaku">こんな感じに四角で囲います。</div>
このように表示されます。
商品リンクの例
<div class="sikaku"> 商品リンクコード コメント </div>
このように指定すると
<div class="sikaku"> <div class="booklink-box"><div class="booklink-image"><a href="http://www.amazon.co.jp/exec/obidos/asin/4802400136/nagakawara-22/" target="_blank" ><img src="http://ecx.images-amazon.com/images/I/51nyVW-55AL._SL320_.jpg" style="border: none;" /></a></div><div class="booklink-info"><div class="booklink-name"><a href="http://www.amazon.co.jp/exec/obidos/asin/4802400136/nagakawara-22/" target="_blank" >神さまと繋がる神社仏閣めぐり - 神仏がくれるさりげないサイン</a><div class="booklink-powered-date">posted with <a href="http://yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div></div><div class="booklink-detail">桜井 識子 ハート出版 2016-02-29 </div><div class="booklink-link2"><div class="shoplinkamazon"><a href="http://www.amazon.co.jp/exec/obidos/asin/4802400136/nagakawara-22/" target="_blank" >Amazon</a></div><div class="shoplinkrakuten"><a href="http://hb.afl.rakuten.co.jp/hgc/052fe2f4.1fa2770c.052fe2f6.43909a31/?pc=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F13785014%2F%3Fscid%3Daf_ich_link_urltxt%26m%3Dhttp%3A%2F%2Fm.rakuten.co.jp%2Fev%2Fbook%2F" target="_blank" >楽天ブックス</a></div> </div></div><div class="booklink-footer"></div> ベストセラー1位!! 人気ブロガーが読者の熱望に応え、ちょっと足を伸ばして関東の古社・名刹へ。あの家康さんや平将門さん、天狗や狼などの眷属と楽しい会話。 </div>
こんな感じに表示されます。
ベストセラー1位!!
人気ブロガーが読者の熱望に応え、ちょっと足を伸ばして関東の古社・名刹へ。あの家康さんや平将門さん、天狗や狼などの眷属と楽しい会話。
ベストセラー1位と太字の赤字にするとさらに効果があると思います。
ベストセラー1位!!って言われると気になりますよね(笑)
BabyLink
あわせて、小さな商品リンクBabyLinkで作成した商品リンクを文中で紹介するのも効果的です。
こんなやつです。
詳細はこちらをご覧ください。
そらのまとめ
ちょっと面倒ですが、このひと手間でクリック率と購入率がアップしました。
皆さんも一度試してみたらいかがでしょうか?
昨日のテーマ
読書30分
達成度(5段階評価) ■■■