カエレバ・ヨメレバを女性向けのかわいいデザインにCSSカスタマイズ

投稿日：2018年1月23日更新日：2018年6月19日

記事内でおすすめの商品や書籍を紹介するときには、Amazonや楽天、Yahooショッピングなど、複数の商品リンクをひとまとめにすることができるブログパーツ「カエレバ・ヨメレバ」がとても便利。
カエレバは商品の紹介用、ヨメレバは書籍の紹介用に使い分けることができます。
利用されている方も多いですよね。

当ブログでも導入を検討中に、お世話になっている方からタイムリーなご質問を受けたことをきっかけに、CSSカスタマイズに挑戦してみることにしました。

ここでは、コピーペーストだけで「カエレバ・ヨメレバ」のカスタマイズができるCSSコードを3種のカラーパターン別にご紹介します。
デザインは当ブログの見出しに合わせてステッチ風のラインを入れました。

カエレバピンクVer（Amazon・楽天・Yahooショッピング対応）

ロイヤルガストロ動物さんスイーツセット合計5個お家のギフトボックス

posted with カエレバ

ロイヤルガストロ

Amazon

楽天市場

Yahooショッピング

ヨメレバピンクVer（Amazon・Kindle・楽天ブックス対応）

まずは、書いてみる [時間][アイデア][やりたいこと]がどんどん湧き出すメモの習慣

posted with ヨメレバ

藍玉 KADOKAWA 2017-01-12

Amazon

Kindle

楽天ブックス

表示確認

上記は、実際に動作する「カエレバ・ヨメレバ」です。
Google Chromeで「F12」キーを押すとパソコンからスマホやタブレット各端末での表示確認ができます。（切り替え後は「F5」キーでリロードしてください）

Kanami

偶然見つけたかわいいスイーツと大切なお友達が出版されているおすすめ書籍をご紹介しています♪

カエレバ・ヨメレバグリーンVer

カエレバ・ヨメレバパープルVer

Kanami

賑やかすぎて主張が強いなぁ。と感じる場合は、ボックス全体の背景色を白（#fff）にすることで比較的シンプルな表示に。ステッチ風のラインを消したり、ご自身のサイトに合わせたお好きなカラーで自由自在にカスタマイズすることも可能です。

Kanami

カラーのチョイスに迷ったときは、ブラウザ上のカラーコードを簡単に知ることができるカラーピッカーが便利ですよ。

1,977view

: WordPressカスタマイズに役立つ2大アイテム！おすすめカラーピッカーと「ピクセル定規」

WordPressのカスタマイズをしていると、「ここは何ピクセル位かな？」とか、「この部分と同じ色を他の部分でも使いたいなぁ」と思うことがありませんか？ここでは、私が長年愛用している2大アイテム！（ ...

Contents

1 カエレバ・ヨメレバのコード取得の際の注意事項
2 カラーカスタマイズ用CSSコード解説
3 コピーペースト用「カエレバ・ヨメレバピンクVer」
4 コピーペースト用「カエレバ・ヨメレバグリーンVer」
5 コピーペースト用「カエレバ・ヨメレバパープルVer」

カエレバ・ヨメレバのコード取得の際の注意事項

これからご紹介するCSSコードは、カエレバ・ヨメレバのブログパーツ生成画面のデザインを「amazlet風(改)-1」に設定して生成されるコードに対応しています。

その他のコードの場合は表示が崩れますのでご注意ください。

設定項目の「rel=なし」「rel=nofollow」は任意で設定されてください。
こちらのページが参考になります。
参考カエレバの「rel=nofollow」の意味と解説/雑記ブログ卒業

カラーカスタマイズ用CSSコード解説

「カスタマイズコードをコピペしただけでは、どのようなカスタマイズを行っているのかわかりにくい」「どんな風にコードを書いているのか知りたい」といったお声を耳にすることがあります。

カラー別にご紹介する「カエレバ・ヨメレバ」の各コードは全て応用できますので、こちらでは「カエレバピンクVer」のコードのみ細切れの解説つきで掲載していきます。

「解説はいらないよ～」という方は、こちらに一括でコピーできるコードを掲載していますのでお使いになってください。

ポイント

コードを追加する場所は、WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」（子テーマ）の最下部です。
各項目ごとにコピーペースト→更新→カエレバを表示している画面を「F5」キーでリロードしていくと、どの部分のCSSコードがどんな風に反映されているかの確認ができます。
カラーコード（#******）の変更が可能な部分は全て/**/で囲んだコメントを入れてあります。

Kanami

変更が反映されない場合はブラウザのキャッシュをクリアしてから「F5キー」で再度確認してみてくださいね。

ボックス全体

カエレバのボックス全体のスタイルを指定するコードです。

/*-----カエレバカスタマイズここから-----*/
/*ボックス全体*/
.kaerebalink-box {
  background-color:#fff1f5;/*背景色*/
  padding:20px 20px 10px !important; 
  margin-bottom:40px;
  border:2px dashed #d8b1ff; /*ステッチ風ボーダー色*/
  border-radius:5px;
  box-shadow:0 0 0 4px #fff1f5, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); /*ボーダーの周りの影（背景色と同じコード）*/
}

/*-----カエレバカスタマイズここから-----*/

/*ボックス全体*/

.kaerebalink-box {

background-color:#fff1f5;/*背景色*/

padding:20px 20px 10px !important;

margin-bottom:40px;

border:2px dashed #d8b1ff; /*ステッチ風ボーダー色*/

border-radius:5px;

box-shadow:0 0 0 4px #fff1f5, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); /*ボーダーの周りの影（背景色と同じコード）*/

}

背景色を#fff1f5に指定変更可
内側の余白を上20px、左右20px、下10pxに指定
外側の下の余白を40pxに指定
ステッチ風ボーダーを太さ2px、カラー#d8b1ffに指定変更可
ボックスの角丸を5pxに指定
ボーダーの周りの影を#fff1f5（背景色と同じコード）に指定変更可

商品名

右上商品名のスタイルを指定するコードです。

/*商品名*/
.kaerebalink-name a {
  font-size:16px;
  line-height:22px;
  font-weight:bold;
}

/*商品名*/

.kaerebalink-name a {

font-size:16px;

line-height:22px;

font-weight:bold;

}

文字サイズを16pxに指定
行の高さを22pxに指定
文字を太字に

クレジット表記部分

商品名の下のカエレバのクレジット表記部分のスタイルを指定するコードです。

/*クレジット表記部分*/
.kaerebalink-powered-date a {
  font-size:8px;
}

/*クレジット表記部分*/

.kaerebalink-powered-date a {

font-size:8px;

}

リンク部分の文字サイズを8pxに指定

Amazonボタン

Amazonのリンクボタンのスタイルを指定するコードです。
マウスホバー時は、AFFINGER4の記事下にあるデフォルトのソーシャルボタンと同じように動作するようにしました。

/*Amazonボタン*/
.shoplinkamazon a {
  width:31%;
  font-size:16px;
  font-weight:bold;
  text-decoration:none;
  display:inline-block;
  text-align:center;
  padding:10px 0;
  margin-bottom:5px;
  color:#fff; /*ボタンテキスト色*/
  background-color:#d8b1ff; /*ボタン背景色*/
  box-shadow: 0 3px 0 #bf7eff; /*ボタンの影（背景色よりも暗い色)*/
  border-radius:5px;
}
/*マウスホバー時*/	
.shoplinkamazon a:hover {
  transform: translate(0px, 1px);
  box-shadow: 0 2px 0 #bf7eff; /*ボタンの影と同じ色*/
}

/*Amazonボタン*/

.shoplinkamazon a {

width:31%;

font-size:16px;

font-weight:bold;

text-decoration:none;

display:inline-block;

text-align:center;

padding:10px 0;

margin-bottom:5px;

color:#fff; /*ボタンテキスト色*/

background-color:#d8b1ff; /*ボタン背景色*/

box-shadow: 0 3px 0 #bf7eff; /*ボタンの影（背景色よりも暗い色)*/

border-radius:5px;

}

/*マウスホバー時*/

.shoplinkamazon a:hover {

transform: translate(0px, 1px);

box-shadow: 0 2px 0 #bf7eff; /*ボタンの影と同じ色*/

}

ボタンの幅を31%に指定
文字サイズを16pxに指定
文字を太字に
リンク文字の下線を非表示に
余白入りで要素を横並びにするコード（inline-block）
文字を中央寄せに
内側の余白を上下10px、左右0に指定
外側の下の余白を5pxに指定
文字色（ボタンテキスト色）を#fffに指定変更可
ボタン背景色を#d8b1ffに指定変更可
ボタンの影を3pxのカラー#bf7effに指定変更可
※背景色よりも3段階暗い色がおすすめです。便利なカラーツール（「ENTER A COLOR」をクリックしてカラーコードを入力）
ボタンの角丸を5pxに指定
マウスホバー時にボタンを1px下にずらす
マウスホバー時のボタンの影を2pxのカラー#bf7eff（ボタンの影と同じコード）に指定変更可

楽天・Yahooショッピングボタン

全体のスタイルはAmazonボタンと同じですが、Yahooショッピングボタンの文字サイズのみ小さめの14pxで指定しています。

Kanami

3種それぞれのボタンカラーを変えることもできますよ♪

/*楽天ボタン*/
.shoplinkrakuten a {
  width:31%;
  font-size:16px;
  font-weight:bold;
  text-decoration:none;
  display:inline-block;
  text-align:center;
  padding:10px 0;
  margin-bottom:5px;
  color:#fff; /*ボタンテキスト色*/
  background:#d8b1ff; /*ボタン背景色*/
  box-shadow: 0 3px 0 #bf7eff; /*ボタンの影（背景色よりも暗い色)*/
  border-radius:5px;
}
/*マウスホバー時*/	
.shoplinkrakuten a:hover {
  transform: translate(0px, 1px);
  box-shadow: 0 2px 0 #bf7eff; /*ボタンの影と同じ色*/
}

/*Yahooショッピングボタン*/
.shoplinkyahoo a {
  width:31%;
  font-size:14px;
  font-weight:bold;
  text-decoration:none;
  display:inline-block;
  text-align:center;
  padding:10px 0;
  margin-bottom:5px;
  color:#fff; /*ボタンテキスト色*/
  background:#d8b1ff; /*ボタン背景色*/
  box-shadow: 0 3px 0 #bf7eff; /*ボタンの影（背景色よりも暗い色)*/
  border-radius:5px;
}
/*マウスホバー時*/	
.shoplinkyahoo a:hover {
  transform: translate(0px, 1px);
  box-shadow: 0 2px 0 #bf7eff; /*ボタンの影と同じ色*/
}

/*楽天ボタン*/

.shoplinkrakuten a {

width:31%;

font-size:16px;

font-weight:bold;

text-decoration:none;

display:inline-block;

text-align:center;

padding:10px 0;

margin-bottom:5px;

color:#fff; /*ボタンテキスト色*/

background:#d8b1ff; /*ボタン背景色*/

box-shadow: 0 3px 0 #bf7eff; /*ボタンの影（背景色よりも暗い色)*/

border-radius:5px;

}

/*マウスホバー時*/

.shoplinkrakuten a:hover {

transform: translate(0px, 1px);

box-shadow: 0 2px 0 #bf7eff; /*ボタンの影と同じ色*/

}

/*Yahooショッピングボタン*/

.shoplinkyahoo a {

width:31%;

font-size:14px;

font-weight:bold;

text-decoration:none;

display:inline-block;

text-align:center;

padding:10px 0;

margin-bottom:5px;

color:#fff; /*ボタンテキスト色*/

background:#d8b1ff; /*ボタン背景色*/

box-shadow: 0 3px 0 #bf7eff; /*ボタンの影（背景色よりも暗い色)*/

border-radius:5px;

}

/*マウスホバー時*/

.shoplinkyahoo a:hover {

transform: translate(0px, 1px);

box-shadow: 0 2px 0 #bf7eff; /*ボタンの影と同じ色*/

}

タブレット・スマホ

タブレットとスマホ表示は、このようなデザインになります。

上記デザインのスタイルが適用されるデバイス幅は最大1100pxとしています。

デベロッパーツールでの端末別の表示確認の際、iPad Proでは表示されるコンテンツ幅の関係でどうしても3つ目のボタンが落ちてしまうのでやむなくそのようにしました。

実際の端末で表示確認ができる方は、数値を変更してくださっても大丈夫です。

/*タブレット・スマホ*/
@media print, screen and (max-width:1100px) {
.kaerebalink-image {
  width:40%;
}
	
.shoplinkamazon a {
  width:100%;
}
	
.shoplinkrakuten a {
  width:100%;
}

.shoplinkyahoo a {
  width:100%;
}	
}
/*-----カエレバカスタマイズここまで-----*/

/*タブレット・スマホ*/

@media print, screen and (max-width:1100px) {

.kaerebalink-image {

width:40%;

}

.shoplinkamazon a {

width:100%;

}

.shoplinkrakuten a {

width:100%;

}

.shoplinkyahoo a {

width:100%;

}

/*-----カエレバカスタマイズここまで-----*/

商品のサムネイル画像（左側）の幅を40%に指定
Amazon、楽天、Yahooショッピング各ボタン（右下）の幅を100%に指定

コピーペースト用「カエレバ・ヨメレバピンクVer」

カエレバ

/*-----カエレバカスタマイズここから-----*/
/*ボックス全体*/
.kaerebalink-box {
  background-color:#fff1f5;/*背景色*/
  padding:20px 20px 10px !important; 
  margin-bottom:40px;
  border:2px dashed #d8b1ff; /*ステッチ風ボーダー色*/
  border-radius:5px;
  box-shadow:0 0 0 4px #fff1f5, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); /*ボーダーの周りの影（背景色と同じコード）*/
}

/*商品名*/
.kaerebalink-name a {
  font-size:16px;
  line-height:22px;
  font-weight:bold;
}

/*クレジット表記部分*/
.kaerebalink-powered-date a {
  font-size:8px;
}

/*Amazonボタン*/
.shoplinkamazon a {
  width:31%;
  font-size:16px;
  font-weight:bold;
  text-decoration:none;
  display:inline-block;
  text-align:center;
  padding:10px 0;
  margin-bottom:5px;
  color:#fff; /*ボタンテキスト色*/
  background-color:#d8b1ff; /*ボタン背景色*/
  box-shadow: 0 3px 0 #bf7eff; /*ボタンの影（背景色よりも暗い色)*/
  border-radius:5px;
}
/*マウスホバー時*/	
.shoplinkamazon a:hover {
  transform: translate(0px, 1px);
  box-shadow: 0 2px 0 #bf7eff; /*ボタンの影と同じ色*/
}

/*楽天ボタン*/
.shoplinkrakuten a {
  width:31%;
  font-size:16px;
  font-weight:bold;
  text-decoration:none;
  display:inline-block;
  text-align:center;
  padding:10px 0;
  margin-bottom:5px;
  color:#fff; /*ボタンテキスト色*/
  background:#d8b1ff; /*ボタン背景色*/
  box-shadow: 0 3px 0 #bf7eff; /*ボタンの影（背景色よりも暗い色)*/
  border-radius:5px;
}
/*マウスホバー時*/	
.shoplinkrakuten a:hover {
  transform: translate(0px, 1px);
  box-shadow: 0 2px 0 #bf7eff; /*ボタンの影と同じ色*/
}

/*Yahooショッピングボタン*/
.shoplinkyahoo a {
  width:31%;
  font-size:14px;
  font-weight:bold;
  text-decoration:none;
  display:inline-block;
  text-align:center;
  padding:10px 0;
  margin-bottom:5px;
  color:#fff; /*ボタンテキスト色*/
  background:#d8b1ff; /*ボタン背景色*/
  box-shadow: 0 3px 0 #bf7eff; /*ボタンの影（背景色よりも暗い色)*/
  border-radius:5px;
}
/*マウスホバー時*/	
.shoplinkyahoo a:hover {
  transform: translate(0px, 1px);
  box-shadow: 0 2px 0 #bf7eff; /*ボタンの影と同じ色*/
}

/*タブレット・スマホ*/
@media print, screen and (max-width:1100px) {
.kaerebalink-image {
  width:40%;
}
	
.shoplinkamazon a {
  width:100%;
}
	
.shoplinkrakuten a {
  width:100%;
}

.shoplinkyahoo a {
  width:100%;
}	
}
/*-----カエレバカスタマイズここまで-----*/

100

101

102

103

104

105

/*-----カエレバカスタマイズここから-----*/

/*ボックス全体*/

.kaerebalink-box {

background-color:#fff1f5;/*背景色*/

padding:20px 20px 10px !important;

margin-bottom:40px;

border:2px dashed #d8b1ff; /*ステッチ風ボーダー色*/

border-radius:5px;

box-shadow:0 0 0 4px #fff1f5, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); /*ボーダーの周りの影（背景色と同じコード）*/

}

/*商品名*/

.kaerebalink-name a {

font-size:16px;

line-height:22px;

font-weight:bold;

}

/*クレジット表記部分*/

.kaerebalink-powered-date a {

font-size:8px;

}

/*Amazonボタン*/

.shoplinkamazon a {

width:31%;

font-size:16px;

font-weight:bold;

text-decoration:none;

display:inline-block;

text-align:center;

padding:10px 0;

margin-bottom:5px;

color:#fff; /*ボタンテキスト色*/

background-color:#d8b1ff; /*ボタン背景色*/

box-shadow: 0 3px 0 #bf7eff; /*ボタンの影（背景色よりも暗い色)*/

border-radius:5px;

}

/*マウスホバー時*/

.shoplinkamazon a:hover {

transform: translate(0px, 1px);

box-shadow: 0 2px 0 #bf7eff; /*ボタンの影と同じ色*/

}

/*楽天ボタン*/

.shoplinkrakuten a {

width:31%;

font-size:16px;

font-weight:bold;

text-decoration:none;

display:inline-block;

text-align:center;

padding:10px 0;

margin-bottom:5px;

color:#fff; /*ボタンテキスト色*/

background:#d8b1ff; /*ボタン背景色*/

box-shadow: 0 3px 0 #bf7eff; /*ボタンの影（背景色よりも暗い色)*/

border-radius:5px;

}

/*マウスホバー時*/

.shoplinkrakuten a:hover {

transform: translate(0px, 1px);

box-shadow: 0 2px 0 #bf7eff; /*ボタンの影と同じ色*/

}

/*Yahooショッピングボタン*/

.shoplinkyahoo a {

width:31%;

font-size:14px;

font-weight:bold;

text-decoration:none;

display:inline-block;

text-align:center;

padding:10px 0;

margin-bottom:5px;

color:#fff; /*ボタンテキスト色*/

background:#d8b1ff; /*ボタン背景色*/

box-shadow: 0 3px 0 #bf7eff; /*ボタンの影（背景色よりも暗い色)*/

border-radius:5px;

}

/*マウスホバー時*/

.shoplinkyahoo a:hover {

transform: translate(0px, 1px);

box-shadow: 0 2px 0 #bf7eff; /*ボタンの影と同じ色*/

}

/*タブレット・スマホ*/

@media print, screen and (max-width:1100px) {

.kaerebalink-image {

width:40%;

}

.shoplinkamazon a {

width:100%;

}

.shoplinkrakuten a {

width:100%;

}

.shoplinkyahoo a {

width:100%;

}

/*-----カエレバカスタマイズここまで-----*/

ヨメレバ

/*-----ヨメレバカスタマイズここから-----*/
/*ボックス全体*/
.booklink-box {
  background-color:#fff1f5;/*背景色*/
  padding:20px 20px 10px !important; 
  margin-bottom:40px;
  border:2px dashed #d8b1ff; /*ステッチ風ボーダー色*/
  border-radius:5px;
  box-shadow:0 0 0 4px #fff1f5, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); /*ボーダーの周りの影（背景色と同じコード）*/
}

/*商品名*/
.booklink-name a {
  font-size:16px;
  line-height:22px;
  font-weight:bold;
}

/*クレジット表記部分*/
.booklink-powered-date a {
  font-size:8px;
}

/*Amazonボタン*/
.shoplinkamazon a {
  width:31%;
  font-size:16px;
  font-weight:bold;
  text-decoration:none;
  display:inline-block;
  text-align:center;
  padding:10px 0;
  margin-bottom:5px;
  color:#fff; /*ボタンテキスト色*/
  background-color:#d8b1ff; /*ボタン背景色*/
  box-shadow: 0 3px 0 #bf7eff; /*ボタンの影（背景色よりも暗い色)*/
  border-radius:5px;
}
/*マウスホバー時*/	
.shoplinkamazon a:hover {
  transform: translate(0px, 1px);
  box-shadow: 0 2px 0 #bf7eff; /*ボタンの影と同じ色*/
}

/*楽天ボタン*/
.shoplinkrakuten a {
  width:31%;
  font-size:16px;
  font-weight:bold;
  text-decoration:none;
  display:inline-block;
  text-align:center;
  padding:10px 0;
  margin-bottom:5px;
  color:#fff; /*ボタンテキスト色*/
  background:#d8b1ff; /*ボタン背景色*/
  box-shadow: 0 3px 0 #bf7eff; /*ボタンの影（背景色よりも暗い色)*/
  border-radius:5px;
}
/*マウスホバー時*/	
.shoplinkrakuten a:hover {
  transform: translate(0px, 1px);
  box-shadow: 0 2px 0 #bf7eff; /*ボタンの影と同じ色*/
}

/*Kindleボタン*/
.shoplinkkindle a {
  width:31%;
  font-size:16px;
  font-weight:bold;
  text-decoration:none;
  display:inline-block;
  text-align:center;
  padding:10px 0;
  margin-bottom:5px;
  color:#fff; /*ボタンテキスト色*/
  background:#d8b1ff; /*ボタン背景色*/
  box-shadow: 0 3px 0 #bf7eff; /*ボタンの影（背景色よりも暗い色)*/
  border-radius:5px;
}
/*マウスホバー時*/	
.shoplinkkindle a:hover {
  transform: translate(0px, 1px);
  box-shadow: 0 2px 0 #bf7eff; /*ボタンの影と同じ色*/
}

/*タブレット・スマホ*/
@media print, screen and (max-width:1100px) {
.kaerebalink-image {
  width:40%;
}
	
.shoplinkamazon a {
  width:100%;
}
	
.shoplinkrakuten a {
  width:100%;
}

.shoplinkkindle a {
  width:100%;
}	
}
/*-----ヨメレバカスタマイズここまで-----*/

100

101

102

103

104

105

/*-----ヨメレバカスタマイズここから-----*/

/*ボックス全体*/

.booklink-box {

background-color:#fff1f5;/*背景色*/

padding:20px 20px 10px !important;

margin-bottom:40px;

border:2px dashed #d8b1ff; /*ステッチ風ボーダー色*/

border-radius:5px;

box-shadow:0 0 0 4px #fff1f5, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); /*ボーダーの周りの影（背景色と同じコード）*/

}

/*商品名*/

.booklink-name a {

font-size:16px;

line-height:22px;

font-weight:bold;

}

/*クレジット表記部分*/

.booklink-powered-date a {

font-size:8px;

}

/*Amazonボタン*/

.shoplinkamazon a {

width:31%;

font-size:16px;

font-weight:bold;

text-decoration:none;

display:inline-block;

text-align:center;

padding:10px 0;

margin-bottom:5px;

color:#fff; /*ボタンテキスト色*/

background-color:#d8b1ff; /*ボタン背景色*/

box-shadow: 0 3px 0 #bf7eff; /*ボタンの影（背景色よりも暗い色)*/

border-radius:5px;

}

/*マウスホバー時*/

.shoplinkamazon a:hover {

transform: translate(0px, 1px);

box-shadow: 0 2px 0 #bf7eff; /*ボタンの影と同じ色*/

}

/*楽天ボタン*/

.shoplinkrakuten a {

width:31%;

font-size:16px;

font-weight:bold;

text-decoration:none;

display:inline-block;

text-align:center;

padding:10px 0;

margin-bottom:5px;

color:#fff; /*ボタンテキスト色*/

background:#d8b1ff; /*ボタン背景色*/

box-shadow: 0 3px 0 #bf7eff; /*ボタンの影（背景色よりも暗い色)*/

border-radius:5px;

}

/*マウスホバー時*/

.shoplinkrakuten a:hover {

transform: translate(0px, 1px);

box-shadow: 0 2px 0 #bf7eff; /*ボタンの影と同じ色*/

}

/*Kindleボタン*/

.shoplinkkindle a {

width:31%;

font-size:16px;

font-weight:bold;

text-decoration:none;

display:inline-block;

text-align:center;

padding:10px 0;

margin-bottom:5px;

color:#fff; /*ボタンテキスト色*/

background:#d8b1ff; /*ボタン背景色*/

box-shadow: 0 3px 0 #bf7eff; /*ボタンの影（背景色よりも暗い色)*/

border-radius:5px;

}

/*マウスホバー時*/

.shoplinkkindle a:hover {

transform: translate(0px, 1px);

box-shadow: 0 2px 0 #bf7eff; /*ボタンの影と同じ色*/

}

/*タブレット・スマホ*/

@media print, screen and (max-width:1100px) {

.kaerebalink-image {

width:40%;

}

.shoplinkamazon a {

width:100%;

}

.shoplinkrakuten a {

width:100%;

}

.shoplinkkindle a {

width:100%;

}

/*-----ヨメレバカスタマイズここまで-----*/

コピーペースト用「カエレバ・ヨメレバグリーンVer」

カエレバ

/*-----カエレバカスタマイズここから-----*/
/*ボックス全体*/
.kaerebalink-box {
  background-color:#f0fcf5;/*背景色*/
  padding:20px 20px 10px !important; 
  margin-bottom:40px;
  border:2px dashed #bdcbfc; /*ステッチ風ボーダー色*/
  border-radius:5px;
  box-shadow:0 0 0 4px #f0fcf5, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); /*ボーダーの周りの影（背景色と同じコード）*/
}

/*商品名*/
.kaerebalink-name a {
  font-size:16px;
  line-height:22px;
  font-weight:bold;
}

/*クレジット表記部分*/
.kaerebalink-powered-date a {
  font-size:8px;
}

/*Amazonボタン*/
.shoplinkamazon a {
  width:31%;
  font-size:16px;
  font-weight:bold;
  text-decoration:none;
  display:inline-block;
  text-align:center;
  padding:10px 0;
  margin-bottom:5px;
  color:#fff; /*ボタンテキスト色*/
  background-color:#bdcbfc; /*ボタン背景色*/
  box-shadow: 0 3px 0 #8ca5fa; /*ボタンの影（背景色よりも暗い色)*/
  border-radius:5px;
}
/*マウスホバー時*/
.shoplinkamazon a:hover {
  transform: translate(0px, 1px);
  box-shadow: 0 2px 0 #8ca5fa; /*ボタンの影と同じ色*/
}

/*楽天ボタン*/
.shoplinkrakuten a {
  width:31%;
  font-size:16px;
  font-weight:bold;
  text-decoration:none;
  display:inline-block;
  text-align:center;
  padding:10px 0;
  margin-bottom:5px;
  color:#fff; /*ボタンテキスト色*/
  background:#bdcbfc; /*ボタン背景色*/
  box-shadow: 0 3px 0 #8ca5fa; /*ボタンの影（背景色よりも暗い色)*/
  border-radius:5px;
}
/*マウスホバー時*/
.shoplinkrakuten a:hover {
  transform: translate(0px, 1px);
  box-shadow: 0 2px 0 #8ca5fa; /*ボタンの影と同じ色*/
}

/*Yahooショッピングボタン*/
.shoplinkyahoo a {
  width:31%;
  font-size:14px;
  font-weight:bold;
  text-decoration:none;
  display:inline-block;
  text-align:center;
  padding:10px 0;
  margin-bottom:5px;
  color:#fff; /*ボタンテキスト色*/
  background:#bdcbfc; /*ボタン背景色*/
  box-shadow: 0 3px 0 #8ca5fa; /*ボタンの影（背景色よりも暗い色)*/
  border-radius:5px;
}
/*マウスホバー時*/
.shoplinkyahoo a:hover {
  transform: translate(0px, 1px);
  box-shadow: 0 2px 0 #8ca5fa; /*ボタンの影と同じ色*/
}

/*タブレット・スマホ*/
@media print, screen and (max-width:1100px) {
.kaerebalink-image {
  width:40%;
}

.shoplinkamazon a {
  width:100%;
}

.shoplinkrakuten a {
  width:100%;
}

.shoplinkyahoo a {
  width:100%;
}
}
/*-----カエレバカスタマイズここまで-----*/

100

101

102

103

104

105

/*-----カエレバカスタマイズここから-----*/

/*ボックス全体*/

.kaerebalink-box {

background-color:#f0fcf5;/*背景色*/

padding:20px 20px 10px !important;

margin-bottom:40px;

border:2px dashed #bdcbfc; /*ステッチ風ボーダー色*/

border-radius:5px;

box-shadow:0 0 0 4px #f0fcf5, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); /*ボーダーの周りの影（背景色と同じコード）*/

}

/*商品名*/

.kaerebalink-name a {

font-size:16px;

line-height:22px;

font-weight:bold;

}

/*クレジット表記部分*/

.kaerebalink-powered-date a {

font-size:8px;

}

/*Amazonボタン*/

.shoplinkamazon a {

width:31%;

font-size:16px;

font-weight:bold;

text-decoration:none;

display:inline-block;

text-align:center;

padding:10px 0;

margin-bottom:5px;

color:#fff; /*ボタンテキスト色*/

background-color:#bdcbfc; /*ボタン背景色*/

box-shadow: 0 3px 0 #8ca5fa; /*ボタンの影（背景色よりも暗い色)*/

border-radius:5px;

}

/*マウスホバー時*/

.shoplinkamazon a:hover {

transform: translate(0px, 1px);

box-shadow: 0 2px 0 #8ca5fa; /*ボタンの影と同じ色*/

}

/*楽天ボタン*/

.shoplinkrakuten a {

width:31%;

font-size:16px;

font-weight:bold;

text-decoration:none;

display:inline-block;

text-align:center;

padding:10px 0;

margin-bottom:5px;

color:#fff; /*ボタンテキスト色*/

background:#bdcbfc; /*ボタン背景色*/

box-shadow: 0 3px 0 #8ca5fa; /*ボタンの影（背景色よりも暗い色)*/

border-radius:5px;

}

/*マウスホバー時*/

.shoplinkrakuten a:hover {

transform: translate(0px, 1px);

box-shadow: 0 2px 0 #8ca5fa; /*ボタンの影と同じ色*/

}

/*Yahooショッピングボタン*/

.shoplinkyahoo a {

width:31%;

font-size:14px;

font-weight:bold;

text-decoration:none;

display:inline-block;

text-align:center;

padding:10px 0;

margin-bottom:5px;

color:#fff; /*ボタンテキスト色*/

background:#bdcbfc; /*ボタン背景色*/

box-shadow: 0 3px 0 #8ca5fa; /*ボタンの影（背景色よりも暗い色)*/

border-radius:5px;

}

/*マウスホバー時*/

.shoplinkyahoo a:hover {

transform: translate(0px, 1px);

box-shadow: 0 2px 0 #8ca5fa; /*ボタンの影と同じ色*/

}

/*タブレット・スマホ*/

@media print, screen and (max-width:1100px) {

.kaerebalink-image {

width:40%;

}

.shoplinkamazon a {

width:100%;

}

.shoplinkrakuten a {

width:100%;

}

.shoplinkyahoo a {

width:100%;

}

/*-----カエレバカスタマイズここまで-----*/

ヨメレバ

/*-----ヨメレバカスタマイズここから-----*/
/*ボックス全体*/
.booklink-box {
  background-color:#f0fcf5;/*背景色*/
  padding:20px 20px 10px !important; 
  margin-bottom:40px;
  border:2px dashed #bdcbfc; /*ステッチ風ボーダー色*/
  border-radius:5px;
  box-shadow:0 0 0 4px #f0fcf5, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); /*ボーダーの周りの影（背景色と同じコード）*/
}

/*商品名*/
.booklink-name a {
  font-size:16px;
  line-height:22px;
  font-weight:bold;
}

/*クレジット表記部分*/
.booklink-powered-date a {
  font-size:8px;
}

/*Amazonボタン*/
.shoplinkamazon a {
  width:31%;
  font-size:16px;
  font-weight:bold;
  text-decoration:none;
  display:inline-block;
  text-align:center;
  padding:10px 0;
  margin-bottom:5px;
  color:#fff; /*ボタンテキスト色*/
  background-color:#bdcbfc; /*ボタン背景色*/
  box-shadow: 0 3px 0 #8ca5fa; /*ボタンの影（背景色よりも暗い色)*/
  border-radius:5px;
}
/*マウスホバー時*/
.shoplinkamazon a:hover {
  transform: translate(0px, 1px);
  box-shadow: 0 2px 0 #8ca5fa; /*ボタンの影と同じ色*/
}

/*楽天ボタン*/
.shoplinkrakuten a {
  width:31%;
  font-size:16px;
  font-weight:bold;
  text-decoration:none;
  display:inline-block;
  text-align:center;
  padding:10px 0;
  margin-bottom:5px;
  color:#fff; /*ボタンテキスト色*/
  background:#bdcbfc; /*ボタン背景色*/
  box-shadow: 0 3px 0 #8ca5fa; /*ボタンの影（背景色よりも暗い色)*/
  border-radius:5px;
}
/*マウスホバー時*/
.shoplinkrakuten a:hover {
  transform: translate(0px, 1px);
  box-shadow: 0 2px 0 #8ca5fa; /*ボタンの影と同じ色*/
}

/*Kindleボタン*/
.shoplinkkindle a {
  width:31%;
  font-size:16px;
  font-weight:bold;
  text-decoration:none;
  display:inline-block;
  text-align:center;
  padding:10px 0;
  margin-bottom:5px;
  color:#fff; /*ボタンテキスト色*/
  background:#bdcbfc; /*ボタン背景色*/
  box-shadow: 0 3px 0 #8ca5fa; /*ボタンの影（背景色よりも暗い色)*/
  border-radius:5px;
}
/*マウスホバー時*/
.shoplinkkindle a:hover {
  transform: translate(0px, 1px);
  box-shadow: 0 2px 0 #8ca5fa; /*ボタンの影と同じ色*/
}

/*タブレット・スマホ*/
@media print, screen and (max-width:1100px) {
.kaerebalink-image {
  width:40%;
}

.shoplinkamazon a {
  width:100%;
}

.shoplinkrakuten a {
  width:100%;
}

.shoplinkkindle a {
  width:100%;
}
}
/*-----ヨメレバカスタマイズここまで-----*/

100

101

102

103

104

105

/*-----ヨメレバカスタマイズここから-----*/

/*ボックス全体*/

.booklink-box {

background-color:#f0fcf5;/*背景色*/

padding:20px 20px 10px !important;

margin-bottom:40px;

border:2px dashed #bdcbfc; /*ステッチ風ボーダー色*/

border-radius:5px;

box-shadow:0 0 0 4px #f0fcf5, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); /*ボーダーの周りの影（背景色と同じコード）*/

}

/*商品名*/

.booklink-name a {

font-size:16px;

line-height:22px;

font-weight:bold;

}

/*クレジット表記部分*/

.booklink-powered-date a {

font-size:8px;

}

/*Amazonボタン*/

.shoplinkamazon a {

width:31%;

font-size:16px;

font-weight:bold;

text-decoration:none;

display:inline-block;

text-align:center;

padding:10px 0;

margin-bottom:5px;

color:#fff; /*ボタンテキスト色*/

background-color:#bdcbfc; /*ボタン背景色*/

box-shadow: 0 3px 0 #8ca5fa; /*ボタンの影（背景色よりも暗い色)*/

border-radius:5px;

}

/*マウスホバー時*/

.shoplinkamazon a:hover {

transform: translate(0px, 1px);

box-shadow: 0 2px 0 #8ca5fa; /*ボタンの影と同じ色*/

}

/*楽天ボタン*/

.shoplinkrakuten a {

width:31%;

font-size:16px;

font-weight:bold;

text-decoration:none;

display:inline-block;

text-align:center;

padding:10px 0;

margin-bottom:5px;

color:#fff; /*ボタンテキスト色*/

background:#bdcbfc; /*ボタン背景色*/

box-shadow: 0 3px 0 #8ca5fa; /*ボタンの影（背景色よりも暗い色)*/

border-radius:5px;

}

/*マウスホバー時*/

.shoplinkrakuten a:hover {

transform: translate(0px, 1px);

box-shadow: 0 2px 0 #8ca5fa; /*ボタンの影と同じ色*/

}

/*Kindleボタン*/

.shoplinkkindle a {

width:31%;

font-size:16px;

font-weight:bold;

text-decoration:none;

display:inline-block;

text-align:center;

padding:10px 0;

margin-bottom:5px;

color:#fff; /*ボタンテキスト色*/

background:#bdcbfc; /*ボタン背景色*/

box-shadow: 0 3px 0 #8ca5fa; /*ボタンの影（背景色よりも暗い色)*/

border-radius:5px;

}

/*マウスホバー時*/

.shoplinkkindle a:hover {

transform: translate(0px, 1px);

box-shadow: 0 2px 0 #8ca5fa; /*ボタンの影と同じ色*/

}

/*タブレット・スマホ*/

@media print, screen and (max-width:1100px) {

.kaerebalink-image {

width:40%;

}

.shoplinkamazon a {

width:100%;

}

.shoplinkrakuten a {

width:100%;

}

.shoplinkkindle a {

width:100%;

}

/*-----ヨメレバカスタマイズここまで-----*/

コピーペースト用「カエレバ・ヨメレバパープルVer」

カエレバ

/*-----カエレバカスタマイズここから-----*/
/*ボックス全体*/
.kaerebalink-box {
  background-color:#e6e5f9;/*背景色*/
  padding:20px 20px 10px !important; 
  margin-bottom:40px;
  border:2px dashed #bea1e2; /*ステッチ風ボーダー色*/
  border-radius:5px;
  box-shadow:0 0 0 4px #e6e5f9, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); /*ボーダーの周りの影（背景色と同じコード）*/
}

/*商品名*/
.kaerebalink-name a {
  font-size:16px;
  line-height:22px;
  font-weight:bold;
}

/*クレジット表記部分*/
.kaerebalink-powered-date a {
  font-size:8px;
}

/*Amazonボタン*/
.shoplinkamazon a {
  width:31%;
  font-size:16px;
  font-weight:bold;
  text-decoration:none;
  display:inline-block;
  text-align:center;
  padding:10px 0;
  margin-bottom:5px;
  color:#fff; /*ボタンテキスト色*/
  background-color:#bea1e2; /*ボタン背景色*/
  box-shadow: 0 3px 0 #a37ad6; /*ボタンの影（背景色よりも暗い色)*/
  border-radius:5px;
}
/*マウスホバー時*/
.shoplinkamazon a:hover {
  transform: translate(0px, 1px);
  box-shadow: 0 2px 0 #fb4c81; /*ボタンの影と同じ色*/
}

/*楽天ボタン*/
.shoplinkrakuten a {
  width:31%;
  font-size:16px;
  font-weight:bold;
  text-decoration:none;
  display:inline-block;
  text-align:center;
  padding:10px 0;
  margin-bottom:5px;
  color:#fff; /*ボタンテキスト色*/
  background:#bea1e2; /*ボタン背景色*/
  box-shadow: 0 3px 0 #a37ad6;/*ボタンの影（背景色よりも暗い色)*/
  border-radius:5px;

}
/*マウスホバー時*/
.shoplinkrakuten a:hover {
  transform: translate(0px, 1px);
  box-shadow: 0 2px 0 #fb4c81; /*ボタンの影と同じ色*/
}

/*Yahooショッピングボタン*/
.shoplinkyahoo a {
  width:31%;
  font-size:14px;
  font-weight:bold;
  text-decoration:none;
  display:inline-block;
  text-align:center;
  padding:10px 0;
  margin-bottom:5px;
  color:#fff; /*ボタンテキスト色*/
  background:#bea1e2; /*ボタン背景色*/
  box-shadow: 0 3px 0 #a37ad6; /*ボタンの影（背景色よりも暗い色)*/
  border-radius:5px;
}
/*マウスホバー時*/
.shoplinkyahoo a:hover {
  transform: translate(0px, 1px);
  box-shadow: 0 2px 0 #fb4c81; /*ボタンの影と同じ色*/
}

/*タブレット・スマホ*/
@media print, screen and (max-width:1100px) {
.kaerebalink-image {
  width:40%;
}

.shoplinkamazon a {
  width:100%;
}

.shoplinkrakuten a {
  width:100%;
}

.shoplinkyahoo a {
  width:100%;
}
}
/*-----カエレバカスタマイズここまで-----*/

100

101

102

103

104

105

106

/*-----カエレバカスタマイズここから-----*/

/*ボックス全体*/

.kaerebalink-box {

background-color:#e6e5f9;/*背景色*/

padding:20px 20px 10px !important;

margin-bottom:40px;

border:2px dashed #bea1e2; /*ステッチ風ボーダー色*/

border-radius:5px;

box-shadow:0 0 0 4px #e6e5f9, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); /*ボーダーの周りの影（背景色と同じコード）*/

}

/*商品名*/

.kaerebalink-name a {

font-size:16px;

line-height:22px;

font-weight:bold;

}

/*クレジット表記部分*/

.kaerebalink-powered-date a {

font-size:8px;

}

/*Amazonボタン*/

.shoplinkamazon a {

width:31%;

font-size:16px;

font-weight:bold;

text-decoration:none;

display:inline-block;

text-align:center;

padding:10px 0;

margin-bottom:5px;

color:#fff; /*ボタンテキスト色*/

background-color:#bea1e2; /*ボタン背景色*/

box-shadow: 0 3px 0 #a37ad6; /*ボタンの影（背景色よりも暗い色)*/

border-radius:5px;

}

/*マウスホバー時*/

.shoplinkamazon a:hover {

transform: translate(0px, 1px);

box-shadow: 0 2px 0 #fb4c81; /*ボタンの影と同じ色*/

}

/*楽天ボタン*/

.shoplinkrakuten a {

width:31%;

font-size:16px;

font-weight:bold;

text-decoration:none;

display:inline-block;

text-align:center;

padding:10px 0;

margin-bottom:5px;

color:#fff; /*ボタンテキスト色*/

background:#bea1e2; /*ボタン背景色*/

box-shadow: 0 3px 0 #a37ad6;/*ボタンの影（背景色よりも暗い色)*/

border-radius:5px;

}

/*マウスホバー時*/

.shoplinkrakuten a:hover {

transform: translate(0px, 1px);

box-shadow: 0 2px 0 #fb4c81; /*ボタンの影と同じ色*/

}

/*Yahooショッピングボタン*/

.shoplinkyahoo a {

width:31%;

font-size:14px;

font-weight:bold;

text-decoration:none;

display:inline-block;

text-align:center;

padding:10px 0;

margin-bottom:5px;

color:#fff; /*ボタンテキスト色*/

background:#bea1e2; /*ボタン背景色*/

box-shadow: 0 3px 0 #a37ad6; /*ボタンの影（背景色よりも暗い色)*/

border-radius:5px;

}

/*マウスホバー時*/

.shoplinkyahoo a:hover {

transform: translate(0px, 1px);

box-shadow: 0 2px 0 #fb4c81; /*ボタンの影と同じ色*/

}

/*タブレット・スマホ*/

@media print, screen and (max-width:1100px) {

.kaerebalink-image {

width:40%;

}

.shoplinkamazon a {

width:100%;

}

.shoplinkrakuten a {

width:100%;

}

.shoplinkyahoo a {

width:100%;

}

/*-----カエレバカスタマイズここまで-----*/

ヨメレバ

/*-----ヨメレバカスタマイズここから-----*/
/*ボックス全体*/
.booklink-box {
  background-color:#e6e5f9;/*背景色*/
  padding:20px 20px 10px !important;
  margin-bottom:40px;
  border:2px dashed #bea1e2; /*ステッチ風ボーダー色*/
  border-radius:5px;
  box-shadow:0 0 0 4px #e6e5f9, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); /*ボーダーの周りの影（背景色と同じコード）*/
}

/*商品名*/
.booklink-name a {
  font-size:16px;
  line-height:22px;
  font-weight:bold;
}

/*クレジット表記部分*/
.booklink-powered-date a {
  font-size:8px;
}

/*Amazonボタン*/
.shoplinkamazon a {
  width:31%;
  font-size:16px;
  font-weight:bold;
  text-decoration:none;
  display:inline-block;
  text-align:center;
  padding:10px 0;
  margin-bottom:5px;
  color:#fff; /*ボタンテキスト色*/
  background-color:#bea1e2; /*ボタン背景色*/
  box-shadow: 0 3px 0 #a37ad6; /*ボタンの影（背景色よりも暗い色)*/
  border-radius:5px;
}
/*マウスホバー時*/
.shoplinkamazon a:hover {
  transform: translate(0px, 1px);
  box-shadow: 0 2px 0 #8ca5fa; /*ボタンの影と同じ色*/
}

/*楽天ボタン*/
.shoplinkrakuten a {
  width:31%;
  font-size:16px;
  font-weight:bold;
  text-decoration:none;
  display:inline-block;
  text-align:center;
  padding:10px 0;
  margin-bottom:5px;
  color:#fff; /*ボタンテキスト色*/
  background:#bea1e2; /*ボタン背景色*/
  box-shadow: 0 3px 0 #a37ad6; /*ボタンの影（背景色よりも暗い色)*/
  border-radius:5px;
}
/*マウスホバー時*/
.shoplinkrakuten a:hover {
  transform: translate(0px, 1px);
  box-shadow: 0 2px 0 #8ca5fa; /*ボタンの影と同じ色*/
}

/*Kindleボタン*/
.shoplinkkindle a {
  width:31%;
  font-size:16px;
  font-weight:bold;
  text-decoration:none;
  display:inline-block;
  text-align:center;
  padding:10px 0;
  margin-bottom:5px;
  color:#fff; /*ボタンテキスト色*/
  background:#bea1e2; /*ボタン背景色*/
  box-shadow: 0 3px 0 #a37ad6; /*ボタンの影（背景色よりも暗い色)*/
  border-radius:5px;
}
/*マウスホバー時*/
.shoplinkkindle a:hover {
  transform: translate(0px, 1px);
  box-shadow: 0 2px 0 #8ca5fa; /*ボタンの影と同じ色*/
}

/*タブレット・スマホ*/
@media print, screen and (max-width:1100px) {
.kaerebalink-image {
  width:40%;
}

.shoplinkamazon a {
  width:100%;
}

.shoplinkrakuten a {
  width:100%;
}

.shoplinkkindle a {
  width:100%;
}
}
/*-----ヨメレバカスタマイズここまで-----*/

100

101

102

103

104

105

/*-----ヨメレバカスタマイズここから-----*/

/*ボックス全体*/

.booklink-box {

background-color:#e6e5f9;/*背景色*/

padding:20px 20px 10px !important;

margin-bottom:40px;

border:2px dashed #bea1e2; /*ステッチ風ボーダー色*/

border-radius:5px;

box-shadow:0 0 0 4px #e6e5f9, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); /*ボーダーの周りの影（背景色と同じコード）*/

}

/*商品名*/

.booklink-name a {

font-size:16px;

line-height:22px;

font-weight:bold;

}

/*クレジット表記部分*/

.booklink-powered-date a {

font-size:8px;

}

/*Amazonボタン*/

.shoplinkamazon a {

width:31%;

font-size:16px;

font-weight:bold;

text-decoration:none;

display:inline-block;

text-align:center;

padding:10px 0;

margin-bottom:5px;

color:#fff; /*ボタンテキスト色*/

background-color:#bea1e2; /*ボタン背景色*/

box-shadow: 0 3px 0 #a37ad6; /*ボタンの影（背景色よりも暗い色)*/

border-radius:5px;

}

/*マウスホバー時*/

.shoplinkamazon a:hover {

transform: translate(0px, 1px);

box-shadow: 0 2px 0 #8ca5fa; /*ボタンの影と同じ色*/

}

/*楽天ボタン*/

.shoplinkrakuten a {

width:31%;

font-size:16px;

font-weight:bold;

text-decoration:none;

display:inline-block;

text-align:center;

padding:10px 0;

margin-bottom:5px;

color:#fff; /*ボタンテキスト色*/

background:#bea1e2; /*ボタン背景色*/

box-shadow: 0 3px 0 #a37ad6; /*ボタンの影（背景色よりも暗い色)*/

border-radius:5px;

}

/*マウスホバー時*/

.shoplinkrakuten a:hover {

transform: translate(0px, 1px);

box-shadow: 0 2px 0 #8ca5fa; /*ボタンの影と同じ色*/

}

/*Kindleボタン*/

.shoplinkkindle a {

width:31%;

font-size:16px;

font-weight:bold;

text-decoration:none;

display:inline-block;

text-align:center;

padding:10px 0;

margin-bottom:5px;

color:#fff; /*ボタンテキスト色*/

background:#bea1e2; /*ボタン背景色*/

box-shadow: 0 3px 0 #a37ad6; /*ボタンの影（背景色よりも暗い色)*/

border-radius:5px;

}

/*マウスホバー時*/

.shoplinkkindle a:hover {

transform: translate(0px, 1px);

box-shadow: 0 2px 0 #8ca5fa; /*ボタンの影と同じ色*/

}

/*タブレット・スマホ*/

@media print, screen and (max-width:1100px) {

.kaerebalink-image {

width:40%;

}

.shoplinkamazon a {

width:100%;

}

.shoplinkrakuten a {

width:100%;

}

.shoplinkkindle a {

width:100%;

}

/*-----ヨメレバカスタマイズここまで-----*/

以上、「カエレバ・ヨメレバ」のカスタマイズ用CSSコードを3種のカラーパターン別にご紹介しました。

気に入っていただけた方はぜひお試しください♪

Facebook・Twitterへ最新記事をお届けします

-STINGER・AFFINGERカスタマイズ, 備忘録（WordPress）

コメントを閉じる

カエレバ、ヨメレバに挑戦♪ - ロキロビのだいすき♪ より:

2018年1月27日 2:12 AM

[…] カエレバ・ヨメレバを女性向けのかわいいデザインにCSSカスタマイズ […]
Affinger（アフィンガー）でカエレバを使う - pepper's output blog より:

2018年11月22日 11:33 AM

[…] ひとつめのカスタマイズも使ってみましたが、その後　こちら　を見つけました。 […]

Kanami（かなみ）

40代、4児の母、認知症の義母と同居中です。何気ない日常に幸せを感じるマイペースなヒト。子育てと介護の傍ら「自分にできることってなんだろう？」を模索しながらブログを書いています。

プロフィールページへ

Recommend Posts・Ad

2,393view: 【AFFINGER4】AMPページの見出し（h2～h4）のカスタマイズ

こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。 WordPressテーマ「AFFINGER4」のAMPページの見出し（h2～h4）のカスタマイズ方法をご紹介します。通常ペー ...

3,148view: 【ロリポップ】独自SSLが無料に！WordPressのSSL化（https化）全手順

ロリポップレンタルサーバーが2017年7月11日から、無料の独自SSLを導入できる機能の提供を開始しました。参考2017/07/11 無料の独自SSLがご利用いただけるようになりました！/LOLIP ...

1,879view: 【AFFINGER4】AMPページのFacebookシェアボタンがエラーになる場合の対処法とOGP設定について

【3月10日追記】新規で作成したFacebookの fb:App_id（アプリID）を「開発者モード」から「公開」に変更する部分の記載漏れがございました。開発者モードのままですと、自分以外のFac ...

5,404view: 【STINGER PLUS 】 OGP設定の「fb:admins」を「fb:app_id」に変更する方法

AFFINGER4 は、管理画面内の「Facebook設定（AMP用）」に「fb:app_id」の入力欄があります。入力した場合は優先して出力されますので、テーマファイルのカスタマイズは不要です。 F ...

6,393view: AFFINGER4 専用子テーマ【JET】に変更しました～カスタマイズの引継ぎ・注意点など～

当ブログで利用しているWordPressテーマ「AFFINGER4」に専用子テーマ「JET」を導入しました。「JET」は、トップページ・アーカイブページ・記事下の関連記事をカード型で表示することがで ...

2,533view: STINGER PLUS 「子テーマ」がダウンロードできない！そんな時は自分で作成してみよう♪

2016年10月現在、STINGER PLUSのテーマ及び子テーマのダウンロードが停止中となっています。それに伴って、「子テーマだけを今から入手したいけどできません。何か良い方法はありませんか？」と ...

3,565view: 【STINGER PLUS】ソーシャルボタンのテキストがスマホで表示されない原因と対処法は？

WordPressテーマ「STINGER PLUS+」の初期設定とカスタマイズの途中で、ふと、パソコン以外の端末（タブレット・スマホ）では、ソーシャルボタンのテキストが表示されていないことに気が付きま ...

2,219view: 【AFFINGER4】AMPページの最初の見出し（h2）の前にアドセンスを追加する方法

コードの追加場所を「子テーマ」のfunctions-amp.phpに変更しました。（テーマのアップデートの際の再編集は必要なくなりました）こちらのカスタマイズは、AFFINGER5「WING」でも応 ...

7,887view: 【STINGER PLUS】「Twitterカード」導入方法とサムネイルが正常に表示されない原因と対処法は？

こちらのページ内でご紹介しているTwitterカード導入方法は、AFFINGER4でも応用できます。最近は、Twitterでの更新情報に「Twitterカード」を導入しているサイトが増えて、タイムラ ...

5,193view: 【AFFINGER4】「この記事を書いた人」にプロフィールページへのリンクを追加する方法

ご紹介している追加コードにタグの閉じ忘れがあり修正を行いました。先に参考にしていただいた方には大変ご迷惑をおかけいたしますが、コードの変更をお願いいたします。申し訳ございません。（2017年10月4 ...

Recommended category

STINGER・AFFINGERカスタマイズ

WordPressテーマ「旧STINGER PLUS」「STINGER8」「AFFINGER4」のカスタマイズ情報です。現在見ていただいている当ブログで行っている全てのカスタマイズ方法を記録しています。気に入ったカスタマイズが見つかりましたら是非参考になさってください♪
※AFFINGER5「WING」のカスタマイズにつきましては、現在確認作業とまとめ記事の作成中です。

STINGER・AFFINGERカスタマイズ備忘録（WordPress）

ウィジェットに追加したアドセンスが保存できない・余白ができる場合の対処法

WordPressのウィジェットエリアにアドセンスコードを追加する場合、つい最近までは「カスタムHTML」を利用するのが一般的でしたが、WordPress4.9よりHTMLのエラーチェック機能が新たに加わったことで、エラーにより保存できない状態になることがあるようです。上記のように「！」の警告が表示されていても保存できる場合は問題ありませんが、保存ボタンをクリックしても保存されない場合は「カスタムHTML」ではなく「テキスト」にアドセンスコードを貼りかえることで対処することができます。 Kanamiコー ...

STINGER・AFFINGERカスタマイズ備忘録（WordPress）

カエレバ・ヨメレバを女性向けのかわいいデザインにCSSカスタマイズ

記事内でおすすめの商品や書籍を紹介するときには、Amazonや楽天、Yahooショッピングなど、複数の商品リンクをひとまとめにすることができるブログパーツ「カエレバ・ヨメレバ」がとても便利。カエレバは商品の紹介用、ヨメレバは書籍の紹介用に使い分けることができます。利用されている方も多いですよね。当ブログでも導入を検討中に、お世話になっている方からタイムリーなご質問を受けたことをきっかけに、CSSカスタマイズに挑戦してみることにしました。ここでは、コピーペーストだけで「カエレバ・ヨメレバ」のカスタマ ...

STINGER・AFFINGERカスタマイズ

AFFINGER4 専用カスタマイズ済み子テーマ2種を無料配布します

お知らせ AFFINGER4 ver20171227bより追加された新パーツのAMP表示に対応した「Kanamii for AFFINGER C」「Kanamii for AFFINGER N」ver20180117を追加しました。（2017年1月17日） 2017年11月30日追記 style.css及びst-amp-css.php内の画像パスに拡張子（.png）の記載もれがあり、コードの修正を行いました。有効化後、各所の背景画像が正常に表示されている場合は修正前のままお使いいただけますが、表示されな ...

STINGER・AFFINGERカスタマイズ

【AFFINGER4】関連コンテンツを通常ページとAMPページに設置する方法

こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。 WordPressテーマ「AFFINGER4」の通常ページとAMPページにアドセンスの関連コンテンツユニットを設置する方法をご紹介します。最近になって、新たに「インフィード広告」や「記事内広告」などのネイティブ広告が追加されたことで、どこにどんな風に広告を置けばいいんだろう？と戸惑っている方も多いのではないでしょうか。私自身も例外でななく、アドセンス、WordPressテーマ、AMP、SSL... 時代の流れについていくのは大変 ...

STINGER・AFFINGERカスタマイズ

【AFFINGER4】トップページのTwitterカードに画像が表示されない場合の対処法

AFFINGER5「WING」をお使いの場合は、WordPressダッシュボード→AFFINGER5管理→SNS→OGP設定→「投稿・固定ページ以外のアイキャッチ画像（トップページ含む）」にて設定可能になりました。先日Twitterでトップページをシェアしていただいたことをきっかけに、トップページのみ「Twitterカードの画像が表示されない」ことに気がつきました。下記は、TwitterとFacebookのOGPチェックツールでの検証結果です。《 Card Validator-Twitter Dev ...

記事一覧へ

おすすめ記事へ

ゼロからのWordPress入門

数年前、右も左もわからず挑戦したWordPressでのサイト作成。当時はWeb上の沢山の情報に助けられました。初心に戻り、WordPressにゼロから挑戦したい方を応援！難しい説明や専門用語は極力省いて、初心者さん目線でレクチャーします。

ゼロからのWordPress入門

WordPressとFacebook・Twitterを連携して更新情報を簡単に自動投稿する方法 - ゼロからのWordPress入門【21】

プラグインの設定方法について加筆修正を行いました。（2017年10月）前回までは、更新情報の受け取りツールとして、サイト名で登録することができる「Facebookページ」の作成方法とページプラグイン設置方法、さらに、Twitterのフォローボタンと埋め込みタイムラインの設置方法をお伝えしました。ここでは、プラグインJetpack by WordPress.comを利用して、FacebookページとTwitterへ更新情報を自動投稿する方法をいくつかの注意点などを含めてお伝えしていきます。 SNSへの自 ...

ゼロからのWordPress入門

サイドバーへのTwitter埋め込みタイムラインウィジェットとフォローボタンの設置方法（変更後）- ゼロからのWordPress入門【20】

前ページでは、ユーザーさん向けの更新情報受け取りのツールとして、サイト名で作成することができる「Facebookページ」の作成方法とページプラグインの導入方法をご紹介しました。今回は、サイドバーやフッターへのTwitter埋め込みタイムラインウィジェットとフォローボタンの設置方法、さらに埋め込みタイムラインの背景を透明にする方法を説明していきます。・・実は埋め込みタイムラインの設置方法については、以前にも記事内で一度お伝えしているのですが、その後変更があったようです。友人から「Twitterのタイム ...

ゼロからのWordPress入門

サイト名でのFacebookページ作成とページプラグイン導入方法 - ゼロからのWordPress入門【19】

前ページでは、WordPressのカスタマイズと子テーマについてご紹介しました。次のステップは、ブログの『更新情報発信』についてのお話しです。「更新まだかなー？」「・・まだだった・・」ご自身にもこんな経験はありませんか？無料ブログサービスのように、コミュニティ間での「読者登録」のツールがないWordPressでのサイト運営では、更新情報の受け取りに必要なツールは自身で設定する必要があります。 Facebookを頻繁に使われる方、Twitterを使われる方、RSSフィードや更新情報サービスを使われ ...

ゼロからのWordPress入門

WordPressのカスタマイズ～子テーマ利用のメリットとデメリット・各テーマファイルの子テーマ作成方法～ - ゼロからのWordPress入門【18】

前ページでは、WordPressのファイルとデータベースのバックアップ方法をご紹介しました。もしものトラブルに備えてバックアップ方法をマスターしたら、次のステップはテーマのカスタマイズです。ご自身のサイトを見渡してみて、例えば「ここの文字は大きくしたほうが見やすいかな？」とか「ここの部分は少しスペースを空けたいなぁ」と思う箇所はありますか？ WordPressでは、自分の好みに合わせてテーマファイルを自由にカスマイズすることが可能となっています。このカスタマイズ時に便利なのが「子テーマ」です。「子 ...

ゼロからのWordPress入門

WordPressのバックアップ② ～ファイルとデータベースのバックアップ方法を詳しく～ - ゼロからのWordPress入門【17】

前ページでは、WordPressのバックアップの事前準備として「FFFTP（FTPS対応版）」のインストールと接続設定、基本操作方法をご紹介しました。ここでは、実際に「FFFTP」を利用したファイルのバックアップとWordPressプラグイン「WP-DBManager」を利用したデータベースの自動バックアップ方法を順を追って詳しく説明していきます。初めてのバックアップ作業はいくつものステップがあって大変ですが、2回目以降は面倒な設定がないのでとても楽チンです。お時間のとれるときに初期設定と初回バック ...

記事一覧へ

おすすめ記事へ

ブログやSNSアイコンの似顔絵はどこで？おすすめサイトのご紹介♪

ウィジェットに追加したアドセンスが保存できない・余白ができる場合の対処法

Site search

PickUp♪

子育て

心は一緒に♪娘へのプレゼントはお揃いのくまのお守りに決めました

クリスマスまであと1か月を切りましたね。お子さんをお持ちの方はプレゼント選びや準備にワクワクの季節。お財布はシクシクの季節でもありますかね(笑) ・・・まぁね。それも含めてクリスマスは親子の一生の思い出に残る楽しいイベントだと思っている私です。さて。我が家では毎年、4人の子供たちが小さな頃からサンタさんからのプレゼントの他に、母企画の「家族Deビンゴ大会」というイベントをクリスマスイブに開催しています。一人ひとりが驚くような。嬉しいサプライズプレゼントはなんだろう？と心を弾ませるこの季節。我が ...

ブログ・サイト運営

【GoogleAdSenseマネタイズの教科書・札幌セミナー】のんくらさんってどんな人？

2019年3月13日、「のんくらセミナー」ことGoogle AdSenseフォローアップセミナー（札幌）に参加してきました。当日は受付を担当させていただいたものです。「受付で強制的に名刺渡してきたおばちゃん、誰やねん？」参加者の方々には謎の人物だったかもしれませんね。のんくらさん（@matari39）とは8年前、無料ブログサービスで子育てブログを書いていた頃に出会い、私にとっては、恩師でもあり...そうですね。友人というよりも、先生というよりも「お兄さん」という位置づけがぴったりの。そんな大切な ...

STINGER・AFFINGERカスタマイズ備忘録（WordPress）

カエレバ・ヨメレバを女性向けのかわいいデザインにCSSカスタマイズ

ブログ・サイト運営

ブログやSNSアイコンの似顔絵はどこで？おすすめサイトのご紹介♪

今までブログやSNSでのプロフィール画像は、フリー素材でお借りしたものを使っていましたが、2018年のスタートと合わせて似顔絵アイコンに変更しました。周囲にはご自身で綺麗に絵が描ける方もいらっしゃって、常々「すごいなぁ。そんなことができたら素敵だな。」と思っているのですが、なんせ人一倍絵心がなくてですね。何年前かな？「顔のほくろを取りました」といった内容の記事を書いたときに自分の似顔絵を堂々と公開したことがあるのですが.... これですからね。「・・・・・。」さて。前置きが長くなりましたが、新 ...

New entry

1,024view: ブログ・サイト運営

【GoogleAdSenseマネタイズの教科書・札幌セミナー】のんくらさんってどんな人？

2019/3/29

651view: ブログ・サイト運営

2018年の振り返り

2019/2/28

970view: 子育て

大学生・高校生・中学生・小学生・夫・おばあちゃんへのクリスマスプレゼントは？

2018/12/26

2,408view: 子育て

クリスマスプレゼントの隠し場所はどこに?おすすめアイデアのご紹介

2018/12/26

2,146view: 子育て

クリスマスパーティに100円ショップを有効利用♪家族Deビンゴ大会はいかが？

2018/12/24

カエレバ・ヨメレバを女性向けのかわいいデザインにCSSカスタマイズ

WordPressカスタマイズに役立つ2大アイテム！おすすめカラーピッカーと「ピクセル定規」

カエレバ・ヨメレバのコード取得の際の注意事項

カラーカスタマイズ用CSSコード解説

ボックス全体

商品名

クレジット表記部分

Amazonボタン

楽天・Yahooショッピングボタン

タブレット・スマホ

コピーペースト用「カエレバ・ヨメレバピンクVer」

コピーペースト用「カエレバ・ヨメレバグリーンVer」

コピーペースト用「カエレバ・ヨメレバパープルVer」

今までの STINGER PLUS+ カスタマイズまとめ

【STINGER PLUS】ヘッダー・サイドバー・コンテンツの細かいカスタマイズとCSSの基礎レッスン

Twitterカードが表示されない・タイムラグがある・修正後もエラーが出る場合の確認ポイントと対処法

【STINGER PLUS】サンプルデザイン（Sample03）と同じようにトップページを作る方法は？

SEO設定とは？トップページと投稿記事ページでのSEO設定方法 - ゼロからのWordPress入門【11】

固定ページの作成方法と注意点・カスタムメニューの使い方 - ゼロからのWordPress入門【12】

【STINGER PLUS】フッターのカスタマイズ（キャプションを非表示＆メニューカラーの変更）

WordPressとFacebook・Twitterを連携して更新情報を簡単に自動投稿する方法 - ゼロからのWordPress入門【21】

【STINGER PLUS】記事エリアの横幅を広げてアドセンス（レクタングル大）を横並びに配置する方法

【STINGER PLUS】トップページと固定ページのSNSボタンと投稿日を非表示にする方法

カエレバ・ヨメレバを女性向けのかわいいデザインにCSSカスタマイズ

WordPressカスタマイズに役立つ2大アイテム！おすすめカラーピッカーと「ピクセル定規」

カエレバ・ヨメレバのコード取得の際の注意事項

カラーカスタマイズ用CSSコード解説

ボックス全体

商品名

クレジット表記部分

Amazonボタン

楽天・Yahooショッピングボタン

タブレット・スマホ

コピーペースト用「カエレバ・ヨメレバ ピンクVer」

コピーペースト用「カエレバ・ヨメレバ グリーンVer」

コピーペースト用「カエレバ・ヨメレバ パープルVer」

コピーペースト用「カエレバ・ヨメレバピンクVer」

コピーペースト用「カエレバ・ヨメレバグリーンVer」

コピーペースト用「カエレバ・ヨメレバパープルVer」