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

portrait-787522_640

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

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

スポンサーリンク

ヨメレバ・カエレバとは

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

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

公式サイトはこちら

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

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

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

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

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

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

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

公式サイトはこちら

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

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

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

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

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

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

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

ヨメレバ・カエレバとは

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

です。

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

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

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

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

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

20160123-kaereba-sample-00

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

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

カスタマイズ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;
	margin:0 15px 20px 0;
	float:left;
}
.booklink-image img, .kaerebalink-image img{
	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{
	float:left;
	width:30%;
	margin:15px 1% 0 auto;
	padding:10px 0px;
	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;
	text-align:center;
	}
	
.shoplinkamazon:hover, .shoplinkrakuten:hover, .shoplinkkindle:hover, .shoplinkyahoo:hover{
	background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
	background-color:#f6f6f6;
}

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

.shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkkindle a, .shoplinkkakakucom 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;
 } 

.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{
    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{
	background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
	background-color:#f6f6f6;
}

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

.shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkkindle a, .shoplinkkakakucom 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;
 } 

.booklink-footer{
	clear:left;
}
/*--------------------------------------
  ヨメレバ・カエレバここまで
--------------------------------------*/

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

パソコンでの表示

スマートフォンでの表示

20160123-kaereba-sample-01

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

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

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

を選択してください。

20160123-kaereba-sample-02

参考サイト様

カスタマイズをする際に参考にさせて頂いたサイト様をご紹介させて頂きます。

おわりに

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

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

コメント

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

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

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

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

  2. tissue より:

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

  3. なぎそら より:

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

  4. なぎそら より:

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

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