最強のアフィリエイトブログパーツ「カエレバ、ヨメレバ」の使い方

アフィリエイトを行う場合、Amazonや楽天市場など、これまで1つ1つ記事に貼り付けていたリンクを1つにまとめて行うことができます。ユーザーにとっても、同じ商品を価格など比較しながら複数のサイトを同時にみれるため、非常に便利です。
「わかったブログ」管理人のかん吉さんが最強のブログパーツを開発してくれました。
カエレバ、ヨメレバは、いづれも複数のショップリンクがついた商品紹介のブログパーツです。カエレバは、商品を紹介するブログパーツで、ヨメレバは、書籍専用のブログパーツです。カエレバでは、Amazon、楽天市場、Yahooショッピングなどの複数のショッピングモールへのリンク、ヨメレバではAmazon、楽天ブックス、e-honなどの複数のブックショップへのリンクを表示できます。ヨメレバ、カエレバともに「ユーザデータ入力」の画面に、サイト名、各アフィリエイトのIDを入力し、登録すれば、あとは作成したい商品名で検索すると、自動で商品リンクを作成してくれますので、ブログに貼り付ければ完成です。

1 サイトの表示
2 ユーザーデータの登録
- 2.1 登録画面の表示
- 2.2 ユーザーデータの登録
3 ブログパーツの生成
4 CSSのカスタマイズ

サイトの表示

サイトにアクセスします。

ユーザーデータの登録

登録画面の表示

サイトをスクロールすると、ユーザーデータ登録の画面が表示されます。ここにサイト名、各アフィリエイトのIDを入力し、登録します。

ユーザーデータの登録

サイト名、アフィリエイトIDなどのユーザーデータを登録したら、「保存」を押下します。ユーザーデーターの保存はCookieを利用しているため、Cookie機能をONにします。

カエレバのユーザーデータ

ヨメレバのユーザーデータ

ブログパーツの生成

サイトの表示

カエレバのサイトを表示して、「商品キーワード」に商品名を入力して「検索」をクリックします。(AmazonのままでOK)
ここでは、ICレコーダと入力してみます。

商品の選択

ICレコーダが一覧表示されますので、商品を選択して、「ブログパーツを作る」をクリックします。

ブログパーツの装飾

rel=nofollowを選択

ショップの選択

リンクリストの取得

リンクリストをコピーして、ブログに貼り付けます。

CSSのカスタマイズ

CSSをカスタマイズして、下記のコードをsimplicityのstyle.cssに追加します。
RoughLog(ラフログ)さんのサイトのカスタマイズを使わさせて頂きました。ありがとうございます。

CSSコピペでOK！カエレバ・ヨメレバ・トマレバのデザインをまとめてカスタマイズ！

便利な「カエレバ」「ヨメレバ」「トマレバ」3つのデザインをまとめてカスタマイズし、シンプルなレスポンシブデザインに仕上げました。作業はCSSをコピペするだけなのでとても簡単です。どうぞお試しください。

rough-log.com

/* カエレバ、ヨメレバ、トマレバ　*/

.cstmreba {
	width:100%;
	height:auto;
	margin:36px 0;
}
.booklink-box, .kaerebalink-box, .tomarebalink-box {
	width:100%;
	background-color: #fff;
	overflow: hidden;
}
/* サムネイル画像ボックス */
.booklink-image,
.kaerebalink-image,
.tomarebalink-image {
	width:150px;
	float:left;
	margin:0 14px 0 0;
	text-align: center;
}
.booklink-image a,
.kaerebalink-image a,
.tomarebalink-image a {
	width:100%;
	display:block;
}
/* サムネイル画像 */
.booklink-image a img, .kaerebalink-image a img, .tomarebalink-image a img {
	margin:0 ;
	padding: 0;
	text-align:center;
}
.booklink-info, .kaerebalink-info, .tomarebalink-info {
	overflow:hidden;
	line-height:170%;
	color: #333;
}
/* infoボックス内リンク下線非表示 */
.booklink-info a,
.kaerebalink-info a,
.tomarebalink-info a {
	text-decoration: none;	
}
/* 作品・商品・ホテル名 リンク */
.booklink-name>a,
.kaerebalink-name>a,
.tomarebalink-name>a {
	border-bottom: 1px dotted ;
	color:#2098A8;
	font-size:16px;
}
/* 作品・商品・ホテル名ホテル名 リンク ホバー時 */
.booklink-name>a:hover,
.kaerebalink-name>a:hover,
.tomarebalink-name>a:hover {
	color: #722031;
}
/* powered by */
.booklink-powered-date,
.kaerebalink-powered-date,
.tomarebalink-powered-date {
	font-size:10px;
	line-height:150%;
}
.booklink-powered-date a,
.kaerebalink-powered-date a,
.tomarebalink-powered-date a {
	border-bottom: 1px dotted ;
	color: #2098A8;
}
/* 著者・住所 */
.booklink-detail, .kaerebalink-detail, .tomarebalink-address {
	font-size:12px;
}
.kaerebalink-link1 img, .booklink-link2 img, .tomarebalink-link1 img {
	display:none;
}
.booklink-link2>div, 
.kaerebalink-link1>div, 
.tomarebalink-link1>div {
	float:left;
	width:31%;
	min-width:125px;
	margin:0.5% 1%;
}
.booklink-link2 a, 
.kaerebalink-link1 a,
.tomarebalink-link1 a {
	width: 100%;
	display: inline-block;
	text-align: center;
	font-size: 13px;
	font-weight: bold;
	line-height: 180%;
	padding:3% 1%;
	border-radius: 4px;
	box-shadow: 0 2px 0 #ccc;
	background: -moz-linear-gradient(top,#FFF 0%,#EEE);
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
}
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover,
.tomarebalink-link1 a:hover {
	text-decoration: underline;
}
/* ボタンカラー */
/* トマレバ */
.tomarebalink-link1 .shoplinkrakuten a { color: #76ae25; }/* 楽天トラベル */
.tomarebalink-link1 .shoplinkjalan a { color: #ff7a15; }/* じゃらん */
.tomarebalink-link1 .shoplinkjtb a { color: #c81528; }/* JTB */
.tomarebalink-link1 .shoplinkknt a { color: #0b499d; }/* KNT */
.tomarebalink-link1 .shoplinkikyu a { color: #bf9500; }/* 一休 */
.tomarebalink-link1 .shoplinkrurubu a { color: #000066; }/* るるぶ */
.tomarebalink-link1 .shoplinkyahoo a { color: #ff0033; }/* Yahoo!トラベル */
/* カエレバ */
.kaerebalink-link1 .shoplinkyahoo a {color:#ff0033;} /* Yahoo!ショッピング */
.kaerebalink-link1 .shoplinkbellemaison a { color:#84be24 ; }	/* ベルメゾン */
.kaerebalink-link1 .shoplinkcecile a { color:#8d124b; } /* セシール */ 
.kaerebalink-link1 .shoplinkkakakucom a {color:#314995;} /* 価格コム */
/* ヨメレバ */
.booklink-link2 .shoplinkkindle a { color:#007dcd;} /* Kindle */
.booklink-link2 .shoplinkrakukobo a{ color:#d50000; } /* 楽天kobo */
.booklink-link2  .shoplinkbk1 a { color:#0085cd; } /* honto */
.booklink-link2 .shoplinkehon a { color:#2a2c6d; } /* ehon */
.booklink-link2 .shoplinkkino a { color:#003e92; } /* 紀伊國屋書店 */
.booklink-link2 .shoplinktoshokan a { color:#333333; } /* 図書館 */
/* カエレバ・ヨメレバ共通 */
.kaerebalink-link1 .shoplinkamazon a, 
.booklink-link2 .shoplinkamazon a { color:#FF9901; } /* Amazon */
.kaerebalink-link1 .shoplinkrakuten a , 
.booklink-link2 .shoplinkrakuten a { color: #c20004; } /* 楽天 */
.kaerebalink-link1 .shoplinkseven a, 
.booklink-link2 .shoplinkseven a { color:#225496;} /* 7net */
/* ボタンカラー ここまで*/
.booklink-footer {
	clear:both;
}
/***  解像度480px以下のスタイル ***/
@media screen and (max-width:480px){
.booklink-image,
.kaerebalink-image,
.tomarebalink-image {
	width:100%;
	float:none;
}
.booklink-link2>div, 
.kaerebalink-link1>div, 
.tomarebalink-link1>div {
	width: 48%;
}
.booklink-info,
.kaerebalink-info,
.tomarebalink-info {
	text-align:center;
}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

/* カエレバ、ヨメレバ、トマレバ　*/

.cstmreba {

width:100%;

height:auto;

margin:36px 0;

}

.booklink-box, .kaerebalink-box, .tomarebalink-box {

width:100%;

background-color: #fff;

overflow: hidden;

}

/* サムネイル画像ボックス */

.booklink-image,

.kaerebalink-image,

.tomarebalink-image {

width:150px;

float:left;

margin:0 14px 0 0;

text-align: center;

}

.booklink-image a,

.kaerebalink-image a,

.tomarebalink-image a {

width:100%;

display:block;

}

/* サムネイル画像 */

.booklink-image a img, .kaerebalink-image a img, .tomarebalink-image a img {

margin:0 ;

padding: 0;

text-align:center;

}

.booklink-info, .kaerebalink-info, .tomarebalink-info {

overflow:hidden;

line-height:170%;

color: #333;

}

/* infoボックス内リンク下線非表示 */

.booklink-info a,

.kaerebalink-info a,

.tomarebalink-info a {

text-decoration: none;

}

/* 作品・商品・ホテル名リンク */

.booklink-name>a,

.kaerebalink-name>a,

.tomarebalink-name>a {

border-bottom: 1px dotted ;

color:#2098A8;

font-size:16px;

}

/* 作品・商品・ホテル名ホテル名リンクホバー時 */

.booklink-name>a:hover,

.kaerebalink-name>a:hover,

.tomarebalink-name>a:hover {

color: #722031;

}

/* powered by */

.booklink-powered-date,

.kaerebalink-powered-date,

.tomarebalink-powered-date {

font-size:10px;

line-height:150%;

}

.booklink-powered-date a,

.kaerebalink-powered-date a,

.tomarebalink-powered-date a {

border-bottom: 1px dotted ;

color: #2098A8;

}

/* 著者・住所 */

.booklink-detail, .kaerebalink-detail, .tomarebalink-address {

font-size:12px;

}

.kaerebalink-link1 img, .booklink-link2 img, .tomarebalink-link1 img {

display:none;

}

.booklink-link2>div,

.kaerebalink-link1>div,

.tomarebalink-link1>div {

float:left;

width:31%;

min-width:125px;

margin:0.5% 1%;

}

.booklink-link2 a,

.kaerebalink-link1 a,

.tomarebalink-link1 a {

width: 100%;

display: inline-block;

text-align: center;

font-size: 13px;

font-weight: bold;

line-height: 180%;

padding:3% 1%;

border-radius: 4px;

box-shadow: 0 2px 0 #ccc;

background: -moz-linear-gradient(top,#FFF 0%,#EEE);

background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));

}

.booklink-link2 a:hover,

.kaerebalink-link1 a:hover,

.tomarebalink-link1 a:hover {

text-decoration: underline;

}

/* ボタンカラー */

/* トマレバ */

.tomarebalink-link1 .shoplinkrakuten a { color: #76ae25; }/* 楽天トラベル */

.tomarebalink-link1 .shoplinkjalan a { color: #ff7a15; }/* じゃらん */

.tomarebalink-link1 .shoplinkjtb a { color: #c81528; }/* JTB */

.tomarebalink-link1 .shoplinkknt a { color: #0b499d; }/* KNT */

.tomarebalink-link1 .shoplinkikyu a { color: #bf9500; }/* 一休 */

.tomarebalink-link1 .shoplinkrurubu a { color: #000066; }/* るるぶ */

.tomarebalink-link1 .shoplinkyahoo a { color: #ff0033; }/* Yahoo!トラベル */

/* カエレバ */

.kaerebalink-link1 .shoplinkyahoo a {color:#ff0033;} /* Yahoo!ショッピング */

.kaerebalink-link1 .shoplinkbellemaison a { color:#84be24 ; } /* ベルメゾン */

.kaerebalink-link1 .shoplinkcecile a { color:#8d124b; } /* セシール */

.kaerebalink-link1 .shoplinkkakakucom a {color:#314995;} /* 価格コム */

/* ヨメレバ */

.booklink-link2 .shoplinkkindle a { color:#007dcd;} /* Kindle */

.booklink-link2 .shoplinkrakukobo a{ color:#d50000; } /* 楽天kobo */

.booklink-link2 .shoplinkbk1 a { color:#0085cd; } /* honto */

.booklink-link2 .shoplinkehon a { color:#2a2c6d; } /* ehon */

.booklink-link2 .shoplinkkino a { color:#003e92; } /* 紀伊國屋書店 */

.booklink-link2 .shoplinktoshokan a { color:#333333; } /* 図書館 */

/* カエレバ・ヨメレバ共通 */

.kaerebalink-link1 .shoplinkamazon a,

.booklink-link2 .shoplinkamazon a { color:#FF9901; } /* Amazon */

.kaerebalink-link1 .shoplinkrakuten a ,

.booklink-link2 .shoplinkrakuten a { color: #c20004; } /* 楽天 */

.kaerebalink-link1 .shoplinkseven a,

.booklink-link2 .shoplinkseven a { color:#225496;} /* 7net */

/* ボタンカラーここまで*/

.booklink-footer {

clear:both;

}

/*** 解像度480px以下のスタイル ***/

@media screen and (max-width:480px){

.booklink-image,

.kaerebalink-image,

.tomarebalink-image {

width:100%;

float:none;

}

.booklink-link2>div,

.kaerebalink-link1>div,

.tomarebalink-link1>div {

width: 48%;

}

.booklink-info,

.kaerebalink-info,

.tomarebalink-info {

text-align:center;

}

「トマレバ」の画像サイズは「150px」を選択、「カエレバ」「ヨメレバ」の画像サイズは「小」を使用します。