カエレバとヨメレバをSimplicity2用にカスタマイズしてみた

商品の紹介をするのに便利なカエレバヨメレバのブログパーツをカスタマイズしました。
動作環境は当ブログで使っているWordPressテーマSimplicity2でしか試していません。
一応レスポンシブにしたので大体使えると思うのですが・・・

能書きは不要と思いますので、完成イメージは下記のとおりです。

カエレバ

ヨメレバ

設定

カエレバ、ヨメレバ共に共通の設定として
・画像中
・amazlet風-2(cssカスタマイズ用)
・後ろに付ける文字は無し(購入等)
です。

CSS

下記CSSです。
そのままコピペして使ってみて下さい。

/*--------------------------------------
  ヨメレバ・カエレバここから
--------------------------------------*/
.kaerebalink-box,.booklink-box {
    margin:20px auto;
    width: 640px;
    border: 1px solid #dfdfdf;
	padding:20px;
	border-radius: 3px;
	overflow:hidden;
	background-color:#fff;
}

.kaerebalink-image,.booklink-image {
    float: left;
	text-align:center;
}

.kaerebalink-image > a > img,.booklink-image > a > img {
	max-width: 128px;min-width: 128px;
    height: auto;
}

.kaerebalink-info,.booklink-info {margin: 0 0 0 138px;}

.kaerebalink-name a,.booklink-name a{
	color:#000;
	text-decoration: none;
    font-weight: 700;
    font-size:1.2rem;
}

.kaerebalink-powered-date,.kaerebalink-powered-date a,.booklink-powered-date,.booklink-powered-date a{
	color:#000;
	margin-top:3px;
	font-size:12px;
}

.kaerebalink-detail,.booklink-detail{
	margin:5px auto;
	color:#000;
}


div[class^="shoplink"] {
  box-sizing:border-box;
  margin: .1em ;
  margin-bottom:4px;
  float: left;
  width: 49%;
  border-radius:3px;
}

.kaerebalink-link1 div a,.booklink-link2 div a {
  display:block;
  padding:8px 0;
  text-align:center;
  line-height:18px;
  font-weight:400;
  font-size:18px;
  text-decoration: none;
  color: #fff;
  border: 1px solid transparent;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.kaerebalink-image img:hover,.kaerebalink-name a:hover,.booklink-image img:hover,.booklink-name a:hover{
  opacity: 0.7;  filter: alpha(opacity=70);  -moz-opacity: 0.7;  -ms-filter: "alpha(opacity=70)";
}


div[class^="shoplink"] a:after{content:" \f002"; font-family:"FontAwesome";}
div[class^="shoplink"] a:hover{background-color: #fff;  border-radius:3px;}
/*amazon*/
.shoplinkamazon{background-color:#ff8100;}
div.shoplinkamazon a:hover{color:#ff8100;border-color:#ff8100;}
div.shoplinkamazon a{
	font-family : Arial,sans-serif;
	text-transform:lowercase;}

/*Kindle*/
.shoplinkkindle{background-color:#000;}
div.shoplinkkindle a:hover{border-color:#000;}
div.shoplinkkindle a{
	font-family : Arial,sans-serif;
	text-transform:lowercase;
	color:#f8981c;
}
div.shoplinkkindle a:after{	color:#fff;}
div.shoplinkkindle a:hover:after{	color:#000;}
/*楽天*/
.shoplinkrakuten{background-color:#bf0000;}
div.shoplinkrakuten a:hover{color:#bf0000;border-color:#bf0000;}
/*KOBO*/
.shoplinkrakukobo{background-color:#00bcd8;}
div.shoplinkrakukobo a:hover{color:#00bcd8;border-color:#00bcd8;}
/*7net*/
.shoplinkseven{background-color:#038539;}
div.shoplinkseven a:hover{color:#038539;border-color:#038539;}
/*Yahoo*/
.shoplinkyahoo{background-color:#ff0033;}
div.shoplinkyahoo a:hover{color:#ff0033;border-color:#ff0033;}
/*ベルメゾン*/
.shoplinkbellemaison{background-color:#9ab170;}
div.shoplinkbellemaison a:hover{color:#9ab170;border-color:#9ab170;}
/*セシール*/
.shoplinkcecile{background-color:#624e37;}
div.shoplinkcecile a:hover{color:#624e37;border-color:#624e37;}
/*価格com*/
.shoplinkkakakucom{background-color:#051d93;}
div.shoplinkkakakucom a:hover{color:#051d93;border-color:#051d93;}
div.shoplinkkakakucom a:after{content:" \f002 "; font-family:"FontAwesome";}
/*honto*/
.shoplinkbk1{background-color:#0085cd;}
div.shoplinkbk1 a:hover{color:#0085cd;border-color:#0085cd;}
/*e-hon*/
.shoplinkehon{background-color:#000066;}
div.shoplinkehon a:hover{color:#000066;border-color:#000066;}
/*紀伊國屋*/
.shoplinkkino{background-color:#004097;}
div.shoplinkkino a:hover{color:#004097;border-color:#004097;}
/*図書館*/
.shoplinktoshokan{background-color:#2ab5e8;}
div.shoplinktoshokan a:hover{color:#2ab5e8;border-color:#2ab5e8;}
div.shoplinktoshokan a:after{content:" \f002 "; font-family:"FontAwesome";}

.kaerebalink-box:after,.kaerebalink-link1:after, .booklink-box:after,.booklink-link2:after {
    content: "";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
}

div[class^="shoplink"] img {display: none;}

@media (max-width: 780px) {
	.kaerebalink-box,.booklink-box {width: auto;}
    .kaerebalink-image,.booklink-image{float: none;width: 100%;}
	.kaerebalink-info,.booklink-info {margin: 0;width: 100%;}
	div[class^="shoplink"] {float: none;width: auto;
	margin-bottom:5px;}
	
}


/*--------------------------------------
  ヨメレバ・カエレバここまで
--------------------------------------*/

今後

とりあえず自分が問題なく使えてるので、
良しとします。
何か気がついたらアップデートします。

追記:キャッシュで反映されない

こちらのCSSを導入しても、反映されないご報告がありました。
原因はキャッシュが残っている事でした。
キャッシュの削除や、更新をする事で反映されると思います。

やーまん

山奥に移住し、のんびり暮らしています。
日々の事で感じた事や考え方などを備忘録として残しています。

関連記事