カエレバのCSSをカスタマイズ！コピペでＯＫ(レスポンシブ対応)-Amazon・楽天商品・アフィリエイト

Amazonや楽天、Yahoo！ショップの商品を紹介するなら「カエレバ」でしょう。

複数のショップを同時に紹介できるので「カエレバ」を断然オススメします。

今回は、アフィリエイトをされている方で、これからカエレバを使ってみたいと思われている方のために、カエレバをカッコよく紹介できるようにCSSのカスタマイズ方法を解説します。

参考　3分でできる「もしもアフィリエイト」無料登録方法！Amazonや楽天の商品を紹介して副業で稼ぐ

カエレバデザイン見本

今回は、以下のデザインにする方法を紹介します。

この記事の通りにすると、以下のデザインでカエレバ商品を紹介できます。

カエレバCSSのカスタマイズ

カエレバの紹介デザインをレスポンシブ対応でCSSをカスタマイズしていきます。

コピペで簡単にカスタマイズできますので参考にしてください。

WordPressのテーマの編集

まずは、CSSのカスタマイズなのでWordPressのダッシュボードから

ダッシュボード　　外観　　テーマの編集　へ進みます。

お使いのテーマの「子テーマ」を選んでください。子テーマを使う理由は以下を参考にしてください。

参考　LION MEDIAカスタマイズ！ 子テーマの活用

僕は「LION MEDIA」を使っていますので「LION MEDIA Child」を選んできます。

上記、図の「下記ユーザーカスタマイズエリア」の下にCSSを書いていきます。

上の図でいくと20行目以降になります。

カエレバ用CSSのコピペ

カエレバ用のCSSは以下をコピペするだけで見本のデザインにすることができます。

少し長いCSSですが頑張ってコピペしてください。

　CSSを見るには右の　　をクリック

/*------------------------------------*/
/*カエレバボタン編集 PC版 開始*/
/*------------------------------------*/

.cstmreba{
	border: 1px solid #bbb;
	width:90%;
	padding:20px;
	margin:20px auto;
	box-shadow:0 2px 5px #999;
  color:#3d3c3c;
}
.kaerebalink-image,
.booklink-image{
	float:left;
}
.kaerebalink-image img,
.booklink-image img{
	max-height:150px;
}
.kaerebalink-info,
.booklink-info{
	overflow:hidden;
	padding-left:20px;
}
.kaerebalink-name{
	margin-bottom:10px;
}
.kaerebalink-name a{
  font-weight: bold;
  color: #494949;
  text-decoration: none;
}
.kaerebalink-name a:link{
  color: #494949;
  text-decoration: none;
}
.kaerebalink-name a:visited{
  color: #494949;
  text-decoration: none;
}
.kaerebalink-name a:hover{
  color: #c6c6c6;
  text-decoration: none;
}

.kaerebalink-powered-date,
.booklink-powered-date,
.kaerebalink-detail,
.booklink-detail{
	font-size:12px;
}

.shoplinkamazon,
.shoplinkrakuten,
.shoplinkseven,
.shoplinkrakukobo,
.shoplinkkindle,
.shoplinkkakakucom,
.shoplinktoshokan{
	float:left;
	width:47%;
	margin-left:5px;
	margin-bottom:8px;
	text-align:center;
}

.shoplinkamazon a,
.shoplinkrakuten a,
.shoplinkseven a,
.shoplinkrakukobo a,
.shoplinkkindle a,
.shoplinkkakakucom a,
.shoplinktoshokan a{
	display: block;
	padding:10px 2px;
	font-size:15px;
	color:#fff !important;
	font-weight:bold;
	line-height:15px;
	border-radius: 4px;
	box-shadow:0 2px 5px #999;
	color:#fff;
	text-decoration: none;
}

.shoplinkamazon a{
	background-color:#fe9909;
	border: 2px solid #fe9909 !important;

}
.shoplinkrakuten a,
.shoplinkrakukobo a{
	background-color:#bf0000;
	border: 2px solid #bf0000 !important;

}
.shoplinkseven a{
	background-color:#7b0099;
	border: 2px solid #7b0099 !important;

}
.shoplinkkindle a{
	background-color:#2e90cc;
	border: 2px solid #2e90cc !important;

}
.shoplinkkakakucom a{
	background-color:#ff7426;
	border: 2px solid #ff7426 !important;

}
.shoplinktoshokan a{
	background-color:#262626;
	border: 2px solid #262626 !important;

}
.shoplinkamazon,
.shoplinkrakuten,
.shoplinkseven,
.shoplinkrakukobo,
.shoplinkkindle,
.shoplinkkakakucom,
.shoplinktoshokan,
.shoplinkyahoo a{
	float:left;
	width:45%;
	margin-left:5px;
	margin-bottom:8px;
	text-align:center;
}

.shoplinkamazon a,
.shoplinkrakuten a,
.shoplinkseven a,
.shoplinkrakukobo a,
.shoplinkkindle a,
.shoplinkkakakucom a,
.shoplinktoshokan a,
.shoplinkyahoo a{
	display: block;
	padding:10px 2px;
	font-size:15px;
	color:#fff !important;
	font-weight:bold;
	line-height:15px;
	border-radius: 4px;
	box-shadow:0 2px 5px #999;
	color:#fff;
	text-decoration: none;
}

.shoplinkamazon a{
	background-color:#fe9909;
	border: 2px solid #fe9909 !important;

}
.shoplinkrakuten a,
.shoplinkrakukobo a{
	background-color:#bf0000;
	border: 2px solid #bf0000 !important;

}
.shoplinkseven a{
	background-color:#7b0099;
	border: 2px solid #7b0099 !important;

}
.shoplinkkindle a{
	background-color:#2e90cc;
	border: 2px solid #2e90cc !important;

}
.shoplinkkakakucom a{
	background-color:#ff7426;
	border: 2px solid #ff7426 !important;

}
.shoplinktoshokan a{
	background-color:#262626;
	border: 2px solid #262626 !important;

}
.shoplinkyahoo a{
	background-color:#ed6a68;
	border: 2px solid #ed6a68 !important;

}
.shoplinkamazon a:hover,
.shoplinkrakuten a:hover,
.shoplinkseven a:hover,
.shoplinkrakukobo a:hover,
.shoplinkkindle a:hover,
.shoplinkkakakucom a:hover,
.shoplinktoshokan a:hover,
.shoplinkyahoo a:hover{
	background:#fff;
}
.shoplinkamazon a:hover{
	color:#fe9909 !important;
}
.shoplinkkindle a:hover{
	color:#2e90cc !important;
}
.shoplinkrakuten a:hover,
.shoplinkrakukobo a:hover{
	color:#bf0000 !important;
}
.shoplinkseven a:hover{
	color:#7b0099 !important;
}

.shoplinkkakakucom a:hover{
	color:#ff7426 !important;
}
.shoplinktoshokan a:hover{
	color:#262626 !important;
}
.shoplinkyahoo a:hover{
	color:#ed6a68 !important;
}

/*カエレバボタン編集 スマホ版*/
@media screen and (max-width: 480px) {
.cstmreba{
	width:95%;
	margin:30px auto;
	padding:10px;
}
.booklink-image,
.kaerebalink-image{
          float:none;
          margin:0 auto 10px;
          width:50%;
}
.kaerebalink-powered-date,
.booklink-powered-date{
         text-align:center;
}
.booklink-detail,
.kaerebalink-detail{
         text-align:center;
         margin-bottom:20px;
}
.shoplinkamazon,
.shoplinkrakuten,
.shoplinkseven,
.shoplinkrakukobo,
.shoplinkkindle,
.shoplinkkakakucom,
.shoplinktoshokan,
.shoplinkyahoo a{
         float:none;
         width:90%;
}
.dbox1 {
    background: #FFF;
    padding: 10px;
    overflow: hidden;
    border: solid 1px #5fc2f5;
}
.dbox1_image {
	float:none;
	text-align:center;
    margin-right: 10px;
}
}
/*------------------------------------*/
/*カエレバボタン設定 終了*/
/*------------------------------------*/

最後に「ファイルの更新」ボタンを押して完了です。

まとめ

カエレバのデフォルトデザインは少しカッコ悪いですよね。

カエレバをCSSでカスタマイズしてカッコよくAmazonや楽天の商品を紹介しましょう。

参考　もしもアフィリエイトの「かんたんリンク」でAmazonや楽天の商品販売の方法