カエレバの使い方とカスタマイズ方法。wordpress

  • このエントリーをはてなブックマークに追加

カエレバのイメージ画像

複数のASPの商品リンクを付けるうえで非常に便利な「カエレバ」。

今回はwordpressにおけるこのカエレバの使い方やカスタマイズ方法についてご紹介していきます。

またwordpressのテーマでカエレバのカスタマイズコードをコピペしたけれど反映されなかった場合の解決方法についてもご紹介していきます。

カエレバとは?

カエレバは「かん吉」さんというブロガーの方が開発した、複数のASPの広告をまとめて作れる大変便利なブログパーツです。

カエレバによりアマゾンの広告を表示させつつ、楽天やヤフーショッピングの商品リンクも同時に表示されられることができるので、コンバージョン率が上がり商品を購入してもらいやすくなります。

カエレバを使う前に契約しておきたいASPについて

アマゾンと楽天の広告を貼る場合は、「アマゾンアソシエイト」や「楽天アフィリエイト」それぞれで提携するのも良いですが、「もしもアフィリエイト」を使えばアマゾンと楽天はもちろん、ヤフーショッピングの広告も作れてしまうので非常に便利です。

しかももしもアフィリエイトの場合は、審査が緩めなイメージですし、アマゾンや楽天などの報酬をすべて一括で受け取れて最低出金額も1000円からと低いので、とにかく換金しやすいのも魅力的ですね。

ただしヤフーショッピングに関しては報酬がもしも経由で0.77%と、バリューコマース(1%)よりも若干下がるので、ヤフーショッピングだけはもしもアフィリエイトではなく、バリューコマースでやった方がお得です。

カエレバの使い方について

まずはカエレバ(https://kaereba.com/)のページへアクセスします。

ページの下の方にある「ユーザーデータ入力」のところで、最初にユーザー登録を行います。

カエレバの使い方①

「サイト名」の欄でサイト名を、各ASPの欄でアフィリエイトIDを記入します。

アフィリエイトIDの調べ方は、各ASPの欄にある「(調べ方)」で簡単に確認できます。

 

カエレバの使い方①

画面上部の「商品キーワード」の検索窓から、紹介したい商品名を記入して「検索」をクリックします。

カエレバの使い方②

すると商品の検索結果一覧が表示されるので、そこから「ブログパーツを作る」をクリックします。

カエレバの使い方③

ブログパーツ作成画面に移るので、デザインを好みのものに変えていくと良いでしょう。

デザインは画像の通り、商品画像や商品リンクなどのレイアウトの変更や、ショップの横にあるアイコンの変更、画像の大きさ、表示させたいショップなどを自由に変えることができます。

カエレバの広告(カスタマイズ前)
ブログパーツ画面で表示されたコードを文中に貼り付ければ、このように「amazon」「楽天市場」「Yahooショッピング」の3つの広告を作成することができました!

ちなみに上記の本はカエレバの開発者であるかん吉さんによる著書になります。

カエレバのカスタマイズ方法は?

カエレバのカスタマイズ

まずカエレバのブログパーツ作成画面でのデザインの項目で、「amazlet-2(cssカスタマイズ用)」に設定しておきます。

次にブログのcssファイルに以下のコードをコピぺするだけでOKです。

wordpressならば、style.cssなど(テーマによる)に貼り付けると良いでしょう。

コードに関しては以下のサイトで紹介されているものを参考にさせて頂きました。

上記CSSコードをcssファイルの方に貼り付けることで、このようにボタンなどのデザインが良い感じにカスタマイズされました。

ボタンをカスタマイズする方法

Bttuon Generator(https://www.bestcssbuttongenerator.com/)というサイトで、自分好みのボタンを簡単に作成できます。

ボタンジェネレーター

使い方はメニュー右側でお好みのボタンを選択し、画面中央で色などを好きなように変えた後決まればクリックしてボタンを作成すると、右側にコードが表示されます。

このコードを上記カスタマイズコードの66行目にある「/* ボタンのカスタマイズ */」の下の部分のところにコピペし、前のボタンのカスタマイズコードは削除することで、ボタンをカスタマイズできます。

wordpressテーマのcssにカエレバのカスタマイズ用コードをコピペしたけれども反映されない場合は?

このブログのテーマは「XeoryBase」なのですが、style.cssに上記のカエレバのカスタマイズコードをそのままコピペして貼り付けても、カエレバのcssが反映されませんでした。

なのでここでは筆者の場合の解決方法について書いていきたいと思います。(あくまでテーマ「XeoryBase」での解決方法になります)

まずは上記のカエレバのカスタマイズ用のcssのコードをコピーします。

ワードプレス xeory CSSを反映するための設定

 

次にワードプレスの左側メニューにある「外観」>「カスタマイズ」>「追加CSS」とクリックし、追加CSSのところでコピーしたものを貼り付けます。

貼り付けた後にコメントアウトの部分(/* 日本語 */)の部分をすべて消します。「/*」 と 「*/」も消します。(この日本語部分を消さないと「公開済み」をクリックしてもエラーになります)

テーマ「XeoryBase」などのように、アンカーテキストの色が白色ではなく、見た目的にしっくりこないというのであれば、「/* カエレバ・ヨメレバ共通 色の指定 */」と「/* カエレバ 色の指定 */」(ヨメレバも使うのであれば「/* ヨメレバ 色の指定 */」も)の部分の各行のカラープロパティ(「color:#ffffff」)の後に「!important」を付け加えます。(※コメントアウト部分「/* 日本語 */」は消してください)

「!important」を付けることでリンクの色をすべて白色にすることができます。

「!important」を付け加えなければ、テーマ「XeoryBase」の場合だとリンクの部分の文字のアンカーテキストが緑色に表示され、見た目的にもあまり良くありません。

wordpressのテーマ「XeoryBase」以外でもcssコピペだけでカスタマイズが反映されないというのであれば、こうした方法を試してみると良いかもしれません。

まとめ

今回はカエレバの使い方やカスタマイズ方法について書いていきました。

広告に複数のASPの商品リンクを貼ることでコンバージョン率を上げたいというような方は是非使ってみると良いのではないでしょうか。

またこの際にもしもアフィリエイトやバリューコマース(特にもしもアフィリエイト)で会員登録をしておけば更に便利なので、これらのASPに関しても是非登録しておきたいところですね。

 

SNSでもご購読できます。

コメントを残す

*