Amazonや楽天、Yahoo！ショップの商品を紹介するなら「カエレバ」でしょう。
複数のショップを同時に紹介できるので「カエレバ」を断然オススメします。
今回は、アフィリエイトをされている方で、これからカエレバを使ってみたいと思われている方のために、カエレバをカッコよく紹介できるようにCSSのカスタマイズ方法を解説します。
参考 3分でできる「もしもアフィリエイト」無料登録方法！Amazonや楽天の商品を紹介して副業で稼ぐ
カエレバデザイン見本
今回は、以下のデザインにする方法を紹介します。
この記事の通りにすると、以下のデザインでカエレバ商品を紹介できます。
カエレバCSSのカスタマイズ
カエレバの紹介デザインをレスポンシブ対応でCSSをカスタマイズしていきます。
コピペで簡単にカスタマイズできますので参考にしてください。
WordPressのテーマの編集
まずは、CSSのカスタマイズなのでWordPressのダッシュボードから
ダッシュボード 外観 テーマの編集 へ進みます。
お使いのテーマの「子テーマ」を選んでください。子テーマを使う理由は以下を参考にしてください。
参考 LION MEDIAカスタマイズ！ 子テーマの活用
僕は「LION MEDIA」を使っていますので「LION MEDIA Child」を選んできます。
上記、図の「下記ユーザーカスタマイズエリア」の下にCSSを書いていきます。
上の図でいくと20行目以降になります。
カエレバ用CSSのコピペ
カエレバ用のCSSは以下をコピペするだけで見本のデザインにすることができます。
少し長いCSSですが頑張ってコピペしてください。
- CSSを見るには右の をクリック
.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や楽天の商品を紹介しましょう。
