コピペで使えるカエレバリンクをシンプルにカスタマイズ！Amazon＆楽天に特化したデザイン

アフィリエイトリンクを生成する時にツールを使用するとスムーズに綺麗なデザインで作ることができます。

ここでは当サイトで使用しているカエレバリンクのカスタマイズを紹介します。

カエレバリンクと言えば様々なアフィリエイトリンクボタンを作成できますが、あえてAmazonと楽天に特化させたデザインにしています。

コピペで使えるので参考にしてみてください。

アフィリエイトリンク例

シンプルで自然に記事の中に溶け込むようにボックスの枠を使用していません。

あえて奇抜なデザインにはせずスッキリとさせボタンは最もユーザーの多いAmazonと楽天に限定しています。

スマホだと以下のようなデザインで表示されます。

カスタマイズCSS

下記をスタイルシートにコピペするとそのまま使用できます。

場所WordPress管理画面＞外観＞テーマの編集＞子テーマのスタイルシート

/* kaereba link*/
/* amazlet風(改)-1 */
.kaerebalink-box{
  text-align:left;
  padding:15px 5px 10px 5px;
  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;
}

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

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

/* 商品名の部分 */
.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 カエレバの部分 */
.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・楽天ボタン */
.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と楽天のリンク部分（ボタン内のテキスト） */
.shoplinkamazon a, .shoplinkrakuten a{
  background-color:#FF8000;  /* ボタンの背景色 */
  color:#fff;  /* 文字の色 */
  text-decoration:none;  /* アンダーライン無し */
  font-weight:bold;  /* 文字を太字に */
  display:block;  /* ボタン全体をクリックできるようにブロック要素にする */
}

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

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

.shoplinkrakuten a:hover{
  background-color:#FB7B7E;
}

/* カエレバスマートフォン表示 */
@media screen and (max-width: 599px) {
.kaerebalink-box {
  margin-top:10px;  /* カエレバ全体の上に余白 */
  margin-bottom:5px;  /* カエレバ全体の下に余白 */
  text-align:center;  /* カエレバリンク内テキストは中央寄せ */
  padding:10px 5px 0px 5px; /* 全体的な余白 */
}

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



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

}

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

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

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

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

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

  
/* カエレバの商品画像部分 */
.kaerebalink-image {
  width: 50%; /* ここは必要に応じて変更 */ 
  margin:0 15px -10px 0;
  height: ;
  float:;  /* 画像の左寄せを解除 */
}

  
/* ショップリンクボタン（Amazonと楽天） */
.shoplinkamazon, .shoplinkrakuten {
  width:90%; /* ボタンの幅を横幅の90%に */
  display : block;  /* 横並びだったボタンを縦に並べる */
  padding : 0;  /* 余計な余白を削除 */
  margin-bottom: 5px; /* ボタンとボタンの間の余白 */
}
}

更にカスタマイズする場合はCSSに入れ込んでいる説明文を目安に変更しましょう。

例えば、外枠を追加したい場合は73列目の「カエレバ枠線」を変更します。

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

↑となっているので

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

↑このように1pxを追加して線を表示させます。

amazlet風(改)-1を選択する

必ず、カエレバでリンクを生成する時にデザインの部分を「amazlet風(改)-1」を選択してください。他のデザインを選択すると、正常に表示されない可能性があります。