Amazonにしかない商品は「カエレバ風」にお任せあれ!

どうも、リュウセイです!

 

あなたはカエレバを使っていますか?

 

Amazon・楽天・Yahoo!などのショップへのアフィリエイトリンクを一纏めにブログパーツ化できるので便利ですよね。

 

一見万能そうに見えるカエレバ。

 

しかし、ちょっとだけデメリットがあります。

 

それは何かと言うと、「Kindleセルフ出版本などAmazonにしか取り扱いのない商品を紹介する時は使えない」点です。

 

昔は出来たのですが、AmazonのPA-APIの利用規約の変更によって今は出来なくなりました。

 

そこで代わりとして使えるのが「カエレバ風」です。

 

使い方は簡単なので解説していきます。

 

 

カエレバ風を使うために必要なもの

 

カエレバ風を使うために必要なものは「Amazonアソシエイト」もしくは「もしもアフィリエイト経由のAmazonプログラム」です。

 

Amazonアソシエイトの審査は2020年より厳しくなったので、おすすめはもしもアフィリエイト経由でAmazonと提携する方法です。

 

もしもアフィリエイトへの無料会員登録が必要なので、まだ登録していない方は下記の記事を参考にして登録を済ませてください。

 

もしもアフィリエイトの登録方法|登録削除される理由も合わせて解説

 

本家Amazonアソシエイトよりも、もしもアフィリエイト経由で申請した方が受かりやすいです。

 

報酬利率も本家と同じ部分が多々あるので、本家で何度も審査に落とされている人はもしもアフィリエイト経由で申請してみましょう。

 

コチラの記事も合わせて参考にしてみてください↓

 

Amazon.co.jpとの提携先ASPは「もしもアフィリエイト」が一番な理由

 

 

カエレバ風の使い方

 

使い方はとっても簡単です。

 

Amazonアソシエイト及びもしもアフィリエイトでの使い方について順番に解説していきます。

 

まずは、「カエレバ風ブックマークレット」をブラウザに登録しておきましょう。

 

ブックマーク名を「カエレバ風ブックマーク」、URLを下記のものにしてお気に入りバーに登録してください。

 


javascript:(function(f,s){s=document.createElement(“script”);s.src=”//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js”;s.onload=function(){f(jQuery.noConflict(false))};document.body.appendChild(s)})(function($){jQuery(document).ready(function(){if(location.host.match(/amazon/)){$(“#amzn-ss-image-link span span strong a”)[0].click();setTimeout(function(){aa = $(“#amzn-ss-image-textarea”).html();cc = $(“h1#title”).text().trim();if(!cc){cc = $(“h1”).eq(0).text().trim();}window.open(“https://kaereba.com/wind/?data=”+encodeURIComponent(aa+”:*:”+cc)+”&ss=”+location.host);}, 3000)}else if(location.host.match(/moshimo/)){aa = $(“#active-preview-box form .preview-area .preview-item div”).html();cc=””;window.open(“https://kaereba.com/wind/?data=”+encodeURIComponent(aa+”:*:”+cc)+”&ss=”+location.host);};undefined; })});

 

 

または上記コードを直接お気に入りバーへドラッグ&ドロップしても追加できます。まぁコッチのやり方でいいですね。

 

 

Amazonアソシエイトでのやり方

 


Amazonアソシエイトに認証されているAmazonアカウントでAmazonサイトを開くと、上部に「アソシエイトツールバー」が表示される


 


この状態で、Amazonでリンク化したい商品を検索してお気に入りバーの「カエレバ風ブックマークレット」をクリック


 


ブックマークレットをクリックすると自動的にカエレバ風のサイトに移動するので、ブログパーツのHTMLをコピー


 

後はこのHTMLをブログ記事内の「テキストエディタ」に貼り付ければ完了です。

 

 

もしもアフィリエイトの場合

 


もしもアフィリエイトにログインして検索窓に「Amazon.co.jp」と入力して検索


 

Amazon.co.jpが検索結果に表示されますが、まだ提携していない場合は「提携申請する」をクリックして提携申し込みを行って下さい。

 

審査があるので結果が来るまで待ちましょう。

 

無事に合格したら次のフェーズです。

 


「商品リンク」をクリック


 


商品リンクを作成したい商品を検索


 


「商品リンクを作る」をクリック


 


この状態でお気に入りバーの「カエレバ風ブックマークレット」をクリック


 


ブックマークレットをクリックすると自動的にカエレバ風のサイトに移動するので、ブログパーツのHTMLをコピー


 

後はこのHTMLをブログ記事内の「テキストエディタ」に貼り付ければ完了です。

 

 

カエレバ風をおしゃれにカスタマイズする方法

 

今回は「カエレバ(CSSカスタマイズ)」を選択してブログパーツを作成しました。

 

CSSカスタマイズをしなかった場合はこうなって↓

 

haru(ハル) 100% 天然由来シャンプー haru kurokamiスカルプ (ノンシリコン、アミノ酸系)(リンス・コンディショナー不要) 柑橘系 400mL

 

CSSカスタマイズした場合がこうなります↓

 

 

どうせならCSSカスタマイズした方が良いので、その実装方法について解説します。

 

解説すると言っても、CSSをテーマのスタイルシートの一番下に記述するだけです。

 

CSSはコチラのサイトから引用してきました。

 


/*————————————————–
カエレバ・ヨメレバ・トマレバ WordPressの場合
—————————————————*/

.cstmreba {
width: 98%;
height:auto;
margin:36px 0;
font-family:’Lucida Grande’,’Hiragino Kaku Gothic ProN’,Helvetica, Meiryo, sans-serif;
line-height: 1.5;
word-wrap: break-word;
box-sizing: border-box;
display: block;
}
.cstmreba a {
transition: 0.8s ;
color:#285EFF; /* テキストリンクカラー */
}
.cstmreba a:hover {
color:#FFCA28; /* テキストリンクカラー(マウスオーバー時) */
}
.cstmreba .booklink-box,.cstmreba .kaerebalink-box,.cstmreba .tomarebalink-box {
width: 100%;
background-color: #fff; /* 全体の背景カラー */
overflow: hidden;
border:double #d2d7e6;
border-radius: 5px;
box-sizing: border-box;
padding: 12px 8px;
}
/* サムネイル画像ボックス */
.cstmreba .booklink-image,
.cstmreba .kaerebalink-image,
.cstmreba .tomarebalink-image {
width:150px;
float:left;
margin:0 14px 0 0;
text-align: center;
}
.cstmreba .booklink-image a,
.cstmreba .kaerebalink-image a,
.cstmreba .tomarebalink-image a {
width:100%;
display:block;
}
/* サムネイル画像 */
.cstmreba .booklink-image a img,.cstmreba .kaerebalink-image a img,.cstmreba .tomarebalink-image a img {
margin:0 auto;
padding: 0;
text-align:center;
}
.cstmreba .booklink-info,.cstmreba .kaerebalink-info,.cstmreba .tomarebalink-info {
overflow:hidden;
line-height:170%;
color: #333;
}
/* infoボックス内リンク下線非表示 */
.cstmreba .booklink-info a,
.cstmreba .kaerebalink-info a,
.cstmreba .tomarebalink-info a {
text-decoration: none;
}
/* 作品・商品・ホテル名 リンク */
.cstmreba .booklink-name>a,
.cstmreba .kaerebalink-name>a,
.cstmreba .tomarebalink-name>a {
border-bottom: 1px dotted ;
font-size:16px;
}
/* タイトル下にPタグ自動挿入された際の余白を小さく */
.cstmreba .kaerebalink-name p,
.cstmreba .booklink-name p,
.cstmreba .tomarebalink-name p {
margin: 0;
}
/* powered by */
.cstmreba .booklink-powered-date,
.cstmreba .kaerebalink-powered-date,
.cstmreba .tomarebalink-powered-date {
font-size:10px;
line-height:150%;
}
.cstmreba .booklink-powered-date a,
.cstmreba .kaerebalink-powered-date a,
.cstmreba .tomarebalink-powered-date a {
border-bottom: 1px dotted ;
color: #333;
}
.cstmreba .booklink-powered-date a:hover,
.cstmreba .kaerebalink-powered-date a:hover,
.cstmreba .tomarebalink-powered-date a:hover {
color:#333;
}
/* 著者・住所 */
.cstmreba .booklink-detail,.cstmreba .kaerebalink-detail,.cstmreba .tomarebalink-address {
font-size:12px;
}
.cstmreba .kaerebalink-link1 img,.cstmreba .booklink-link2 img,.cstmreba .tomarebalink-link1 img {
display:none !important;
}
.cstmreba .kaerebalink-link1,.cstmreba .booklink-link2,.cstmreba .tomarebalink-link1 {
display: inline-block;
width: 100%;
margin-top: 5px;
}
.cstmreba .booklink-link2>div,
.cstmreba .kaerebalink-link1>div,
.cstmreba .tomarebalink-link1>div {
float:left;
width:31%;
min-width:125px;
margin:0.5% 1%;
}
/***** ボタンデザインここから ******/
.cstmreba .booklink-link2 a,
.cstmreba .kaerebalink-link1 a,
.cstmreba .tomarebalink-link1 a {
width: 100%;
display: inline-block;
text-align: center;
box-sizing: border-box;
font-size: 13px;
font-weight: bold;
line-height: 180%;
padding:3% 1%;
margin: 1px 0;
border-radius: 4px;
box-shadow: 0 2px 0 #ccc;
background: -moz-linear-gradient(top,#fafafa,#EEE);
background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#eee));
}
.cstmreba .booklink-link2 a:hover,
.cstmreba .kaerebalink-link1 a:hover,
.cstmreba .tomarebalink-link1 a:hover {
text-decoration: underline;
}
/* トマレバ */
.cstmreba .tomarebalink-link1 .shoplinkrakuten a { color: #76ae25; }/* 楽天トラベル */
.cstmreba .tomarebalink-link1 .shoplinkjalan a { color: #ff7a15; }/* じゃらん */
.cstmreba .tomarebalink-link1 .shoplinkjtb a { color: #c81528; }/* JTB */
.cstmreba .tomarebalink-link1 .shoplinkknt a { color: #0b499d; }/* KNT */
.cstmreba .tomarebalink-link1 .shoplinkikyu a { color: #bf9500; }/* 一休 */
.cstmreba .tomarebalink-link1 .shoplinkrurubu a { color: #000066; }/* るるぶ */
.cstmreba .tomarebalink-link1 .shoplinkyahoo a { color: #ff0033; }/* Yahoo!トラベル */
/* カエレバ */
.cstmreba .kaerebalink-link1 .shoplinkyahoo a {color:#ff0033; letter-spacing:normal;} /* Yahoo!ショッピング */
.cstmreba .kaerebalink-link1 .shoplinkbellemaison a { color:#84be24 ; } /* ベルメゾン */
.cstmreba .kaerebalink-link1 .shoplinkcecile a { color:#8d124b; } /* セシール */
.cstmreba .kaerebalink-link1 .shoplinkkakakucom a {color:#314995;} /* 価格コム */
/* ヨメレバ */
.cstmreba .booklink-link2 .shoplinkkindle a { color:#007dcd;} /* Kindle */
.cstmreba .booklink-link2 .shoplinkrakukobo a{ color:#d50000; } /* 楽天kobo */
.cstmreba .booklink-link2 .shoplinkbk1 a { color:#0085cd; } /* honto */
.cstmreba .booklink-link2 .shoplinkehon a { color:#2a2c6d; } /* ehon */
.cstmreba .booklink-link2 .shoplinkkino a { color:#003e92; } /* 紀伊國屋書店 */
.cstmreba .booklink-link2 .shoplinktoshokan a { color:#333333; } /* 図書館 */
/* カエレバ・ヨメレバ共通 */
.cstmreba .kaerebalink-link1 .shoplinkamazon a,
.cstmreba .booklink-link2 .shoplinkamazon a { color:#FF9901; } /* Amazon */
.cstmreba .kaerebalink-link1 .shoplinkrakuten a ,
.cstmreba .booklink-link2 .shoplinkrakuten a { color: #c20004; } /* 楽天 */
.cstmreba .kaerebalink-link1 .shoplinkseven a,
.cstmreba .booklink-link2 .shoplinkseven a { color:#225496;} /* 7net */
/***** ボタンデザインここまで ******/
.cstmreba .booklink-footer {
clear:both;
}
/*** 解像度480px以下のスタイル ***/
@media screen and (max-width:480px){
.cstmreba .booklink-image,
.cstmreba .kaerebalink-image,
.cstmreba .tomarebalink-image {
width:100%;
float:none;
}
.cstmreba .booklink-link2>div,
.cstmreba .kaerebalink-link1>div,
.cstmreba .tomarebalink-link1>div {
width: 95%;
margin: 0 auto 8px auto;
float:none;
}
.cstmreba .booklink-info,
.cstmreba .kaerebalink-info,
.cstmreba .tomarebalink-info {
text-align:center;
padding-bottom: 1px;
}
}
/*————————————————–
ボタンの背景色をRinker風にカスタマイズ
—————————————————*/

.cstmreba .kaerebalink-link1 .shoplinkrakuten a, .cstmreba .booklink-link2 .shoplinkrakuten a {
color: #fff;
background: #cf4944 !important;
}
.cstmreba .kaerebalink-link1 .shoplinkamazon a, .cstmreba .booklink-link2 .shoplinkamazon a {
color: #fff;
background: #f6a306 !important;
}
.cstmreba .kaerebalink-link1 .shoplinkyahoo a {
color: #fff;
background: #51a7e8 !important;
}

 

また、CSSやJavascriptなどのコードは圧縮することでサイトへの負担を減らして表示速度の低下を防げます。

 

CSSの圧縮は「CSS Minifier (スタイルシートの圧縮)」で可能です。

 

圧縮したコードはコチラです。

 


.cstmreba{width:98%;height:auto;margin:36px 0;font-family:Lucida Grande,Hiragino Kaku Gothic ProN,Helvetica,Meiryo,sans-serif;line-height:1.5;word-wrap:break-word;box-sizing:border-box;display:block}.cstmreba a{transition:.8s;color:#285eff}.cstmreba a:hover{color:#ffca28}.cstmreba .booklink-box,.cstmreba .kaerebalink-box,.cstmreba .tomarebalink-box{width:100%;background-color:#fff;overflow:hidden;border:double #d2d7e6;border-radius:5px;box-sizing:border-box;padding:9pt 8px}.cstmreba .booklink-image,.cstmreba .kaerebalink-image,.cstmreba .tomarebalink-image{width:150px;float:left;margin:0 14px 0 0;text-align:center}.cstmreba .booklink-image a,.cstmreba .kaerebalink-image a,.cstmreba .tomarebalink-image a{width:100%;display:block}.cstmreba .booklink-image a img,.cstmreba .kaerebalink-image a img,.cstmreba .tomarebalink-image a img{margin:0 auto;padding:0;text-align:center}.cstmreba .booklink-info,.cstmreba .kaerebalink-info,.cstmreba .tomarebalink-info{overflow:hidden;line-height:170%;color:#333}.cstmreba .booklink-info a,.cstmreba .kaerebalink-info a,.cstmreba .tomarebalink-info a{text-decoration:none}.cstmreba .booklink-name>a,.cstmreba .kaerebalink-name>a,.cstmreba .tomarebalink-name>a{border-bottom:1px dotted;font-size:1pc}.cstmreba .booklink-name p,.cstmreba .kaerebalink-name p,.cstmreba .tomarebalink-name p{margin:0}.cstmreba .booklink-powered-date,.cstmreba .kaerebalink-powered-date,.cstmreba .tomarebalink-powered-date{font-size:10px;line-height:150%}.cstmreba .booklink-powered-date a,.cstmreba .kaerebalink-powered-date a,.cstmreba .tomarebalink-powered-date a{border-bottom:1px dotted;color:#333}.cstmreba .booklink-powered-date a:hover,.cstmreba .kaerebalink-powered-date a:hover,.cstmreba .tomarebalink-powered-date a:hover{color:#333}.cstmreba .booklink-detail,.cstmreba .kaerebalink-detail,.cstmreba .tomarebalink-address{font-size:9pt}.cstmreba .booklink-link2 img,.cstmreba .kaerebalink-link1 img,.cstmreba .tomarebalink-link1 img{display:none!important}.cstmreba .booklink-link2,.cstmreba .kaerebalink-link1,.cstmreba .tomarebalink-link1{display:inline-block;width:100%;margin-top:5px}.cstmreba .booklink-link2>div,.cstmreba .kaerebalink-link1>div,.cstmreba .tomarebalink-link1>div{float:left;width:31%;min-width:125px;margin:.5% 1%}.cstmreba .booklink-link2 a,.cstmreba .kaerebalink-link1 a,.cstmreba .tomarebalink-link1 a{width:100%;display:inline-block;text-align:center;box-sizing:border-box;font-size:13px;font-weight:700;line-height:180%;padding:3% 1%;margin:1px 0;border-radius:4px;box-shadow:0 2px 0 #ccc;background:-moz-linear-gradient(top,#fafafa,#eee);background:-webkit-gradient(linear,left top,left bottom,from(#fafafa),to(#eee))}.cstmreba .booklink-link2 a:hover,.cstmreba .kaerebalink-link1 a:hover,.cstmreba .tomarebalink-link1 a:hover{text-decoration:underline}.cstmreba .tomarebalink-link1 .shoplinkrakuten a{color:#76ae25}.cstmreba .tomarebalink-link1 .shoplinkjalan a{color:#ff7a15}.cstmreba .tomarebalink-link1 .shoplinkjtb a{color:#c81528}.cstmreba .tomarebalink-link1 .shoplinkknt a{color:#0b499d}.cstmreba .tomarebalink-link1 .shoplinkikyu a{color:#bf9500}.cstmreba .tomarebalink-link1 .shoplinkrurubu a{color:#006}.cstmreba .tomarebalink-link1 .shoplinkyahoo a{color:#f03}.cstmreba .kaerebalink-link1 .shoplinkyahoo a{color:#f03;letter-spacing:normal}.cstmreba .kaerebalink-link1 .shoplinkbellemaison a{color:#84be24}.cstmreba .kaerebalink-link1 .shoplinkcecile a{color:#8d124b}.cstmreba .kaerebalink-link1 .shoplinkkakakucom a{color:#314995}.cstmreba .booklink-link2 .shoplinkkindle a{color:#007dcd}.cstmreba .booklink-link2 .shoplinkrakukobo a{color:#d50000}.cstmreba .booklink-link2 .shoplinkbk1 a{color:#0085cd}.cstmreba .booklink-link2 .shoplinkehon a{color:#2a2c6d}.cstmreba .booklink-link2 .shoplinkkino a{color:#003e92}.cstmreba .booklink-link2 .shoplinktoshokan a{color:#333}.cstmreba .booklink-link2 .shoplinkamazon a,.cstmreba .kaerebalink-link1 .shoplinkamazon a{color:#ff9901}.cstmreba .booklink-link2 .shoplinkrakuten a,.cstmreba .kaerebalink-link1 .shoplinkrakuten a{color:#c20004}.cstmreba .booklink-link2 .shoplinkseven a,.cstmreba .kaerebalink-link1 .shoplinkseven a{color:#225496}.cstmreba .booklink-footer{clear:both}@media screen and (max-width:480px){.cstmreba .booklink-image,.cstmreba .kaerebalink-image,.cstmreba .tomarebalink-image{width:100%;float:none}.cstmreba .booklink-link2>div,.cstmreba .kaerebalink-link1>div,.cstmreba .tomarebalink-link1>div{width:95%;margin:0 auto 8px;float:none}.cstmreba .booklink-info,.cstmreba .kaerebalink-info,.cstmreba .tomarebalink-info{text-align:center;padding-bottom:1px}}.cstmreba .booklink-link2 .shoplinkrakuten a,.cstmreba .kaerebalink-link1 .shoplinkrakuten a{color:#fff;background:#cf4944!important}.cstmreba .booklink-link2 .shoplinkamazon a,.cstmreba .kaerebalink-link1 .shoplinkamazon a{color:#fff;background:#f6a306!important}.cstmreba .kaerebalink-link1 .shoplinkyahoo a{color:#fff;background:#51a7e8!important}

 

どちらを使っていただいても動作します。

 

さらに、ボタンの色を変更したい場合は以下のコードをスタイルシートの一番下に追加すればOKです。

 


.shoplinkamazon a {
color: #fff;
background: #f6a306 !important;
}

 

「#f6a306」が色コードになるので、ここを変更すれば色を変更できます。

 

 

まとめ

 

以上、カエレバ風の使い方の解説でした。

 

Amazonにしかない商品も多いので、通常のカエレバに加えてカエレバ風も使えると便利です。

 

是非参考にしてみてください。

 

それでは、今回はこの辺で。

 

ありがとうございました。

 

チャオ(・∀・)!

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です