もしもアフィリエイトの登録からカエレバのCSSカスタマイズするまでの手順

アフィリエイト

ブログの記事内でAmazonや楽天の商品を紹介したい機会は多いと思います。

自分の場合は技術書などの紹介を行っています。

商品紹介をする場合、楽天とAmazonのどちらで買い物をするかは読者によって異なるので両サイトの購入ボタンを用意してあげた方が親切ですね。

その際に「カエレバ」というツールが非常に役立ちます。

カエレバを利用することで以下のように楽天とAmazonの購入ボタンを一括で用意することができます。

イメージ画像

さらにCSSをカスタマイズすることで以下のようになります。

イメージ画像

そこで今回はカエレバを利用したアフィリエイトリンクの作成方法を、もしもアフィリエイトに登録するところから説明したいと思います。

なお、当ブログではスワローというオープンケージ社のテンプレートを利用しているため、環境によってはうまくデザインが反映されないかもしれないのでご了承ください。

今回話すこと
  • もしもアフィリエイトで楽天アフィリエイトとAmazonアソシエイトの提携申請をする方法
  • カエレバの使い方
  • カエレバのカスタマイズ方法

もしもアフィリエイトの登録する

そもそも、楽天やAmazonは独自にアフィリエイトプログラムを用意しているので、もしもアフィリエイトをはじめとするASPを利用しなくてもアフィリエイトは行えます。

しかし、なぜ「もしもアフィリエイト」を経由して楽天やAmazonのアフィリエイトを行うかというと主に以下の2点が挙げられます。

もしもアフィリエイトを利用するメリット
  • もしもアフィリエイトの場合、成果報酬の最低振込金額が1000円と安いので早くもらえる
  • 成果報酬が振り込まれる際の手数料が無料

詳しい内容については多くの記事で説明されているのでここでは省略しますが、アフィリエイト収入がそこまでない初心者にとっては「もしもアフィリエイト」経由でAmazonや楽天のアフィリエイトを行った方がメリットは大きいです。

ということで、まずはもしもアフィリエイトに登録をします。

もし登録していない人は以下のリンクから登録ができます。

楽天とAmazonの連携をする

もしもアフィリエイトに登録をしたら楽天とAmazonのアフィリエイトを利用できるように提携申請を行います。

申請方法はトップページにある以下の部分から行うことができます。

申請を行うとサイトの審査が開始されます。

審査を通過したら晴れてアフィリエイトを行うことができるようになります。

カエレバに必要情報を登録する

アフィリエイトの提携申請が完了したらカエレバに必要な情報を登録します。

カエレバは以下のリンクからアクセスできます。

https://kaereba.com/

上記ページにはアフィリエイト情報を登録するフォームがあるので、アフィリエイト識別idやサイトの名前などを登録していきます。

idの確認方法は該当のカエレバのページに記載がされているのでここでは省略します。

アフィリエイトリンクの作成

検索

カエレバに情報を登録したら、いよいよアフィリエイトリンクを作成していきます。

まずは紹介したい商品をカエレバの検索フォームから検索します。

検索フォームは先ほど掲載した(https://kaereba.com/)の上部にあります。

検索結果から自分が紹介したい商品を見つけたら「ブログパーツを作る」という項目をクリックします。

アフィリエイトリンクをカスタマイズする

これでアフィリエイトリンクを作る準備ができました。

アフィリエイトリンクは色々とカスタマイズすることができるのですが、以下の2点の変更をおこなってください。

ブログパーツのカスタマイズ
  • amazlet風-2(cssカスタマイズ用)を選択
  • rel=nofollowにする

nofollowにするとリンクがクロールの対象から除外されるため、SEOの評価に影響を与えなくなります。

「クロールってなに?」という方は以下の記事も参考にしてみてください。

カスタマイズされた内容はHTMLファイルとして出力されているので、このHTMLを記事に貼り付けることでリンクになります。

上記のリンクをコピペした結果以下のように記事内で表示されるようになります。

イメージ画像

CSSをカスタマイズする

ここからカエレバのボタン部分などのデザインをカスタマイズしていきます。

オープンケージ社では公式の記事でカエレバのカスタマイズCSSを配布しています。

しかし、公式のやつですと画面が狭い時にボタン位置がずれてしまいます。

イメージ画像

ですので自分は以下の記事で紹介されているCSSを利用しました。

紹介されているCSSをstyle.cssに追加することでデザインが変更となります。

その結果、以下のようになります。

こちらは実際のアフィリエイトリンクです

以上です、お疲れ様でした!