//Googleタグマネージャー

ブログについての情報を中心に、ギター関連の上達法や転職情報など幅広く発信中。悩み解決に特化したHow toメディア。

Limitless.net

アフィリエイト

カエレバの導入方法から使用方法まで解説!【CSSも合わせて紹介】

更新日:

カエレバの導入方法から使用方法まで解説!【CSSも合わせて紹介】

 

誠太
こんにちは、誠太です!

 

カエレバはユーザーに商品絵リンクを見てもらう時にとても見やすく、ブロガーにとっても扱いやすい商品紹介ブログパーツを作成してくれるサービスです。

 

しかし、カエレバのページを見るとAmazonや楽天などのidを事前に登録しなければいけないことが書かれていて、使ってみたいけど面倒で重たい腰が上がらないなんてことはありませんか?

 

僕はAmazonアソシエイトの商品リンクを公式から取得して掲載していたのですが、カエレバを使用したことによってAmazonアソシエイトの公式商品リンクの写真とテキストのバランスがしっかり整い、とても見やすくすることができました。

 

僕も今回カエレバを使用するまでは重たい腰が上がらなかったのですが、そこまで時間がかかるわけでも無かったので、本記事ではカエレバの導入から使用方法まで最低限必要な部分のみを解説します。

 

後半でCSSのカスタマイズコードの紹介などもあるので、あわせてご活用ください。

 

この記事から得られる未来像

  • 商品リンクが圧倒的に見やすくなります
  • リンク作成がとても楽になります

カエレバの導入方法から使用方法まで解説!

 

カエレバ

 

 

カエレバの公式サイトに移動するとカエレバのサービス紹介や利用方法などが書いていますが、字体の大きさがほぼ統一されていて導入までの敷居が高いと感じてしまう場合が多いのではないでしょうか。

 

そのため、必要最低限の手順のみお伝えして、あなたがすぐにカエレバを使用できるようになってもら得れば幸いに思います。

 

カエレバの導入方法から紹介しますが、画像と共に解説していくので簡単に理解できるかと思います。

 

カエレバの導入方法

 

カエレバの導入方法

 

まずは、カエレバの導入方法は下記のステップで行います。

 

カエレバ導入ステップ

  • アマゾンアソシエイトのアソシエイトIDをコピペ
  • 楽天アフィリエイトのサービスIDをコピペ
  • Yahooショッピングのsidとpidをコピペ

 

これだけでOKです。下記のID類をあらかじめメモ帳などに保存しておくと楽なので、下記の手順でメモっておきましょう。

 

アマゾンアソシエイトにログイン後、ホーム画面右上に"アソシエイトID"が表示されているので、"◯◯◯-22"をコピー。

楽天デベロッパーにログイン後、アフィリエイトIDが表示されるのでそのIDをコピー。

バリューコマースにログイン後、Yahooショッピング通常プログラムを提携。MyLinkを作成しsidとpidをコピー。

 

カエレバのサイトにアクセスし各IDをコピペ

 

カエレバ必要事項

 

カエレバのサイトにアクセスし、先ほどメモしておいたID類をそれぞれコピペしていきます。

 

各アフィリエイトサービスのID入力が終わったら入力項目の一番下に保存ボタンがあるので、そちらをクリックしたら導入完了です。

 

カエレバの使用方法

 

カエレバの使用方法

 

次にカエレバの使用方法について解説していきます。

 

商品キーワードから商品検索

 

カエレバ商品検索

 

カエレバの上部に商品キーワードを入力するところがあるため、入力欄に紹介したい商品の名前を入力して検索を行います。

プルダウンは楽天市場で大丈夫です。

 

該当商品のブログパーツを作る

 

カエレバブログパーツ作成

 

例えばMac bookで検索をかけてみると、無印macやAirなどの該当商品が表示されます。

 

アフィリエイトしたい商品を発見したら、ブログパーツを作るのボタンをクリックすることで商品リンクを作成することができます。

 

商品のHTMLコードをブログに貼り付けて完了

 

カエレバブログパーツ編集

 

デザインはamazlet風-2(cssカスタマイズ用)を選択してください。次の項目で紹介するCSSを適応するために必要です。

 

タイトル変更の部分では、楽天で検索を行った際に表示されるタイトルで表示されているため、長い商品タイトルだった場合には変更することが可能となっています。

 

Amazon/楽天/Yahooショッピングにそれぞれチェックを入れたことを確認したら、最後にHTMLコードをブログに貼り付ければカエレバの商品紹介ブログパーツが反映されます。

 

カエレバのカスタマイズCSSを紹介

 

カエレバのカスタマイズCSSを紹介

 

CSSを追加することによって、カエレバのブログパーツがより見やすい商品リンクへと変化させることが可能になります。

このCSSはOPEN CAGEさんで紹介されているものを使用させていただきました。

 

カエレバを視覚的にシンプルなデザインに

 

カエレバ商品リンク完成形

 

完成図はこのような感じになります。

視覚的にどのショップで購入するか決めやすく見やすいので、あなたにとっても読者にとっても満足の行く商品リンクとなると思います。

 

カスタマイズCSSは少し長いので、下記のボタンをクリックしていただいたらCSSが表示されるようにしておきました。

 

\ カエレバのカスタマイズCSS /

+ クリックして下さい

/* ************************************* */
/* カエレバ、ヨメレバ、トマレバ */
/* ************************************* */
/* 基本style */
.kaerebalink-box,
.booklink-box,
.tomarebalink-box{
border: 3px double #ccc;
padding: 3%;
margin: 1em 0 2.5em;
overflow: hidden;
font-size: small;
}
.kaerebalink-box a,
.booklink-box a,
.tomarebalink-box a{
text-decoration: none;
color: initial;
}
.kaerebalink-box a[target="_blank"]::after,
.booklink-box a[target="_blank"]::after,
.tomarebalink-box a[target="_blank"]::after{
content: none;
}
.kaerebalink-image,
.booklink-image,
.tomarebalink-image{
max-width: 150px;
text-align: center;
margin: 10px auto!important;
float: none!important;
}
.kaerebalink-name,
.booklink-name,
.tomarebalink-name{
font-weight: bold;
font-size: 120%;
line-height: 1.8!important;
margin-bottom: 10px!important;
}
.kaerebalink-name p:empty,
.booklink-name p:empty,
.tomarebalink-name p:empty{
display: none;
}
.kaerebalink-powered-date,
.booklink-powered-date,
.tomarebalink-powered-date,
.kaerebalink-detail,
.booklink-detail,
.tomarebalink-address{
font-size: 10px!important;
font-weight: normal;
}
.kaerebalink-link1,
.booklink-link2,
.tomarebalink-link1{
overflow: hidden;
}
.kaerebalink-link1 div,
.booklink-link2 div,
.tomarebalink-link1 div{
background-image: none!important;
margin: 0!important;
padding: 3px!important;
display: inline-block!important;
width: 48.5%;
}
.kaerebalink-link1 div a,
.booklink-link2 div a,
.tomarebalink-link1 div a{
border-width: 2px;
border-style: solid;
font-size: 90%;
font-weight: bold;
border-radius: 5px;
padding: 0.7em 0.3em;
width: 100%;
text-align: center;
display: block;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
.kaerebalink-link1 div a:hover,
.booklink-link2 div a:hover,
.tomarebalink-link1 div a:hover{
color: #fff;
box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.15);
transform:translate(-1px, -2px);
}
.kaerebalink-link1 div a:active,
.booklink-link2 div a:active,
.tomarebalink-link1 div a:active{
transform:translate(0, 1px);
}
.kaerebalink-link1 div img,
.booklink-link2 div img,
.tomarebalink-link1 div img{
display: none;
}

/* 画面幅768px以上の場合のstyle */
@media only screen and (min-width: 768px) {
.kaerebalink-image,
.booklink-image,
.tomarebalink-image{
float: left!important;
margin: 0 1.5em 0.5em 0!important;
}
.kaerebalink-link1 div,
.booklink-link2 div,
.tomarebalink-link1 div{
width: 11em;
}
}

/* ▼ボタンカラーここから▼ */
.shoplinkamazon a{
color: #e89713;
}
.shoplinkrakuten a{
color: #d91414;
}
.shoplinkyahoo a{
color: #691ed5;
}
.shoplinkjalan a{
color: #ed5016;
}
.shoplinkjtb a{
color: #e10b0b;
}
.shoplinkknt a{
color: #0f75c2;
}
.shoplinkikyu a{
color: #18b412;
}
.shoplinkrurubu a{
color: #0f32a3;
}
.shoplinkamazon a:hover{
background-color: #e89713;
border-color: #e89713;
}
.shoplinkrakuten a:hover{
background-color: #d91414;
border-color: #d91414;
}
.shoplinkyahoo a:hover{
background-color: #691ed5;
border-color: #691ed5;
}
.shoplinkjalan a:hover{
background-color: #ed5016;
border-color: #ed5016;
}
.shoplinkjtb a:hover{
background-color: #e10b0b;
border-color: #e10b0b;
}
.shoplinkknt a:hover{
background-color: #0f75c2;
border-color: #0f75c2;
}
.shoplinkikyu a:hover{
background-color: #18b412;
border-color: #18b412;
}
.shoplinkrurubu a:hover{
background-color: #0f32a3;
border-color: #0f32a3;
}
/* ▲ボタンカラーここまで▲ */

 

カスタマイズの注意点

 

カエレバcssカスタマイズエラー

 

先ほど紹介したCSSをstyle.cssもしくは追加CSSに入力した際に65行目と77行目に注意表示みたいなものが表示される場合は気にしなくて大丈夫です。

その注意書きに関しては、特にデザインに支障を及ぼすものではないのでご安心を。

 

ただ、あなたの環境によっては商品リンクのボタンが少し細くなっているかもしれないので、更に数値をカスタマイズさせます。

65行目を15px、77行目を1em 0.7emにすると先ほどの完成図と同じ配置になるかと思うので、もし表示が異なるようであれば試しに数値を変更してみてください。

※画像参照

 

カエレバを使用してユーザーにわかりやすい商品リンクを

 

カエレバを使用してユーザーにわかりやすい商品リンクを

 

カエレバのブログパーツを導入することによってAmazonアソシエイトの公式リンクと比べるとかなり見やすくなりました。

 

Amazon/楽天/Yahooの3社の選択肢を読者に選択させてあげることによってCV率が間違いなく変わってくるはずです。

 

3社のうちメインで使用しているショッピングサイトでポイントをためている場合は、そのサイトで購入をしたいと思うのが購入者の理想だと思うので、カエレバを使用することによって購入する選択肢が必然的に増えます。

 

読者の購入に選択肢を渡してあげるのも親切のうちのひとつだと思うので、カエレバの導入をして読者に優しい商品紹介をするようにしましょう。

  • この記事を書いた人
  • 最新記事
誠太

誠太

接客業で年間1600万円の売上を達成した経験を活かして、リアル接客とWebマーケティングを融合。『事実と根拠を明確に、誠実な情報発信』をモットーにブログを毎日更新しています。

-アフィリエイト
-

Copyright© Limitless.net , 2019 All Rights Reserved.