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

便利ツール

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

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

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

コピペでオッケーです。

スポンサーリンク

コード公開

見た目はこちらの記事のものと全く同じです。
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版だけ追加するだけでも表示されます。

コメント