【マテリアルデザイン風】カエレバのCSSをカスタマイズしたのでCSSを公開してみる【CSSコピペ/レスポンシブ対応】2018年版

8分

どうも、豆ゴロです。
ずーっとやろうやろうと思っていたカエレバと呼ばれる商品紹介リンクのCSS変更。

よーーーやく重い腰をあげてカスタマイズして、わりと良い感じに出来たんではないかなと思うので備忘録代わりに記事として公開してみます。
(備忘録代わりなので詳細省いた内容になっています。)
一応影つけて記事にのっかっているように見えなくもないので、マテリアルデザインとは言わないもののマテリアルデザイン風と言っておきます。

もし使用される場合は、ほぼ豆ゴロブログ用に作っているのでデザインが崩れる恐れがあるので自己責任でお願いします！
ちなみーに！自分用なのでボタンのデザインはAmazon、楽天、yahoo、7netのみしか用意していないので他が使用したい人は別途カスタマイズしてください。

カエレバCSS適用イメージ

■PC版
f:id:mamegoro:20180328162127p:plain
ドン！こんな感じ。

作ってみて思ったけど既視感ある・・・ｗ
ちなみに色はココからもらってきました。

■SP版
スマホはーこんな感じ！
f:id:mamegoro:20180328162258p:plain
画像とボタンの部分が目立つような感じにしてみまんた！

スタイルシート

極力コピペですむようにimportant指定してありますが、もしかしたらブログ毎にフォントのサイズや、margin、paddingの調整が必要かもしれません。

カエレバのデザインを初期で使っている方はamazlet風(改)-1のCSSを、カスタマイズ用のamazlet風-2を使用している方は2用のCSSをお使いください。

.kaerebalink-box {
background: #F8F8F8;
padding: 15px;
color: #333 !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
}
.kaerebalink-box a {
text-decoration:none;
color: #333 !important;
font-weight: 800;
}
.kaerebalink-name div a {
font-weight:100;
}
.kaerebalink-image img:nth-child(1) {
padding: 10px;
background: #efefef;
display: block;
margin:0 auto;
}
.kaerebalink-image img:nth-child(2),.kaerebalink-link1 img {
position: absolute;
top: 0;
}
.kaerebalink-detail {
margin-top: -5px !important;
font-size: 8px;
}
.kaerebalink-link1 div {
margin: 0 !important;
}
.kaerebalink-link1 a {
width: 48%;
display: inline-block;
margin: 2px;
padding: 10px 1px;
text-align: center;
font-weight: 800;
font-size: 12px;
color: #fff !important;
border-radius: 10px;
}
.kaerebalink-link1 a:active {
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);
border-bottom: none;
margin-bottom: 6px;
}
.shoplinkamazon a {
background: #f39c12;
border-bottom: solid 4px #e67e22;
}
.shoplinkrakuten a {
background: #e74c3c;
border-bottom: solid 4px #c0392b;
}
.shoplinkyahoo a {
background: #9b59b6;
border-bottom: solid 4px #8e44ad;
}
.shoplinkseven a {
background: #1abc9c;
border-bottom: solid 4px #16a085;
}
.booklink-footer {
display: none;
}
@media screen and (max-width: 680px) {
.kaerebalink-image{
float: none !important;
margin: -15px -15px 15px -15px !important;
background: #efefef;
padding: 15px;
}
.kaerebalink-link1 a {
width: 95%;
}
.kaerebalink-link1 {
text-align: center;
}
}


.kaerebalink-box {
background: #F8F8F8;
padding: 15px;
color: #333 !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
font-size: small;
overflow: hidden;
}
.kaerebalink-box a {
text-decoration:none;
color: #333 !important;
font-weight: 800;
}
.kaerebalink-name {
margin-bottom: 5px;
line-height: 120%;
}
.kaerebalink-name div a {
font-weight: 100;
}
.kaerebalink-image {
float: left;
margin: 0 15px 10px 0;
}
.kaerebalink-image img:nth-child(1) {
padding: 10px;
background: #efefef;
display: block;
margin: 0 auto;
}
.kaerebalink-image img:nth-child(2),.kaerebalink-link1 img {
position: absolute;
top: 0;
}
.kaerebalink-powered-date {
font-size: 8pt;
margin-top: 5px;
font-family: verdana;
line-height: 120%;
}
.kaerebalink-detail {
margin-bottom: 5px;
font-size: 8px;
}
.kaerebalink-info {
line-height: 120%;
overflow: hidden;
}
.kaerebalink-link1 div {
display: inline;
margin: 0 !important;
}
.kaerebalink-link1 a {
width: 48%;
display: inline-block;
margin: 2px;
padding: 10px 1px;
text-align: center;
font-weight: 800;
font-size: 12px;
color: #fff !important;
border-radius: 10px;
}
.kaerebalink-link1 a:active {
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);
border-bottom: none;
}
.shoplinkamazon a {
background: #f39c12;
border-bottom: solid 4px #e67e22;
}
.shoplinkrakuten a {
background: #e74c3c;
border-bottom: solid 4px #c0392b;
}
.shoplinkyahoo a {
background: #9b59b6;
border-bottom: solid 4px #8e44ad;
}
.shoplinkseven a {
background: #1abc9c;
border-bottom: solid 4px #16a085;
}
.booklink-footer {
display: none;
}
@media screen and (max-width: 680px) {
.kaerebalink-image{
float: none !important;
margin: -15px -15px 15px -15px !important;
background: #efefef;
padding: 15px;
}
.kaerebalink-link1 a {
width: 95%;
}
.kaerebalink-link1 {
text-align: center;
}
}

レスポンシブ対応版カスタマイズ

ちなみにースタイルシートの

@media screen and (max-width: 680px) {
.kaerebalink-image {
float: none !important;
margin: -15px -15px 15px -15px !important;
background: #efefef;
padding: 15px;
}
.kaerebalink-link1 a {
width: 95%;
}
.kaerebalink-link1 {
text-align: center;
}
}

この部分を45%に変更すると・・・
f:id:mamegoro:20180328162358p:plain
ボタン周りがスマホで見た時にこんな感じになります！

スマホの機種によってボタンの文字が長すぎて2行になってしまう場合があるので、カエレバでコードを発行する際に、
f:id:mamegoro:20180328162420p:plain
上記のように「で購入」「で探す」などを選択せずに「なし」にしておくと1行に収まりきって見栄えが良くなるはず。

カエレバCSS適用イメージモノクロ版

モノクロ版も作ってみました。
といってもボタンの色変えるだけだけど！

■PC版
f:id:mamegoro:20180328162449p:plain

■SP版
f:id:mamegoro:20180328162535p:plain

モノクロ版スタイルシート

.kaerebalink-box {
background: #F8F8F8;
padding: 15px;
color: #333 !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
}
.kaerebalink-box a {
text-decoration:none;
color: #333 !important;
font-weight: 800;
}
.kaerebalink-name div a {
font-weight:100;
}
.kaerebalink-image img:nth-child(1) {
padding: 10px;
background: #efefef;
display: block;
margin:0 auto;
}
.kaerebalink-image img:nth-child(2),.kaerebalink-link1 img {
position: absolute;
top: 0;
}
.kaerebalink-detail {
margin-top: -5px !important;
font-size: 8px;
}
.kaerebalink-link1 div {
margin: 0 !important;
}
.kaerebalink-link1 a {
width: 48%;
display: inline-block;
margin: 2px;
padding: 10px 1px;
text-align: center;
font-weight: 800;
font-size: 12px;
color: #fff !important;
border-radius: 10px;
}
.kaerebalink-link1 a:active {
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);
border-bottom: none;
margin-bottom: 6px;
}
.shoplinkamazon a,.shoplinkrakuten a,.shoplinkyahoo a,.shoplinkseven a {
background: #999;
border-bottom: solid 4px #777;
}
.booklink-footer {
display: none;
}
@media screen and (max-width: 680px) {
.kaerebalink-image{
float: none !important;
margin: -15px -15px 15px -15px !important;
background: #efefef;
padding: 15px;
}
.kaerebalink-link1 a {
width: 95%;
}
.kaerebalink-link1 {
text-align: center;
}
}

.kaerebalink-box {
background: #F8F8F8;
padding: 15px;
color: #333 !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
font-size: small;
overflow: hidden;
}
.kaerebalink-box a {
text-decoration:none;
color: #333 !important;
font-weight: 800;
}
.kaerebalink-name {
margin-bottom: 5px;
line-height: 120%;
}
.kaerebalink-name div a {
font-weight: 100;
}
.kaerebalink-image {
float: left;
margin: 0 15px 10px 0;
}
.kaerebalink-image img:nth-child(1) {
padding: 10px;
background: #efefef;
display: block;
margin: 0 auto;
}
.kaerebalink-image img:nth-child(2),.kaerebalink-link1 img {
position: absolute;
top: 0;
}
.kaerebalink-powered-date {
font-size: 8pt;
margin-top: 5px;
font-family: verdana;
line-height: 120%;
}
.kaerebalink-detail {
margin-bottom: 5px;
font-size: 8px;
}
.kaerebalink-info {
line-height: 120%;
overflow: hidden;
}
.kaerebalink-link1 div {
display: inline;
margin: 0 !important;
}
.kaerebalink-link1 a {
width: 48%;
display: inline-block;
margin: 2px;
padding: 10px 1px;
text-align: center;
font-weight: 800;
font-size: 12px;
color: #fff !important;
border-radius: 10px;
}
.kaerebalink-link1 a:active {
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);
border-bottom: none;
}
.shoplinkamazon a,.shoplinkrakuten a,.shoplinkyahoo a,.shoplinkseven a {
background: #999;
border-bottom: solid 4px #777;
}
.booklink-footer {
display: none;
}
@media screen and (max-width: 680px) {
.kaerebalink-image{
float: none !important;
margin: -15px -15px 15px -15px !important;
background: #efefef;
padding: 15px;
}
.kaerebalink-link1 a {
width: 95%;
}
.kaerebalink-link1 {
text-align: center;
}
}

総括

検索流入狙ってない記事だからって内容適当スギ！
気が向いたら書き直します。
昨日思い立って書いたのでもし不具合ありまくりだったら申し訳ない。最低限ヨメレバとかにも対応出来るようにしたほうが良いのかなー。要検討。

前の記事

読んで面白かったおすすめの人気異世界転生・異世界召喚系漫画ラン…

次の記事

コメダ珈琲(コーヒー)で季節のシロノワール 「シロノワール♥N…