Simplicityでヨメレバ・カエレバを綺麗に貼るCSSカスタマイズ

こちらのボタンから簡単にシェアできます

STINGER5や他のテーマでヨメレバ・カエレバを綺麗に貼るCSSカスタマイズはありましたが、Simplicityは中々見当たらなかったので、記事にまとめようと思います。

CSSを読める人は自分でガリガリ書いて貰えば良いと思いますが、書けない人のためにコピペで出来るような内容にしてあります。

2017/06/18追記・・・セブンネットにも対応しました!
2017/06/23追記・・・楽天koboにも対応しました!
スポンサーリンク
スポンサーリンク

ヨメレバ・カエレバとは

そもそも、ヨメレバ・カエレバとは何かをまずご説明します。

書籍紹介ブログパーツ ヨメレバ

公式サイトはこちら

「ヨメレバ」ブログパーツは、ブログ上で書籍を紹介するためのブログパーツです。アマゾン、楽天ブックスなどの複数のブックショップへのリンクを表示することで、アフィリエイト報酬のとりこぼしを減らせます

楽天ポイントを貯めている人はAmazonでは買いません。彼らは、あなたが紹介した本を買おうと思っても、楽天へのリンクがなければ、楽天市場へ移動して探します。報酬率を意識して楽天を紹介しないことは、読み手のニーズ無視した、無意味な機会損失です!

つまり簡単にまとめると、書籍専用のアフィリエイト紹介ツールです。

例えば、表示はこんな感じです。

Amazonアソシエイトだけでなく、楽天アフィリエイトのリンクも1度に貼れてしまうことがとても素晴らしいです!

あと、何気にKindleのリンクも作ってくれるところもイイ!

商品紹介ブログツール カエレバ

公式サイトはこちら

「カエレバ」ブログパーツは、ブログ上で、特に量販品を紹介するためのブログパーツです。アマゾン、楽天市場、Yahoo!ショッピングなどの複数のネットショッピングモールへのリンクを表示することで、アフィリエイト報酬のとりこぼしを減らせます

楽天ポイントを貯めている人はAmazonでは買いません。彼らは、あなたが紹介した商品を買おうと思っても、楽天へのリンクがなければ、楽天市場へ移動して探します。報酬率を意識して楽天を紹介しないことは、読み手のニーズ無視した、無意味な機会損失です!

つまり、簡単にまとめると、商品専用のアフィリエイト紹介ツールです。

例えば、表示はこんな感じです。

こちらも、カエレバと同様にAmazonと楽天市場のアフィリエイトリンクを1度に張ることができます。

ヨメレバ・カエレバまとめ

ここで一旦、ヨメレバ・カエレバについてまとめます。

ヨメレバ・カエレバとは

  • 複数のアフィリエイトリンク(Amazon、楽天など)を、1度に貼ることが出来るブログツール

です。

つまり、商品が売れるよう最大限にサポートしてくれるツールということです。

ヨメレバ・カエレバを綺麗に貼るCSS

CSSをカスタマイズしていない時の表示例

とても便利なブログツールであるヨメレバ・カエレバですが、初期状態の見た目が少し良くないです。

例えば、こんな感じです。

ヨメレバ・カエレバの初期状態の表示例

ちょっと左に詰め過ぎであったり、Amazonと楽天のイメージカラーが出てないですよね?

それを下のように綺麗に表示するカスタマイズを今回ご紹介したいと思います。

カスタマイズCSSのソースコード

カスタマイズは簡単です。
このサイトのコードを該当ファイルにコピペするだけで完了です!

本記事で公開しているCSSは、こちらのサイト様を参考に作成しました。

パソコン表示のCSS

下のコードをSimplicityのstyle.cssに貼り付けてください。

/*--------------------------------------
ヨメレバ・カエレバここから
--------------------------------------*/
.booklink-box, .kaerebalink-box{
width:90%;
margin:20px auto;
padding:20px;
border:double #d2d7e6;
overflow: hidden;
font-size:small;
border-radius:2px;
}
.booklink-image, .kaerebalink-image{
width: 150px;
/*height: 150px;*/
margin:0 15px 20px 0;
float:left;
}
.booklink-image img, .kaerebalink-image img{
/*height: 150px;*/
display:block;
margin:0 auto;
text-align:center;
}
.booklink-info, .kaerebalink-info{
display:block;
margin:0 auto;
text-align:left;
line-height:120%;
overflow: hidden;
}
.booklink-name, .kaerebalink-name{
font-size:16px;
margin-bottom:24px;
line-height:1.5;
}
.booklink-powered-date, .kaerebalink-powered-date{
font-family: verdana;
font-size:8pt;
margin-top:5px;
line-height:120%;
}
.booklink-detail, .kaerebalink-detail{
margin-bottom:5px;
}
.booklink-link2, .kaerebalink-link1{
margin-top:10px;
}
.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkkakakucom, .shoplinkseven, .shoplinkrakukobo{
float:left;
width:30%;
margin:15px 1% 0 auto;
padding:10px 0px;
/*	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 auto; */
/*	padding:10px 0px; */
text-align:center;
}
.shoplinkamazon:hover, .shoplinkrakuten:hover, .shoplinkkindle:hover, .shoplinkyahoo:hover, .shoplinkseven:hover, .shoplinkrakukobo:hover{
background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
background-color:#f6f6f6;
}
.shoplinkamazon:active, .shoplinkrakuten:active, .shoplinkkindle:active, .shoplinkyahoo:active, .shoplinkseven:active, .shoplinkrakukobo:active{
position:relative;
top:1px;
}
.shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkkindle a, .shoplinkkakakucom a, .shoplinkseven a, .shoplinkrakukobo 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{
font-size:10px;
color:#7b0099;
} 
.shoplinkseven a{
color:#000;
}
.shoplinkrakukobo a{
color:#2098A8;
}
.booklink-footer{
clear:left;
} 
/*--------------------------------------
ヨメレバ・カエレバここまで
--------------------------------------*/

スマートフォン表示のCSS

下のコードをSimplicityのmobile.cssに貼り付けてください。

/*--------------------------------------
ヨメレバ・カエレバここから
--------------------------------------*/
.booklink-box, .kaerebalink-box{
width:85%;
margin: 1em 0 1em;
padding: 5%;
border:double #d2d7e6;
overflow: hidden;
font-size:small;
border-radius:2px;
}
.booklink-image, .kaerebalink-image{
float: none !important;
text-align:center !important;
margin:0 auto !important;
}
.booklink-image img, .kaerebalink-image img{
display:block;
margin:0 auto;
}
.booklink-info, .kaerebalink-info{
text-align:center;
line-height:120%;
overflow: hidden;
clear:left;
}
.booklink-name, .kaerebalink-name{
font-size:16px;
margin-bottom:14px;
line-height:1.2em;
}
.booklink-powered-date, .kaerebalink-powered-date{
font-size:8pt;
     margin-top:10px;
line-height:120%;
}
.booklink-powered-date, .kaerebalink-detail{
margin-bottom:15px;
}
.booklink-link2, .kaerebalink-link1{
margin-top:20px;
}
.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkkakakucom, .shoplinkseven, .shoplinkrakukobo{
width:99%;
text-align:center;
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 auto;
padding:10px 0px;
}
.shoplinkamazon:hover, .shoplinkrakuten:hover, .shoplinkkindle:hover, .shoplinkyahoo:hover, .shoplinkseven:hover, shoplinkrakukobo:hover{
background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
background-color:#f6f6f6;
}
.shoplinkamazon:active, .shoplinkrakuten:active, .shoplinkkindle:active, .shoplinkyahoo:active, .shoplinkseven:active, .shoplinkrakukobo:active{
position:relative;
top:1px;
}
.shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkkindle a, .shoplinkkakakucom a, .shoplinkseven a, .shoplinkrakukobo 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:#000;
}
.shoplinkrakukobo a{
color:#2098A8;
}
.booklink-footer{
clear:left;
}
/*--------------------------------------
ヨメレバ・カエレバここまで
--------------------------------------*/

CSSカスタマイズ後の表示例

パソコンでの表示

スマートフォンでの表示

ヨメレバ・カエレバのカスタマイズ後の表示例(スマホ)

ヨメレバ・カエレバでのデザイン選択

ソースコードをコピペした後には、ヨメレバ・カエレバでのデザイン選択は、

  • amazlet風-2(cssカスタマイズ用)
  • なし

を選択してください。

ヨメレバ・カエレバでのデザイン選択する場所

おまけ:クリック率をアップさせる一工夫

最後にここまで読んで頂いた方へのお礼も兼ねて、クリック率をアップのための一工夫を紹介させて頂きます。

それはズバリ、

  • 一言コメントを書く

です。

例えばこんな感じです。
商品リンクの下に、一言コメントを追加しています。

私はこれをやるようになってからクリック数が結構伸びました。

ほんの一手間掛けるだけでクリック率がアップするので、騙されたと思ってやってみてください。おすすめです!

おわりに

カエレバ・ヨメレバをSimplicityで綺麗に貼るカスタマイズ方法をご紹介させて頂きました。

ブログをやっていて、Simplicityを使っている方の助けになれば嬉しいです。

スポンサーリンク
スポンサーリンク
スポンサーリンク

こちらのボタンから簡単にシェアできます

フォローはこちらからどうぞ

この記事をお届けした
4miraiの最新ニュース情報を、
いいねしてチェックしよう!

コメント

  1. 「4mirai」管理人なぎそら様

    お世話になります。
    カエレバリンクのカスタマイズに手こずっていたところ、貴サイトにたどり着きました。

    CSSを改編して使用させていただきます。
    ていねいな説明をありがとうございます。

    「めでぃすた」管理人 にこにこイルカ

  2. tissue より:

    初めまして、tissueと申します。
    シンプリシティーのカスタマイズで見つけました!参考にさせてもらいます。ありがとうございます。
    当方全くの初心者なんですが、ヨメレバ、カエレバにて表示の写真を気持ち大きくしたいのですが、どのようにすればよいのか?
    お伺いできますか?10%大きくしたいのです!

  3. なぎそら より:

    カスタマイズ難しいですよね、私も結構てこずりました。
    お役に立てて何よりです。

  4. なぎそら より:

    こんにちは。
    返信遅くなってすいません。

    10%とかは良く分かりませんが、サムネイル画像を拡大したいのであればカエレバでブログパーツを作成する時に設定できますよ。
    下線を引いてある場所です。