ブログやサイトで商品を紹介するアフィリエイトやるのに便利なのが「カエレバ」がすごく便利です。
アフィリエイトを行ううえで、広告を貼って表示された回数やクリック数に応じて収益を得る場合(GoogleAdsenなどなど)と、商品リンクを貼ってその紹介製品/サービスを購入・加入すると収益(Amazonアソシエイトや楽天アフィリエイトなどなど)を得ることができます。今回は、その収益を得る２つの方法のうちの商品を紹介して収益を得るための便利なツールです。
複数のアフィリエイトIDを使って、チャンスを逃さない「カエレバ」
まず、カエレバとは、公式HPの文言をそのまま引用
[su_quote cite=”カエレバとは” url=”https://kaereba.com/”]
カエレバ」ブログパーツは、ブログ上で、特に量販品を紹介するためのブログパーツです。アマゾン、楽天市場、Yahoo!ショッピングなどの複数のネットショッピングモールへのリンクを表示することで、アフィリエイト報酬のとりこぼしを減らせます 楽天ポイントを貯めている人はAmazonでは買いません。彼らは、あなたが紹介した商品を買おうと思っても、楽天へのリンクがなければ、楽天市場へ移動して探します。報酬率を意識して楽天を紹介しないことは、読み手のニーズ無視した、無意味な機会損失です！[/su_quote]
アフィリエイトとして商品を紹介するために、Amazonアソシエイト、楽天市場、Yahooショッピング(バリューコマース経由)などに登録し、それぞれの商品リンクページを作成する必要があります。しかし、ブログなどを見るひとは、どのネットショッピングで購入するかわかりません。だから、各サービスのリンク先をブログ記事などに貼り付けるとなると、めんどくさい。そういう問題をカエレバさんは解消してくれます。なんと複数のアフィリエイトリンクを一括で表示してくれるからです。
カエレバさんを利用方法に関しては、公式HPをそのまま観てもらうのが一番です。
ちなみに、カエレバさんで商品リンクを作成すると、こんな感じです。ちなみに、CSSをいじっています。
作成したCSSは、「外観＞CSS編集」もしくは、「テーマの編集で直接CSSに書き込む」という方法です。私は、CSS編集で外部CSSとして保存しています。テーマに直接CSSを保存してしまうと、テーマが不具合解消のためにアップデートされてしまったら、CSSも上書き保存されて消えてしまうためです。(それを防ぐために子テーマを作成という方法もあります。)←解釈として合っていると思いますが、間違っていたらごめんなさい。
Amazonやら楽天などへの商品ページボタンが実装されており、ブログを観ている人は自分が普段使っているサービスで購入できるようになっています。
レイアウトをカスタマイズして見栄えをよくする
カエレバさんは、標準の表示でも十分なのですが、自分の考えたCSS(スタイルシート)を反映させることで、見栄えをよくすることができます。
このブログで表示されているものは、カスタマイズされたCSSを反映させています。
今回、カスタマイズとして参考にさせていただいたのは、
です。スマホ表示、PC表示、レスポンシブと対応しているCSSが紹介されています。ちなみに、カエレバの兄弟サービス「ヨメレバ(書籍紹介向)」にも対応。
ほぼそのまま転用して、一部表示方法はいじっています。このブログで反映させているカエレバのスタイルシートは以下の通りになります。
.booklink-box, .kaerebalink-box{
padding:25px;
margin-bottom: 10px;
border:dashed #CCC 1px;
overflow: hidden;
font-size:small;
}
.booklink-image, .kaerebalink-image{
margin:0 15px 0 0;
float:left;
min-width: 160px;
text-align: center;
}
.booklink-image img, .kaerebalink-image img{
margin:0 auto;
text-align:center;
}
.booklink-info, .kaerebalink-info{
margin:0;
line-height:120%;
overflow: hidden;
}
.booklink-name, .kaerebalink-name{
margin-bottom:24px;
line-height:1.5em;
}
.booklink-powered-date, .kaerebalink-powered-date{
font-size:8px;
margin-top:10px;
font-family:verdana;
line-height:120%;
}
.booklink-detail, .kaerebalink-detail{font-size: 12px;}
.booklink-powered-date, .kaerebalink-detail{margin-bottom:15px;}
.booklink-link2, .kaerebalink-link1{margin-top:10px;}
.booklink-link2 a,
.kaerebalink-link1 a{
width:30%;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
display:inline-block;
margin:5px 2px 0 0;
padding:10px 1px;
text-align:center;
float:left;
text-decoration:none;
font-weight:800;
text-shadow:1px 1px 1px #dcdcdc;
font-size:12px;
color: #fff !important;
}
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover{opacity: 0.6;}
.booklink-link2 a:active
.kaerebalink-link1 a:active{
position:relative;
top:1px;
}
.shoplinkseven a{color:#FF9901 !important;border: 1px solid #6DF79C !important;}
.shoplinkamazon a{color:#FF9901 !important;border: 1px solid #FF9901 !important;}
.shoplinkrakuten a{color:#c20004 !important;border: 1px solid #c20004 !important;}
.shoplinkkindle a{color:#007dcd !important;border: 1px solid #007dcd !important;}
.shoplinkkakakucom a{color:#314995 !important;border: 1px solid #314995;}
.shoplinkyahoo a{color:#7b0099 !important;border: 1px solid #7b0099 !important;}
.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}
@media screen and (max-width: 680px) {
.booklink-box, .kaerebalink-box{padding:15px;}
.booklink-image, .kaerebalink-image{
width: 100px !important;
min-width: initial;
}
.booklink-name, .kaerebalink-name{margin-bottom:12px;}
.booklink-powered-date, .kaerebalink-powered-date{margin-top:5px;}
.booklink-link2 a,
.kaerebalink-link1 a{
width:calc(100% - 4px);
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
margin: 2px 0px;
padding:10px 0px;
}
}
実は、HPで紹介されているCSSをそのままWordPressに追加しても正常に機能しませんでした。(保存すら受け付けない)場合によってはCSSを調整する必要があります。
これは、紹介されているスタイルシートのコードが悪いわけではなく、Wordpressに採用しているテーマやなんやかんやが影響しています。
私が行った問題解決の手段としては
少しずつCSSを保存していく
です。
そうすれば、どの時点で問題が起きているかがわかります。問題が起きたら、さらに、分割してCSSを貼り付けていき挙動を確認する。
私の場合は、CSSシートにコメントを残す「/*コメント*/」が含まれていると保存できないという問題でした。
コメント