雲の向こうはいつも青空

好きな物とか琴線に触れた物とか

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

スポンサードリンク

f:id:shhiai:20160309070707p:plain

@soraです。

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


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

手順

ボタン化

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

f:id:shhiai:20151117053346p:plain

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

f:id:shhiai:20151117053356p:plain


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

kumoaozora.hatenablog.com

四角で囲う

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


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


予め、この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をコピペします。

f:id:shhiai:20160309195244p:plain


・スマホ用画面

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

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

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

f:id:shhiai:20160309200338p:plain


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

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

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

<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で作成した商品リンクを文中で紹介するのも効果的です。

こんなやつです。


詳細はこちらをご覧ください。

kumoaozora.hatenablog.com

そらのまとめ

ちょっと面倒ですが、このひと手間でクリック率と購入率がアップしました。

皆さんも一度試してみたらいかがでしょうか?

Instagram 昨日の1ショット

Instagramもやってますのでフォローよろしくお願いします。

朝も走ったけど、また走る。

そらさん(@sora5174)が投稿した写真 -

昨日のテーマ

読書30分

達成度(5段階評価) ■■■

昨日の1日1新

1日1新の詳細はこちら→click!

鹿鳴館のリーフパイ


明日の記事


インターミッテントトレーニング

明日の記事はインターミッテントトレーニングを取り上げます。

どうぞ、お楽しみに。

広告を非表示にする