ブログのカスタム

わかりやすい「カエレバ」の設定方法のまとめ【図解あり!】

スポンサーリンク


こんにちはユレオです!

ブログを巡回していてこんなことを思ったことはありませんか?

「この商品紹介のリンクがかっこよくてレイアウトがきれいだ。Amazonと楽天とボタンが二つあるけど、どうやっているんだろ?」 

f:id:soul-vibration:20170709213222j:plain

今回はそんなお悩みを解消する「カエレバ」ブログパーツと設定方法ご紹介したいと思います。

商品紹介用のブログパーツ「カエレバ」を使うとどんなことができるの?

カエレバを使用して複数のネットショッピングモールへのリンクをまとめて表示することで、アフィリエイト報酬のとりこぼしを減らしたり、ネットショッピングモールごとに商品紹介をせずに済むので、レイアウトが見やすく整理できます。

例えば、炭酸水の商品紹介でAmazonと楽天と別々に用意していたとします。

f:id:soul-vibration:20170701002109j:plain

このように異なるネットショッピングモールの商品紹介をまとめれるので見やすくレイアウトも統一できます。

スポンサーリンク

 はじめに

前提としてAmazonや楽天のアフェリエイトを使用するための登録が終了しているものとします。

また、今回はメジャーAmazonと楽天の設定のみ解説いたします。

設定手順1 はてなブログ画面 デザインCSSの設定

この設定方法は以下のサイトを参考にさせていただきました。

1:PC版の設定を行います。

*完成イメージ

f:id:soul-vibration:20170701030637j:plain

はてなブログの デザイン→カスタマイズ→デザインCSS を開きます。

f:id:soul-vibration:20170701024601j:plain

2:デザインCSSに以下のコードをコピーします。

/*カエレバ・ヨメレバ(PC版)*/
.kaerebalink-box, .booklink-box {
border: 2px solid #CCCCCC;
padding: 20px;
width: 90%;
max-width:680px;
margin:0 auto;
}
.kaerebalink-image, .booklink-image {
width:20%;
float: left;
}
.kaerebalink-image a img,.booklink-image a img {
width:100%;
}
.kaerebalink-info, .booklink-info {
width:70%;
margin-left: 2em;
float: left;
}
.kaerebalink-name > a, .booklink-name > a {
font-size: 16px;
color: #256CC5;
text-decoration: underline;
}
.kaerebalink-powered-date, .booklink-powered-date {
font-size: 12px;
}
.kaerebalink-powered-date a, .booklink-powered-date a {
color: #256CC5;
text-decoration: underline;
}
.kaerebalink-link1, .booklink-link2 {
margin-top: 1em;
}
.kaerebalink-link1 div, .booklink-link2 div {
margin-right: 5px;
margin-bottom:3px;
text-align: center;
float:left;
width: 30%;
}
.kaerebalink-link1 div:active, .booklink-link2 div:active {
border-top:3px solid #FFFFFF;
margin-bottom: none;
box-shadow:none;
}
.kaerebalink-link1 div a, .booklink-link2 div a {
color: white;
text-decoration: none;
font-weight: bold;
display:block;
width: 100%;
height: 40px;
line-height: 40px;
}
.shoplinkamazon {
background: #FF9900;
box-shadow: 0 3px #B16A00;
}
.shoplinkamazon:hover {
background: #FFB23F;
}
.shoplinkkindle {
background: #0079BA;
box-shadow: 0 3px #015684;
}
.shoplinkkindle:hover {
background: #2797D4;
}
.shoplinkrakuten {
background: #BF0000;
box-shadow: 0 3px #7B0101;
}
.shoplinkrakuten:hover {
background: #DC3939;
}
.shoplinkkakakucom {
background: #25388E;
box-shadow: 0 3px #081658;
}
.shoplinkkakakucom:hover {
background: #485CB7;
}
.shoplinkyahoo {
background: #750992;
box-shadow: 0 3px #3F0250;
}
.shoplinkyahoo:hover {
background: #8F0FB3;
}
.booklink-footer {
height:0;
clear: left;
}

3:スマホ版の設定を行います

*完成イメージ

f:id:soul-vibration:20170701030734j:plain

はてなブログの デザイン→スマートフォン→記事→記事下 を開きます。

f:id:soul-vibration:20170701025818j:plain

4:記事下に以下のコードをコピーします。

<style type=text/css>
/*カエレバ・ヨメレバ(スマホ版)*/
.kaerebalink-box, .booklink-box {
border: 2px solid #CCCCCC;
padding: 20px;
width: 80%;
margin:0 auto;
}
.kaerebalink-image, .booklink-image {
margin:0 auto;
text-align:center;
}
.kaerebalink-info, .booklink-info {
margin:10px auto;
padding-top:10px;
border-top:1px solid #CCCCCC;
}
.kaerebalink-name > a, .booklink-name > a {
font-size: 16px;
color: #256CC5;
text-decoration: underline;
}
.kaerebalink-powered-date, .booklink-powered-date {
font-size: 12px;
}
.kaerebalink-powered-date a, .booklink-powered-date a {
color: #256CC5;
text-decoration: underline;
}
.kaerebalink-link1, .booklink-link2 {
margin-top: 1em;
}
.kaerebalink-link1 div, .booklink-link2 div {
margin:5px auto;
text-align: center;
width: 100%;
}
.kaerebalink-link1 div a, .booklink-link2 div a {
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
display:block;
width: 100%;
height: 40px;
line-height: 40px;
}
.shoplinkamazon {
background: #FF9900;
}
.shoplinkkindle {
background: #0079BA;
}
.shoplinkrakuten {
background: #BF0000;
}
.shoplinkkakakucom {
background: #25388E;
}
.shoplinkyahoo {
background: #750992;
}
.booklink-footer {
height:0;
clear: left;
}
</style>

スポンサーリンク

設定手順2 カエレバ画面

1:以下のリンクをクリックして「カエレバ」のページへ移動します。

商品紹介ブログパーツ カエレバ

f:id:soul-vibration:20170701004938j:plain

2:ページをスクロールしていくとユーザーデータ入力フォームがあります。

そちらに必要事項を入力してください。

今回はAmazonと楽天の設定だけなので入力する箇所は4か所になります。

f:id:soul-vibration:20170701081847j:plain

設定が必要なのは以下の通りです。

①:ブログの名前(URLではありません  例:魂を揺さぶるヨ!)

②:Amazonアソシエイト(例:tamasshii-99)

③:楽天アフェリエイト メインリンク用(例:065554b.5024d53b.0649664c.8e7b9c30

④:楽天アフェリエイト 並列リンク用(例:06fc62ad.785ec845.09322259.3576e39c

各種IDがわからない場合は以下の記事で詳しく説明しております。

AmazonアソシエイトIDや楽天アフィリエイトIDを調べる方法【図解あり!】 こんにちはユレオです! AmazonアソシエイトIDや楽天アフィリエイトIDについてどこを調べればわかるのか困ったことは無...

3:入力後、ページを下にスクロールして「保存」をクリックします。

f:id:soul-vibration:20170701011048j:plain

4:ページのトップへ戻り、探したい商品名を検索します。

f:id:soul-vibration:20170701011918j:plain

①:検索したい商品名

②:検索するネットショッピングモールの選択

  (この設定は商品検索に使われます。Amazonにしておけば問題ありません。)

5:ページが切り替わり商品一覧が表示されます。

その中から目当ての商品を選び、「ブログパーツを作る」をクリックします。

f:id:soul-vibration:20170701012940j:plain

6:ブログパーツが作られます。

f:id:soul-vibration:20170701013449j:plain

①:デザインの項目を「amazlet風(改)-1」から「amazlet風-2(cssカスタマイズ用)

に変更してください。変更後に更新ボタンを押してくください。

②:こちらの中を全選択してコピーします。

スポンサーリンク

設定手順3 はてなブログ画面

1:ブログパーツを張り付けたいページを編集で開き、HTML編集を選択します。

f:id:soul-vibration:20170701020007j:plain

2:先ほどコピーしたブログパーツを張り付けます。

f:id:soul-vibration:20170701020500j:plain

3:プレビュー表示に切り替えると商品紹介がまとまって表示されます。

f:id:soul-vibration:20170701021116j:plain

設定方法は以上となります。

どうでしたか?思った以上に簡単だったのではないでしょうか。

見栄えもレイアウトもよくなるので複数のネットショッピングモールへのリンクを?行うのでしたら「カエレバ」の使用をお勧めいたします。

わかりやすい「ヨメレバ」の設定方法のまとめ【図解あり!】こんにちはユレオです。 前回「カエレバ」の設定方法をまとめましたが、ついでに「ヨメレバ」の設定もまとめたいと思います。 ht...

スポンサーリンク


おすすめのアフィリエイトASPランキング

「ASP(アフィリエイト・サービス・プロバイダ)」とは、アフィリエイトの広告主とトやブログ運営者を繋ぐ仲介業者のことで、ブログ運営で広告などを掲載するにはASPに登録する必要があります。

そうしたASPは数多くありますが、初心者向けのおすすめのASPをご紹介いたします。

1位 A8.net
A8.netは広告主数が豊富で、ブログ運営者の多くが利用するアフィリエイトサービスです。
ブログを始めたばかりの方もwebサイトやブログを登録できますし、手続きも簡単でアフィリエイトを手軽に始めることができます。
また、A8.netでは「セルフバック」が充実しており、自分で商品の購入やサービス申込むことでアフィリエイトの報酬が得られ、実際の商品をお得に購入できるのでレビュー記事が書きやすいというメリットもあります。
総合
商品種類
初心者向け

A8.netの詳細ページはこちら

2位 もしもアフィリエイト
もしもアフィリエイトはブログ運営の初心者でも成果を上げられるように成果を上げる為の方法について詳しく書かれたマニュアルがあるなど、「ブログ運営初心者に対して嬉しいサービス」が充実しています。
また、Amazonアソシエイトと楽天アフィリエイトをまとめれるのは、管理がしやすい点が初心者にとってポイントが高く、W報酬制度やプレミアム報酬などの独自の報酬制度があります。
総合
商品種類
初心者向け

もしもアフィリエイトの詳細ページはこちら

3位 バリューコマース
バリューコマースはYahooショッピングでの報酬の取りまとめに力をいれていたり、スマートフォン向けのオーバーレイ広告が掲載できるなど、ポイントの高いサービスが提供されています。
また、メルカリなどのバリューコマースにしかない広告案件があり、メインのASPがすでにあったとしても広告案件の隙間を埋めたり、比較として登録しておいて損はありません。
総合
商品種類
初心者向け

バリューコマースの詳細ページはこちら