ちょっとした工夫で商品リンクのクリック率と購入率がアップしました

スポンサードリンク

f:id:shhiai:20160309070707p:plain

@soraです。

ブログで紹介した商品はカエレバを使って紹介してます。

カエレバの商品リンクに四角で囲う装飾とメモを追加したところクリック率と購入率がアップしましたので皆さんにもシェアしたいと思います。

手順

ボタン化

カエレバ標準のショップリンクがこれです。

f:id:shhiai:20151117053346p:plain

僕のブログではボタン化のカスタマイズを施して目立つようにしてあります。

f:id:shhiai:20151117053356p:plain

やり方はこちらをご覧ください。

kumoaozora.hatenablog.com

四角で囲う

今回はボタン化した商品リンクの回りを、さらに四角で囲いメモを入力します。

こんな感じに四角で囲います。

予め、このＣＳＳを登録しておきます。

.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をコピペします。

f:id:shhiai:20160309195244p:plain

・スマホ用画面

詳細設定でレスポンシブデザインにチェックを入れてある場合は何もする必要はありません。

スマートフォンでもPCと同じデザイン設定でブログを表示します。

レスポンシブデザインのテーマを設定しているときのみ使用してください。

f:id:shhiai:20160309200338p:plain

①ダッシュボード→デザイン→スマートフォン→記事と移ります。

②記事上か記事下に上記CSSコードを次の２行を追加してコピペします。

f:id:shhiai:20160229203936p:plain:w500

<style type="text/css">

ここにCSSを記入する。

</style>

スマートフォンの場合は、記事上か記事下に、この２行の間に記述されてるものをcssとして認識してくれます。

既にこの２行が記述済みなら新たに記述する必要はありません。

こんな感じ

<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>

ベストセラー１位！！

人気ブロガーが読者の熱望に応え、ちょっと足を伸ばして関東の古社・名刹へ。あの家康さんや平将門さん、天狗や狼などの眷属と楽しい会話。

</div>