【超初心者向け】Simplcityでカエレバ・ヨメレバを導入する手順の全て(CSSのカスタマイズ含む)

ブログを始めて約1年半が経ちました。

今までアドセンス一本でしたが、年も明けてそろそろ収益化も図っていきたかったため、初めてカエレバを導入したので使い方をまとめておきます。

もし初めて使う方や、使い方がよくわからないなという方は参考にしていただければ幸いです。

ノーマルバージョンだと見た目が少し寂しかったので、カスタマイズ方法も併せてご紹介します。

広告
レクトアングル大(広告)①

スポンサーリンク

カエレバ・ヨメレバを使うメリット

アフィリエイトを貼る時にカエレバ・ヨメレバを使えば、例えばアマゾンと楽天市場など複数の導線を一度に掲載することができます

通常アマゾンアソシエイトや楽天アフィリエイト単体だと1つの導線しか掲載することができないですよね?

つまり

アマゾンしか使わないユーザー

楽天市場しか使わないユーザー

両方使うユーザー

上記のどのユーザーにもアフィリエイトを利用してもらうことができ、収益の取りこぼしを防ぐことができます。

その他にもヤフーショッピングや7netなどにも導線を増やすことが可能です。

カエレバ・ヨメレバの導入方法の全て

手順①:カエレバ・ヨメレバのサイトに行く

なにはともあれサイトに行かないと始まりません。

カエレバはコチラ

ヨメレバはこちら

まずは上記のサイトに行ってください。

手順②:サイト名IDを入力

次はサイト名と各ASPのIDを入力します。

今回はアマゾンと楽天市場を掲載したかったので、2つIDを入力しています。

※IDは仮のものです

入力が完了したら下の方にある「保存」ボタンを押す

これでサイトの登録が完了しました。

次回からはサイトに行けば最初から入力されてあります。

手順③:商品を検索

次にページ上部の検索欄で、掲載したい商品を検索すると商品が出てきます。

欲しい商品が出てきたら、「ブログパーツを作る」をクリック

手順4:掲載広告の設定

ここでは広告のデザインや、タイトル等を決めることができます。

気に入ったデザインを選択し、決まったら下部のURLをコピー。

あとは自分のブログに貼り付けるだけです。

カッコ良く見せるカスタマイズ方法

通常版は正直見た目がショボい

ノーマルバージョンだと見栄えが若干寂しかったので、CSSをいじって若干見た目を変更しました。

PC初心者も悪戦苦闘しましたが、ゆき後輩さんのサイトにただ張り付けるだけの超有難いCSSが載っていましたので、ご紹介します。

やり方はCSSを張り付けるだけ

下記のCSSをスタイルシートに貼り付けるだけです。

通常のスタイルシートに貼り付けるだけで、PCとスマホの両方が一気に変更できるのでメチャクチャ簡単でした。

それがこちら。

/*————————————–
ヨメレバ・カエレバ 1
————————————–*/
.booklink-box, .kaerebalink-box {
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 1px 1px 3px 1px #ddd;
padding: 10px 15px;
}

.booklink-image, .kaerebalink-image {
margin: 0 0 15px;
}

.booklink-image img, .kaerebalink-image img {
display: block;
margin: 0 auto;
text-align: center;
}

.booklink-info, .kaerebalink-info {
text-align: center;
line-height: 120%;
overflow: hidden;
}

.booklink-name, .kaerebalink-name {
font-size: 16px;
margin-bottom: 14px;
line-height: 1.2em;
}

.booklink-powered-date, .kaerebalink-powered-date {
font-size: 8pt;
line-height: 120%;
}

.booklink-powered-detail, .kaerebalink-detail {
margin-bottom: 15px;
}

.booklink-link2, .kaerebalink-link1 {
margin-top: 20px;
}

.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkseven {
width: 90%;
height: 15px;
overflow: hidden;
background: linear-gradient(to bottom,#ffffff 5%,#f6f6f6 100%);
background-color: #ffffff;
border-radius: 6px;
border: 1px solid #dcdcdc;
display: inline-block;
margin: 0 auto 5px;
padding: 10px 0;
text-align: center;
}

.shoplinkamazon:hover, .shoplinkrakuten:hover, .shoplinkkindle:hover, .shoplinkyahoo:hover, .shoplinkseven:hover {
background: linear-gradient(to bottom,#f6f6f6 5%,#ffffff 100%);
background-color: #f6f6f6;
}

.shoplinkamazon:active, .shoplinkrakuten:active, .shoplinkkindle:active, .shoplinkyahoo:active, .shoplinkseven:active {
position: relative;
top: 1px;
}

.shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkkindle a, .shoplinkseven a {
display: block;
cursor: pointer;
text-decoration: none;
font-weight: 800;
text-shadow: 1px 1px 1px #dcdcdc;
font-size: 12px;
}

.shoplinkamazon a {
color: #FF9901;
}

.shoplinkrakuten a {
color: #c20004;
}

.shoplinkkindle a {
color: #007dcd;
}

.shoplinkyahoo a {
color: #7b0099;
}

.shoplinkseven a {
color: #32CD32;
}

.booklink-footer {
clear: left;
}

/*————————————–
ヨメレバ・カエレバ 2
————————————–*/
.booklink-box, .kaerebalink-box {
width: 80%;
margin: 20px auto;
padding: 20px;
}

.booklink-image, .kaerebalink-image {
margin: 0 15px 0 0;
float: left;
}

.booklink-info, .kaerebalink-info {
margin: 0;
text-align: left;
}

.booklink-name, .kaerebalink-name {
margin-bottom: 24px;
line-height: 1.5;
}

.booklink-link2, .kaerebalink-link1 {
margin-top: 10px;
}

.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkseven {
float: left;
width: 30%;
margin: 15px 1% 0 auto;
padding: 10px 0;
}

.shoplinkyahoo a {
font-size: 10px;
}

/*————————————–
ヨメレバ・カエレバ 3
————————————–*/
@media only screen and (max-width: 480px) {
.booklink-box, .kaerebalink-box {
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 1px 1px 3px 1px #ddd;
padding: 10px 15px;
}

.booklink-image, .kaerebalink-image {
margin: 0 0 10px;
float: none;
}

.booklink-image img, .kaerebalink-image img {
margin: 0 auto;
}

.booklink-info, .kaerebalink-info {
font-size: 12px;
margin: 0;
}

.booklink-name, .kaerebalink-name {
font-size: 15px;
margin-top: 2px;
}

.booklink-detail, .kaerebalink-detail {
margin-top: 5px;
}

.booklink-powered-date, .kaerebalink-powered-date {
font-size: 11px;
margin-top: 5px;
}

.booklink-link2, .kaerebalink-link1 {
font-size: 14px;
}

.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkseven {
float: none;
width: 96%;
margin: 5px 0;
padding: 10px 0;
}
}

出典:https://shitameda.com/simplicity-kaereba-button-customize/

貼り付け先は

外観」⇒「テーマの編集」で表示されるスタイルシートです。

貼り付けたら保存して完了。

ブログパーツを作成するときの注意点

カスタマイズしたデザインを使うとき、デザインは必ず「amazlet風-2(cssカスタマイズ用)」を選択してください。

通常バージョンとの比較がこちら

【通常版】

なんか寂しいですよね。。。

【カスタマイズ後】

ボタンもできて良い感じ!

私のようなワードプレス初心者にはゆき後輩さんのようなサイトは非常に助かりました。

本当にありがとうございます。

私も不慣れな方にもわかるように、できるだけ詳しく書いてみました。

もしよろしければ参考にしてみてください。

広告
レクトアングル大(広告)①

スポンサーリンク

★気に入ったらシェアをお願いします★

フォローする

広告
レクトアングル大(広告)①

スポンサーリンク