カエレバのようなアフィリエイトリンクを自作で作る方法

カエレバのような自作アフィリエイトリンク

amazon・楽天・Yahoo!ショッピングなどのASPの広告をまとめて画像付きでお手軽に作れてしまう「カエレバ」や「Rinker」などのプラグイン。

しかし最近運営サイトによっては、amazonでこうした便利なツールが使えなくなってしまっています。
今回はそんなamazonでカエレバやRinkerなどのツールが使えなくなってしまった時の対処方法として、カエレバのようなアフィリエイトリンクをwordpressで自作で作る方法についてご紹介していきます。

目次

wordpressでカエレバのようなアフィリエイトリンクを自作で作る方法

まずカエレバのように「画像」「商品名」「商品説明欄」「amazonや楽天などのボタン」をまとめて表示させる雛形(HTML)を作っていきます。

作り方に関しては下記のサイトを参考にさせて頂きました。

収益増加!カエレバより綺麗なアフィリエイトリンクをコピペで設定
ブログ記事などでアフィリエイトのリンクやボタンを設置する手段として、「カエレバ」や「ヨメレバ」を利用されている方は多いのではないでしょうか?楽天市場やAmazonなどのアフィリエイトリンクを簡単に
<div class="af-box">
 <div class="af-imgbox">
 **商品画像**
 </div>
 <div class="af-textbox">
 <div class="af-title">
 **商品タイトル**
 </div>
 <div class="af-desc">
 **商品説明**
 </div>
 <div class="af-kobox af-amazon">
<a href="**URL**" target="_blank" class="aflink">Amazon</a></div>
 <div class="af-kobox af-rakuten">
<a href="**URL**" target="_blank" class="aflink">楽天</a></div>
 <div class="af-kobox af-blue">
<a href="**URL**" target="_blank" class="aflink">Yahooショッピング</a></div>
 </div><div class="clear"></div>
</div>

上記のコードをコピー&ペーストして文中に貼り付けるだけでOKです。
これで広告の雛形が準備できました。

このコードはwordpressのプラグイン「AddQuicktag」を使って、ショートコードとして簡単にいつでも呼び出せるようにしておくと大変便利ですよ。

 

ちなみにAddQuicktagのインストール方法や簡単な使い方については下記のページで紹介しています。

AddQuicktagの簡単な使い方や403エラーの対処方法
ワードプレスで短時間で効率的に記事を書くために役立つプラグイン「AddQuicktag」。今回はこのAddQuicktagの簡単な使い方から、これを利用した際に起こりがちな403エラーの対処方法についてご紹介します。AddQuicktagの...

 

コピペしたHTMLの雛形にamazonや楽天などのアフィリエイトリンクを貼りつけていく

次に上でコピペしたHTMLの雛形にamazonや楽天などのASPのアフィリエイトリンクを貼りつけていきます。

※amazon・楽天の広告リンクに関しては「もしもアフィリエイト」を使った方法について紹介していきます。

まずは「**商品画像**」の部分に画像のアフィリエイトリンクを貼り付ける

もしもアフィリエイトのトップページから、画面上部にある「かんたんリンク」をクリックして、「かんたんリンクを使ってみる」をクリックします。

もしもアフィリエイトで商品検索

「商品リンク」タブが選択されている状態で、紹介したい商品名を検索欄に記入して検索します。

もしもアフィリエイトでamazonの画像アフィリエイトリンク作成

紹介したい商品を選択し、下の部分で「画像」「160×160px」を選択して「アフィリエイトリンク作成」をクリックします。(ここではまずamazonの広告を選択することにしました)

そうするとソースが表示されるので、これをHTMLコードの雛形の「**商品画像**」の部分にコピペします。

次に「**商品タイトル**」の部分にテキストのみのリンクを貼り付ける

次に「**商品タイトル**」の部分にテキストリンクを貼りつけます。

もしもアフィリエイトでamazonのテキストリンク作成

今度は「画像」ではなく、「文字」を選択して下のて「アフィリエイトリンク作成」をクリックします。

そして表示されたソースをコピペして、「**商品タイトル**」の部分に貼りつけます。

更に「**商品説明**」欄で簡単な商品説明を記入

「**商品タイトル**」の部分には、簡単な商品説明を記入します。
各種通販サイトに記されている商品説明欄から一分だけ引っ張ってきて文章をコピペすると良いでしょう。

「af-amazon」のdivタグ内の「**URL**」の部分にamazonの広告リンクを挿入する

<div class="af-kobox af-amazon">
<a href="**URL**" target="_blank" class="aflink">Amazon</a></div>

「af-amazon」のdivタグ内の「**URL**」の部分(コード上の赤文字の部分)にamazonの広告リンクを挿入します。

もしもアフィリエイトでamazonのテキストリンク作成

amazonの商品を選択した状態で、テキストリンクを作成してソースを表示させます。

ソースのコピー箇所
この時表示されたソースはすべてをコピペするのではなく、 href=”URL” の URL の部分だけをコピーして「af-amazon」のdivタグ内の「**URL**」の部分に貼り付けます。

「af-rakuten」のdivタグ内の「**URL**」の部分に楽天の広告リンクを挿入する

上記アマゾンと同じ要領で、テキストリンクを作成して表示させたソースのうちの href=”URL” の URL の部分だけをコピーして「af-rakuten」のdivタグ内の「**URL**」の部分に貼り付けます。

楽天の場合は検索結果リンクの方が良いかも

楽天の場合は「商品リンク」ではなく、「検索結果リンク」の方が良いかもしれません。

「af-blue」のdivタグ内の「**URL**」の部分にYahoo!ショッピングなどの広告リンクを挿入する

※amazonと楽天の広告リンクだけしか表示させない場合は、ここは削除してもかまいませんし、その他何でも良いのですがここではYahoo!ショッピング(バリューコマース)での広告リンクの貼り方についてご紹介します。

※Yahoo!ショッピングはもしもアフィリエイトでも可能ですが、同じASPであるバリューコマースの方が若干還元率が高いのでお得です。

Yahoo!ショッピングの広告URL

まずはヤフーショッピングのサイトの検索欄に、紹介したい商品を入力して検索し、上部に表示されているURLをコピーします。

バリューコマースでYahoo!ショッピングの広告URLを貼り付ける①

 

次にバリューコマースのサイトへ行き、サイト上部にある検索窓に「ヤフー」などと入力をして、プログラム「Yahoo!ショッピング」を見つけます。プログラム「Yahoo!ショッピング」が見つかれば、横にある「広告素材を選ぶ」をクリックします。

バリューコマースでYahoo!ショッピングの広告URLを貼り付ける②

するとこのような画面が出てくるので、この画面からページを下の方へスクロールさせていきます。

バリューコマースでYahoo!ショッピングの広告URLを貼り付ける③

下の方へスクロールさせていくと、Mylinkコードを取得できる部分が見つかるので、ここの「コピーしたURLを貼り付ける」の欄にYaho0!ショッピングで商品検索結果画面のURLを貼り付けて、右下にある「Mylinkコードを取得」をクリックすることで、ソースを表示させることができます。

あとはamazonなどと同じ要領で、ソース内のhref=”URL” の URL の部分だけをコピーして「af-blue」のdivタグ内の「**URL**」の部分に貼り付けます。

カエレバのような自作広告 CSS装飾前

これでとりあえずカエレバのような、商品画像+複数のショップのアフィリエイトリンクがまとめて記載された広告が作成されました。

広告のデザインをCSSでカスタマイズする

仕上げに上記の装飾が施されていないアフィリエイトリンクを、CSSでおしゃれにカスタマイズしていこうと思います。

カスタマイズ方法は無数にあり、自分好みのデザインにしていけばそれで良いと思いますが、今回は一例として下記のようにamazon、楽天、Yahoo!ショッピングのそれぞれのボタンの色を、各々の通販サイトをイメージしたようなカラーさせ、更にマウスにボタンを当てると下に沈んで同時に影が消えるような装飾の仕方について紹介していきます。

 

◎プロが教える、Google AdSenseで「10年先も安定して稼ぎ続ける」50の王道!

CSSのコードは下記の通りです。

.af-box{
    border-radius: 4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
	  border: 1px solid #d1d1d1;
    padding: 10px;
    margin: 0 8px;
}

.af-imgbox{
    width: 160px;
    margin-right: 10px;
    float: left;
    text-align: center;
}
.af-textbox{
    width: 100%;
}
.af-title{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}
.af-desc{
    font-size:14px;
    margin-bottom: 10px;
}
.af-kobox{
    width: 160px;
    margin: 0 5px 5px 0;
    font-size: 14px;
    font-weight: bold;
    float: left;
    text-align: center;
}
.af-kobox a.aflink{
    display: block;
    padding: 5px 0 5px 0;
    text-decoration: none;
	 border-radius: 4px;
	 -moz-border-radius:4px;
    -webkit-border-radius:4px;
		box-shadow: 0px 2px 4px 0 rgba(0,0,0,.26); 
}

.af-kobox a:hover {
	box-shadow: none;
	-ms-transform: translateY(4px);
	-webkit-transform: translateY(4px);
	transform: translateY(4px);
	color: #ffffff;
}

.af-amazon{
	
}
.af-amazon a{
	  	box-shadow: none;
	  background: #ff9901;
    color: #ffffff  !important;
}
.af-rakuten{
  
}
.af-rakuten a{
	   background:#c20004;
    color: #ffffff  !important;
}
.af-blue{
   
}
.af-blue a{
	  background: #ff0033;
    color: #ffffff  !important;
}
.clear{clear:both;}
@media screen and (max-width: 399px) {

    .af-imgbox{
        margin: 0 auto;
        text-align: center;
        float: none;
    }

}

 

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

このコードをワードプレスの左側のメニューにある「外観」>「カスタマイズ」>「追加CSS」のとこで貼り付けることで、うえで作った広告のデザインが反映されます。

ちなみにボタンのデザインを変えたい場合は、Bttuon Generator(https://www.bestcssbuttongenerator.com/)というサイトなどを使えば、CSS初心者の方でも好きな見た目のボタンを簡単に作ることができます。

ボタンジェネレーター

作り方はまずメニュー右側で適当に良いと思うボタンを選択し、画面中央で色などをカスタマイズした後、それで良ければクリックすることでボタンが作成されます。

あとは画面の右側にコードが表示されるので、これの中括弧の中身の部分だけをコピーして、「.af-kobox」などの中括弧の中身に貼り付けて行くと良いでしょう。

おわりに

以上今回はamazonでカエレバやRinkerなどのツールが使えなくなってしまった時の対処方法として、カエレバのようなアフィリエイトリンクをwordpressで自作で作る方法についてご紹介していきました。

こうした自作アフィリエイトリンクは、カエレバやRinkerなどのツールを使う場合に比べて慣れないうちはどうしても時間や労力がかかってしまいますが、慣れてしまうと素早く作成できるうえに、今後カエレバやRinkerなどの便利なツールが使えなくなってしまったとしても早急に対応できたりします。

なので「カエレバやRinkerでamazon広告が貼れなくなった」といったような不測の事態に備えるためにも、こうした自作アフィリエイトリンクを作ってみると良いかもしれません。

コメント

タイトルとURLをコピーしました