アフィリエイトは稼げる？実践記【その9】アマゾンと楽天の広告をカエレバでシンプルにまとめる！
ブログ記事に貼ったアマゾンと楽天の広告を一つにまとめる
こんにちはkk318です！
前回、もしもアフィリエイトに登録してアマゾンと楽天の広告をブログ記事に載せましたが表示に納得がいかず、色々と調べました。すると「カエレバ」というサイトで広告を一つにまとめる事が出来ると分かり早速作業してみました！
まずはネットで「カエレバ」を検索
下の方にある「ユーザーデーター入力」に必要な情報を入力していきます。
・サイト名
・アマゾンのアフィリエイトＩＤ（もしもアフィリエイトで提携したＩＤ）
・楽天のアフィリエイトＩＤ（もしもアフィリエイトで提携したＩＤ）
上記3点を入力したら「保存」ボタンをクリック
アマゾン・楽天それぞれのアフィリエイトＩＤの調べ方
「プロモーションを探す」から「提携中プロモーション」をクリックします。
アマゾンの「広告リンク取得」をクリックします。
ソースの中の a_id=の後の数列がアマゾンのアフィリエイトIDです。
楽天もアマゾンと同じように調べます。
それぞれ調べたアフィリエイトIDを先ほどのユーザーデーター入力で記入します。
記入したら「保存」を押して準備完了です。
カエレバで商品検索
カエレバサイトの一番上の「検索キーワード」で紹介したい商品を検索します。
ヒットした商品から広告に載せたい写真を選んで「ブログパーツを作る」をクリックします。
商品が検索されなかったら、もう一度検索を押してください。
2回目で検索されるケースが結構ありました。
デザイン：amazlet風-2（CSSカスタム用）を選択して
テキストリンクを右クリックコピーします。
ワードプレスの広告を載せたい記事に移動して、テキスト表示にして貼り付けたい部分にカーソルを合わせ右クリック貼り付けをします。
更新を押してプレビューを見てみると、ハイ！この通り↓
楽天とアマゾンが一枚の広告になりました！
しかし！！！まだちょっとスタイリッシュさに欠けています・・・
ネットで見るほかの方の広告は、もっとカッコ良かった気がする！
そこでさらにネットで調べるとボタンカスタムというのが有るらしい。
そこで早速やってみます！
ワードプレス左メニューの「外観」から「CSS編集」をクリックします。
「追加CSS」の空白の行にネットでコピーさせてもらった文字列を貼り付けます。
↓こちらが今回使わせてもらったCSSです
/* カエレバ,ヨメレバ カスタマイズ */
.kaerebalink-link1 img, .booklink-link2 img{display:none;}
.kaerebalink-box, .booklink-box {
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 1px 1px 3px 1px #ddd;
padding: 15px;
overflow: hidden; /* float解除用 */
margin-bottom: 20px;
}
.kaerebalink-image, .booklink-image {
margin-right: 18px;
float:left;
}
.kaerebalink-image img, .booklink-image img {
box-shadow: 0 0 1px 1px #ccc;
}
.kaerebalink-info, .booklink-info {
font-size: 14px;
margin: 0;
overflow: hidden; /* float解除用 */
}
.kaerebalink-name, .booklink-name {
font-size: 18px;
margin-top: 2px;
}
.kaerebalink-detail, .booklink-detail {
margin-top: 5px;
}
.kaerebalink-powered-date, .booklink-powered-date {
font-size: 12px;
margin-top: 5px;
}
.kaerebalink-link1, .booklink-link2 {
font-size: 16px;
}
.shoplinkamazon, .shoplinkrakuten, .shoplinkyahoo, .shoplinkkindle, .shoplinkrakukobo {
float: left;
width: 30%;
text-align: center;
margin: 15px 1% 0 auto;
padding: 5px 0;
border: 1px solid #ccc;
border-radius: 8px;
text-shadow:1px 1px 1px rgba(0,0,0,0.3);
background: -moz-linear-gradient(top,#FFF 0%,#EEE);
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
}
/* ショップリンクの文字色をAMPページと統一 */
/* 以下 Simplicityのamp.cssから拝借 */
.shoplinkamazon a {
color: #ff9901;
}
.shoplinkrakuten a {
color: #c20004;
}
.shoplinkkindle a {
color: #007dcd;
}
.shoplinkyahoo a {
color: #7b0099;
font-size:14px;
}
/* 楽天koboはamp.cssになかった */
.shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkkindle a, .shoplinkrakukobo a {
text-decoration: none;
display: block;
}
.shoplinkamazon a:hover, .shoplinkrakuten a:hover, .shoplinkyahoo a:hover, .shoplinkkindle a:hover, .shoplinkrakukobo a:hover {
opacity: 0.7;
background: -moz-linear-gradient(top,#FFF 80%,#EEE);
}
@media only screen and (max-width: 580px) {
.kaerebalink-box, .booklink-box {
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 1px 1px 3px 1px #ddd;
padding: 10px 15px;
}
.kaerebalink-image, .booklink-image {
margin: 0 0 10px 0;
float: none;
}
.kaerebalink-image img, .booklink-image img {
margin: 0 auto;
}
.kaerebalink-info, .booklink-info {
font-size: 12px;
margin: 0;
}
.kaerebalink-name, .booklink-name {
font-size: 15px;
margin-top: 2px;
}
.kaerebalink-detail, .booklink-detail {
margin-top: 5px;
}
.kaerebalink-powered-date, .booklink-powered-date {
font-size: 11px;
margin-top: 5px;
}
.kaerebalink-link1, .booklink-link2 {
font-size: 14px;
}
.shoplinkamazon, .shoplinkrakuten, .shoplinkyahoo, .shoplinkkindle, .shoplinkrakukobo {
float: none;
width: 96%;
margin: 10px 0;
padding: 5px 0;
}
}/* カエレバ,ヨメレバ カスタマイズ END */
保存してプレビューを見てみると！
こんな感じでとてもスタイリッシュにシンプルに広告が出来ました！！
以上、アマゾンと楽天の広告リンクをカッコ良くするでした。
