カエレバのカスタマイズ方法まとめ

前回はAmazonや楽天等物販のアフィリエイトに非常に便利なツール「カエレバ」の基本的な使い方を紹介したので今回は「カエレバ」のカスタマイズ方法を解説していきます。

カエレバのカスタマイズについては探せば色々なサイトで紹介されていてコピペでカスタマイズ完了なんてサイトがあって非常に便利です。ただ、私個人的にはコピペするよりも仕組みを知って少しでも知識を身につけたいというタイプなのでカスタマイズの解説付きでのんびり書いてみたいと思います。

おすすめのASP

⇒もしもアフィリエイトの登録や使い方

1 カエレバのカスタマイズの手順
2 ショップリンクをボタン化
- 2.1 スマートフォンページ用のCSSを追加

カエレバのカスタマイズの手順

今回はカエレバの背景色やリンクの色、文字の色、ショップリンクをボタン化というようなカスタマイズをしていきます。ある程度自分でデザインできるようにコメントを入れながら１つ１つ解説していきますね。

基本的なCSSを追加しておく

カエレバのリンク作成画面「デザイン」の部分で「amazlet風-2(CSSカスタマイズ用)」というのを選んでリンクを作成していく訳なんですが、この「amazlet風-2(CSSカスタマイズ用)」を選択すると他のデザインと違ってほとんどCSSの記述がないリンクコードができます。

ほとんどCSS記述のない状態からCSSを書いて行くのは結構面倒だし大変。という訳でCSSがある程度付属しているデザインのCSS部分だけを抜き出して変更したい部分だけを変更したらよくない？という結論になりました。

という訳なのでとりあえずある程度CSSが付属しているデザイン「amazlet風(改)-1」というデザインのCSSを抜き出してみる事にしました。

↑このデザインのCSSをまずは抜き出しますので、ブログのスタイルシート（CSS）の一番下にでも追加しておいて下さい。

/* amazlet風(改)-1 */
.kaerebalink-box{
  text-align:left;
  padding-bottom:20px;
  font-size:small;
  /zoom: 1;
  overflow: hidden;
}

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

.kaerebalink-info{
  line-height:120%;
  /zoom: 1;
  overflow: hidden;
}

.kaerebalink-name{
  margin-bottom:10px;
  line-height:120%;
}

.kaerebalink-powered-date{
  font-size:8pt;
  margin-top:5px;
  font-family:verdana;
  line-height:120%;
}

.kaerebalink-kakaku{
  color:.990000;
  font-weight:bold;
}

.kaerebalink-cart{
  margin:10px 0;
  width:100px;
  height:25px;
}

.kaerebalink-detail{
  margin-bottom:5px;
}

.booklink-footer{
  clear: left;
}

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

/* この部分はショップのリンク部分 */
.shoplinkamazon,
.shoplinkrakuten,
.shoplinkyahoo,
.shoplinkyahooAuc,
.shoplinkseven,
.shoplinkbellemaison,
.shoplinkcecile,
.shoplinkkakakucom{
  display:inline;
  margin-right:5px;
}

こんな感じ。このCSSを追加しておいて必要な部分だけを変更していけば良い訳です。

さて、CSSの記述に関しては下に書いた物（後から書いた物）が優先されます。つまり同じ記述が２つあっても後から書いた物が優先されるので、上記コードをCSSに貼り付けてその下（後）に変更したい部分のCSSをどんどん追加して行く方が慣れていない人にはやりやすいと思います。

そのためまずは基本となるCSSを記述しておき、変更する部分を追加していきましょう。

カエレバ全体の背景色の変更と枠線

カエレバのリンク全体の背景色は自分のサイトのカラーに合わせて変更する事もできます。分かりやすいようにグレーにしてみました。グレーになっているこの部分です。

この部分の背景色を変更するには次のコードをCSSに追加してカラーを変更しておきましょう。

/* カエレバ背景色 */
.kaerebalink-box{background-color:#fff;}

また、このカエレバのリンクの外側に枠線を付けたい場合には次の記述もできます。

/* カエレバ枠線 */
.kaerebalink-box{border:1px solid #000;}

border:枠線
1px：これが枠線の太さ
#000:ここが枠線の色

となりますので、好きな数値やカラーに変更して下さい。

テキスト部分をカスタマイズ

商品画像の部分で変更する部分ってほとんどないので、リンクの「テキスト部分」をカスタマイズしてみましょう。このカエレバのテキスト部分は３つの部分に分解できます。それぞれにクラス名が付けてあります。

商品名（posted with カエレバも含む)「.kaerebalink-name」
posted with カエレバ「.kaerebalink-powered-date」
商品詳細「.kaerebalink-detail」

それぞれに名前がついているのでこのようにカスタマイズが可能です。

/* 商品名の部分 */
.kaerebalink-name{
  font-size:15px;  /* 文字の大きさ */
  font-weight:bold;  /* 文字を太字に */
}

/* 商品名の部分（リンク） */
.kaerebalink-name a{
  color:#0066cc;  /* リンクの色 */
  text-decoration:none;  /* アンダーライン無し */
}

/* 訪問済みのリンクの色 */
.kaerebalink-name a:visited {
  color: #9f9f9f;
}

/* カーソルが乗った時 */
.kaerebalink-name a:hover{
  color:#7a8285;  /* カーソルが乗った時のリンクの色 */
  text-decoration:underline;  /* リンクにアンダーライン */　　
}

最後の「 } 」までスクロールしてコピペ下さい。この商品名の部分は「posted with カエレバ」の部分も含む領域ですが「posted with カエレバ」部分は個別にカスタマイズする必要があります。商品名と同じような文字の大きさや色にするのであればこのように追加。

/* posted with カエレバの部分 */
.kaerebalink-powered-date{
  font-size:15px;  /* 文字の大きさ */
  font-weight:bold;  /* 文字を太字に */
}

/* リンク部分 */
.kaerebalink-powered-date a{
  color:#0066cc;  /* リンクの色 */
  text-decoration:none;  /* アンダーライン無し */
}

/* 訪問済みのリンクの色 */
.kaerebalink-powered-date a:visited {
  color: #9f9f9f;
}

/* カーソルが乗った時 */
.kaerebalink-powered-date a:hover{
  color:#7a8285;  /* カーソルが乗った時のリンクの色 */
  text-decoration:underline;  /* リンクにアンダーライン */　　
}

これも最後の「 } 」までスクロールしてコピペ。テキスト部分の３番目「商品の詳細部分」も文字の大きさや色を合わせておきましょう。この部分はリンクではないので簡単に。お好みで調整して下さいね。

/* 商品詳細部分 */
.kaerebalink-detail {
  color: #000;  /* 文字の色 */
  font-size: 15px;  /* 文字の大きさ */
  font-weight: bold;   /* 文字を太字に */
}

以上でテキスト部分は終了。続いてショップリンクの部分をボタン化してみましょうか。

ショップリンクをボタン化

ショップ部分には「Amazon」「楽天」以外にも「Yahoo!ショッピング」とか他にも色々ありますが、やり方は同じなので「Amazon」と「楽天」を基準に解説してみます。

ショップ部分をボタン化するとこんな感じになります。

こんな感じにボタン化するには「外枠の線」を付けて「背景色」を付けて「ボタンの幅」を決めるという感じでやっていくとボタンになります。それから位置調整の記述もしていくことになります。

ちなみに各ショップのリンク部分はこのようにクラス名が付けられています。

Amazon「.shoplinkamazon」
楽天「.shoplinkrakuten」
Yahoo!ショッピング「.shoplinkyahoo」
ヤフオク「.shoplinkyahooAuc」
7net「.shoplinkseven」
ベルメゾン「.shoplinkbellemaison」
セシール「.shoplinkcecile」
価格コム「.shoplinkkakakucom」

とりあえず「Amazon」と「楽天」の2つを利用すると仮定してCSSを書いてみましょう。他のショップも同じように書けます。

/* Amazonと楽天のボタン */
.shoplinkamazon, .shoplinkrakuten {
  text-align:center;  /* 文字をボタンの中央に */
  margin-right: 10px; /* ボタンとボタンの間の余白 */
  float: left;  /* ボタンを横並びに */
  width: 45%;  /* ボタンの幅 */
}

.kaerebalink-link1 a {
  display: block;
  height: 40px;  /* ボタンの高さ */
  line-height: 40px;  /* ここはボタンの高さと同じ数値に */
  border-radius:5px;  /* ボタンの角をちょっと丸く */
  -moz-border-radius:5px;  /* ボタンの角をちょっと丸く(Firefox向け) */
  -webkit-border-radius:5px;  /* ボタンの角をちょっと丸く(Google Chrome、Safari向け) */
}

/* ボタン上に余白 */
.kaerebalink-link1 {
  margin-top: 15px;
}

/* 左寄せを後から解除するための記述 */
.kaerebalink-link1:after {
  content:"";
  display:block;
  clear:both;
}

それからショップのリンク（Amazonとか楽天とかの文字）部分ね。アンダーライン消したり文字色を変えたり。

/* Amazonと楽天のリンク部分（ボタン内のテキスト） */
.shoplinkamazon a, .shoplinkrakuten a{
  background-color:#1F5E73;  /* ボタンの背景色 */
  color:#fff;  /* 文字の色 */
  text-decoration:none;  /* アンダーライン無し */
  font-weight:bold;  /* 文字を太字に */
  display:block;  /* ボタン全体をクリックできるようにブロック要素にする */
}

これAmazon「.shoplinkamazon」と楽天「.shoplinkrakuten」一緒に書いていますが、もちろん別々に書くこともできますので、それぞれフォントの色や背景色を変更したい場合には別々にしてCSSを書いてもOK。

それと他のショップリンクも全部同じデザインのボタンでいいなら上記全てのクラス名（Yahoo!ショッピングとか７ネットとか）も「 , 」で区切って全てのクラス名を追加してもOKです。

ここのボタンで設定する「width」でボタンの横幅が決まります。ここの数値を大きくしすぎるとボタンが入らなくて下に「カラム落ち(下に落ちちゃう)」するので注意。それとボタンを横に３つ並べたい場合等にはこの「width」を30%くらいで良いと思います。

こんな風に３つ並びます。

この横幅に関しては確認しながら調整しておく事をおすすめします。

あ、それからボタンにカーソルが乗った時に色を変えたりもできるのでついでに追加しておきましょう。

.shoplinkamazon a:hover, .shoplinkrakuten a:hover{
  background-color:#7a8285;
}

という感じで一応PCページの表示はこれで大体できてきましたが、これで終わりではないのです。今度はスマートフォン用のCSS調整が必要です。

ちなみにWordPressなどのレスポンシブデザイン以外のブログ、例えば無料ブログなどはPCとスマートフォンのCSSが別になっているので、スマートフォン版のCSSにも同じ記述が必要なので注意。

スマートフォンページ用のCSSを追加

スマートフォンは画面の横幅が狭いのでPCページでのカエレバのように画像を左に寄せてしまうとちょっと厳しいです。こんな感じになってしまいます。

という訳なのでスマートフォン表示では「画像の左寄せ」を解除してボタンも1列に１つずつに調整してこんな感じにしてみました。

それではスマートフォン用のCSSを追加していきましょう。まず必要になるのは次の記述（WordPressの場合）。

@media screen and (max-width: 599px) {
 
/* この間にCSSを書いていく */
 
 }

これは簡単に説明すると「ブラウザのサイズが599px以下の場合には」という条件分岐ですね。この条件分岐の中にスマートフォン用のCSSを書いていけばいいという訳です。代表的な7インチのタブレットのブラウザサイズが600pxなのでそれより小さい599px以下という条件分岐にしておきました。

無料ブログなどの場合はスマートフォン版のCSSが別になっている場合が多いので、条件分岐の部分の中身だけスマートフォン版のCSSに追加。WordPressの場合はそのまま普通のCSSに追加でOK。

/* カエレバスマートフォン表示 */
@media screen and (max-width: 599px) {
.kaerebalink-box {
  margin-top:10px;  /* カエレバ全体の上に余白 */
  margin-bottom:10px;  /* カエレバ全体の下に余白 */
  text-align:center;  /* カエレバリンク内テキストは中央寄せ */
  padding:10px;  /* 全体的な余白 */
}
 
/* カエレバの商品画像部分 */
.kaerebalink-image {
  float:none;  /* 画像の左寄せを解除 */
}
 
/* ショップリンクボタン（Amazonと楽天） */
.shoplinkamazon, .shoplinkrakuten {
  width:90%; /* ボタンの幅を横幅の90%に */
  display : block;  /* 横並びだったボタンを縦に並べる */
  padding : 0;  /* 余計な余白を削除 */
  margin-bottom: 10px; /* ボタンとボタンの間の余白 */
}
}

これも最後の「 } 」までスクロールしてコピペ。最後に「 } 」が２つあるので忘れずに。

という訳で一応スマートフォンのCSSも完成。後はお好みで微調整をしながらPCとスマートフォン両方の表示を確認をしておきましょう。

それから念のため再度確認しておきますが、このカスタマイズを適応させるにはカエレバのデザインで「amazlet風-2(CSSカスタマイズ用)」を選択して「更新」ボタンクリックしてリンクを作成する事をお忘れなく。

以上でカエレバのカスタマイズは終了です。

サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

【無料】キーワード選定に特化した無料教材＆動画「キーワード無双」

【期間限定無料】一億円ブロガーの電子書籍「自由な人生を手に入れる教科書」

ブログの更新はこちらから