【LION MEDIA版】カエレバとヨメレバカスタマイズコード

当ブログで以前紹介したカエレバ・ヨメレバのカスタマイズコード。
https://plu-plu.net/post-1574/

最近LION MEDIAにテーマを変えたら若干の崩れがあったので、訂正をしました。

LION MEDIAを使用している方はこちらを参考にしてください！
また、LION MEDIAにテーマを変更した方で、当ブログを参考にカエレバ、ヨメレバをカスタマイズした場合には不具合が生じる恐れがあるので、当記事のコードをstyle.cssに貼りなおしてください。

コピペでオッケーです。

新たにレンタルサーバーを選ぶならこれ！

エックスサーバー

• 国内シェアNo.1の高速サーバーなのでストレスフリー！
• 自動バックアップ機能に標準対応で安心運用可能！

気になるポイント！	キャンペーン中に契約すれば.com等のドメインを永久無料で使えます！

WordPressでサイトを運用すると重くなりがちですが、使用しているレンタルサーバーのスペックがあまり良くないと、どんなにWordPress側で高速化をしていても、なかなか高速化の成果が反映されません。サイトの表示スピードが上がらない原因がレンタルサーバーの場合は、エックスサーバーにしてみると改善するかもしれません！ またサーバー等のバックアップを自動で行っているので、安心してサイトの運用をすることができます！ またマルチドメイン、メールアドレスを無制限で使えるというのもうれしいですね。

公式サイトはこちら

コード公開

見た目はこちらの記事のものと全く同じです。
https://plu-plu.net/post-1574/

ただしこちらの記事のコードだとLION MEDIAだと上手く表示されないので、以下に紹介するコードに変更してください。
なおレスポンシブ対応にするため、以下のPC版・スマホ版どちらのコードも追加してください。

PC版

.cstmreba{
	border: 1px solid #bbb;
	width:80%;
	padding:20px;
	margin:20px auto;
	box-shadow:0 2px 5px #999;
}
.kaerebalink-image,
.booklink-image{
	float:left;
}
.kaerebalink-image img,
.booklink-image img{
	max-height:140px;
}
.kaerebalink-info,
.booklink-info{
	overflow:hidden;
	padding-left:10px;
}
.kaerebalink-name{
	margin-bottom:10px;
}

.kaerebalink-powered-date,
.booklink-powered-date,
.kaerebalink-detail,
.booklink-detail{
	font-size:12px;
}

.shoplinkamazon,
.shoplinkrakuten,
.shoplinkrakukobo,
.shoplinkkindle,
.shoplinkkakakucom,
.shoplinktoshokan{
	float:left;
	width:27%;
	margin-left:5px;
	margin-bottom:8px;
	text-align:center;
}

.shoplinkamazon a,
.shoplinkrakuten 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;

}
.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 a:hover,
.shoplinkrakuten a:hover,
.shoplinkrakukobo a:hover,
.shoplinkkindle a:hover,
.shoplinkkakakucom a:hover,
.shoplinktoshokan 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;
}
.shoplinkkakakucom a:hover{
	color:#ff7426 !important;
}
.shoplinktoshokan a:hover{
	color:#262626 !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,
.shoplinkrakukobo,
.shoplinkkindle,
.shoplinkkakakucom,
.shoplinktoshokan{
         float:none;
         width:90%;
}

必ずPC・スマホ版両方を追加してください！

どちらか片方しか追加していない場合は、レスポンシブ表示されないので、必ずどちらも追加してください。
もともと当ブログの記事を参考にしていた場合はPC版だけ追加するだけでも表示されます。