カエレバとは？
カエレバとは、あなたのサイトやブログでショップサイトの商品を一括で紹介できる便利なサービスです。特に、ブロガーやアフィリエイターの方が多く利用しているサービスになります。
もしあなたがAmazonや楽天のアフィリエイトをやっている場合、カエレバを使うことで同時に両方のアフィリエイトリンクを表示できるため、Amazonユーザー（Amazonでしか買い物をしない人）と楽天ユーザー（楽天でしか買い物をしない人）それぞれの取りこぼしを防ぐことができます。
カエレバに登録する
※ カエレバの登録では、Amazonアソシエイトや楽天アフィリエイトのIDが必要になるので事前に登録は済ませておいてください。
まず公式サイトに行きます。
公式サイトに行くと、カエレバについてや使い方、利用上の注意などが書かれています。特に、利用上の注意には目を通しておいてください。
それでは早速、カエレバに登録してみましょう！
以下画像のような入力フォームにご自身のアフィリエイトIDをそれぞれ入力します。それぞれのアフィリエイトIDの調べ方については、カエレバ公式サイトに丁寧に載っているので心配ありません。
※ AmazonアソシエイトのIDの調べ方ですが、管理画面のレイアウトが最近変更されたので、参考までに一応載せておきます。ヘッダー部分の右上になります。
必要項目の入力が終わったら、『保存』をクリックして登録は完了です。
カエレバの登録が終わると、以下のように『画像+リンクリスト ブログパーツ生成』と『リンクリストのみ ブログパーツ生成』の2つの項目が表示されます。
基本的には、『画像+リンクリスト ブログバーツ生成』を使っていくことになるでしょう。それでは、次の項でカエレバの基本的な使い方を紹介していきます。
カエレバの使い方
ここでは、前項で登録したカエレバの基本的な使い方について紹介していきます。
① 基本的な使い方
まずは、公式ページTOPにある検索ボックスにあなたが掲載したい商品キーワードを入力します。
例えば、『Apple AirMac Timecapsule』と入力してみます。
すると以下のように、検索した商品キーワードに合致する商品リストが表示されます。
その中から、あなたが掲載したい商品を選んで、『ブログパーツを作る』をクリックします。
すると、先ほど紹介した『画像+リンクリスト ブログパーツ生成』の項目に商品情報が自動で入力されます。
プレビュー画面を確認しながら、お好みの設定にしていきます。
① デザイン
この項目では、表示されるブログパーツのデザインを調整できます。
※ デフォルトでも何種類かデザインは用意されていますが、今回は後でCSSでカスタマイズしていくため、『amazlet風-2(cssカスタマイズ用)』を選択しています。
② 商品キーワード
商品キーワードについては自動で入力されます。それとこの項目では、ショップのテキストリンクに続く『〜で購入』や『〜で探す』などのテキストを選択することができます。
③ ショップリンク
最後に、あなたの掲載したいショップ数に合わせてチェックを入れます。
すると、プレビュー画面の下にコードが自動生成されます。
あとは、生成されたコードをコピーして、あなたのブログやサイトの表示したい位置にペーストするだけです。
② ブックマークレットを使う
カエレバでは、簡単に商品リンクを生成するためのブックマークレットも用意されています。ブックマークレットの登録はとても簡単です。
公式ページの『・ブックマークレット』の項目に用意されているリンクを、あなたのブックマークにドラッグするだけで登録できます。
カエレバブックマークレットの使い方
まず、Amazonなどのショップページでリンクを生成したい商品を検索します。商品の検索ページが表示されたら、登録したブックマークレットをクリックするだけです。すると、自動的に商品情報が入ったカエレバの公式ページに飛びます。簡単ですね。
カエレバをカスタマイズする
最後にカエレバの商品リンクをCSSでカスタマイズする方法を紹介します。
カエレバはとても便利なサービスですが、デフォルトのデザインのまま使うと少し味気ないですね。
先ほど設定した内容でブログに挿入した商品リンクがこちら↓
やはり味気ない。
もう少しコンバージョンが上がるように、CSSでカスタマイズしていきます。
style.cssに以下のコードを追加しました。
/* カエレバカスタマイズ */
.kaerebalink-box {
position: relative;
margin: 0 0 1rem 0;
padding: 1rem;
border: 1px solid rgba(10, 10, 10, 0.25);
border-radius: 0;
background-color: white;
display: table;
width: 100%;
box-sizing: border-box;
}
.kaerebalink-image {
width: 30%;
text-align: center;
}
.kaerebalink-image,
.kaerebalink-info {
display: table-cell;
vertical-align: middle;
}
.kaerebalink-info {
padding: 1rem;
}
.kaerebalink-name p {
display: none;
}
.kaerebalink-powered-date {
font-size: 0.8rem;
color: rgba(10, 10, 10, 0.5);
}
.kaerebalink-detail {
margin-bottom: 1rem;
font-size: 0.8rem;
color: rgba(10, 10, 10, 0.5);
}
.kaerebalink-link1 div {
box-sizing: border-box;
display: inline-block;
}
.kaerebalink-link1 a {
padding: 1rem 2rem;
color: #fff;
border-radius: 0.5rem;
text-decoration: inherit;
margin-right: 0.5rem;
display: block;
}
.kaerebalink-link1 a:last-of-child {
margin-right: 0;
}
.shoplinkamazon a {
background-color: #f90;
border: 1px solid #f90;
}
.shoplinkamazon a:hover {
background-color: #fff;
color: #f90 !important;
}
.shoplinkrakuten a {
background-color: #bf0000;
border: 1px solid #bf0000;
}
.shoplinkrakuten a:hover {
background-color: #fff;
color: #bf0000 !important;
}
.booklink-footer {
display: none;
}
/* カエレバモバイル */
@media screen and (max-width: 599px) {
.kaerebalink-box {
text-align: center;
display: block;
}
.kaerebalink-image {
width: 100%;
}
.kaerebalink-image, .kaerebalink-info {
display: block;
}
.kaerebalink-link1 div {
display: block;
}
.kaerebalink-link1 a {
margin-bottom: 1rem;
margin-right: 0;
}
}
このCSSを適応した商品リンク表示がこちら↓
【PC表示】
【モバイル表示】
ぜひ参考にしてみてください。
※ 今回のカスタマイズは、Amazonと楽天の2つのボタンを表示する場合の専用のコードになります。2つ以上のボタンを表示させたい場合は、ボタンのパディングを調整してご使用ください。
以上が、カエレバの登録＆使い方の紹介になります。
Amazonや楽天でアフィリエイトを利用している方は是非お試しください！！