こんにちは、つばさ(@tsubasa123)です。
そろそろ本格的にカエレバの導入を検討している私ですが、カエレバの導入よりもカエレバ用のCSSカスタマイズに夢中です。
先日、暇だったのでCSSの勉強も兼ねていくつか案を作ってみました。というわけで、今日は2案目、明日は3案目、明後日は4案目をご紹介していきたいと思います。まだはやいですが、メリークリスマスです。
今回もPC、スマホ、レスポンシブと3つコードを用意しております。お気に召した方がいらっしゃいましたら是非一度お試しください。
対応状況と取得コード
前回と条件は同じです。取得コードは「amazlet風-2」を選択してください。
本記事投稿時点では「Amazon」「楽天市場」「Kindle」「楽天ブックス」の4つだけになります。需要がありましたら他のものも対応しますのでご連絡ください。
PC版
前回は枠と文字に色を付けましたが今回は塗りに。角丸を止めてボタンの下に少しだけ影をつけてみました。この辺はなんとなくわかる方は自由に調整してご利用ください。
.booklink-box, .kaerebalink-box { font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif; padding: 22px 25px 22px 25px; width: 94%; margin: 0 auto 15px; border: 3px solid #dfdfdf; box-sizing: border-box; display: table; } .booklink-image, .kaerebalink-image { vertical-align: top; box-sizing: border-box; display: table-cell; width: 111px; text-align: center; } .booklink-image img, .kaerebalink-image img { max-width: 100% } .booklink-info, .kaerebalink-info { line-height: 125%; vertical-align: top; box-sizing: border-box; display: table-cell; padding-left: 25px; } .booklink-name, .kaerebalink-name { margin: 0 0 24px 0; } .booklink-name a, .kaerebalink-name a { color: #0066cc; text-decoration: underline; } .booklink-name > a, .kaerebalink-name > a { font-size: 16px; } .booklink-name a:hover, .kaerebalink-name a:hover { color: #FF9900; } .booklink-powered-date, .kaerebalink-powered-date { font-size: 8px; margin: 6px 0 0 0; } .booklink-detail, .kaerebalink-detail { color: #333333; font-size: 12px; margin: 0 0 14px 0; } .booklink-link2 a, .kaerebalink-link1 a { display: block; padding: 10px 1px; text-align: center; text-decoration: none; font-size: 14px; font-weight: bold; box-shadow: 2px 2px 1px #dcdcdc; } .booklink-link2 a:hover, .kaerebalink-link1 a:hover { opacity: 0.6; } .booklink-link2 > div, .kaerebalink-link1 > div { width: 33.33%; padding: 0 5px 5px 0; box-sizing: border-box; float: left; } .shoplinkamazon a { color: #ffffff; background: #ff9901; border: 2px solid #ff9901; } .shoplinkrakuten a { color: #ffffff; background: #bf0000; border: 2px solid #bf0000; } .shoplinkkindle a { color: #ffffff; background: #0074c1; border: 2px solid #0074c1; }
スマホ版
前回と同じくボタンが立て並びになります。
.booklink-box, .kaerebalink-box { font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif; padding: 22px 25px 22px 25px; width: 94%; margin: 0 auto 15px; border: 3px solid #dfdfdf; box-sizing: border-box; text-align: center; } .booklink-image, .kaerebalink-image { width: 100%; margin: 0 0 5px 0; } .booklink-image img, .kaerebalink-image img {} .booklink-info, .kaerebalink-info { line-height: 125%; width: 100%; } .booklink-name, .kaerebalink-name { margin: 0 0 4px 0; } .booklink-name a, .kaerebalink-name a { color: #0066cc; text-decoration: underline; } .booklink-name > a, .kaerebalink-name > a { font-size: 16px; } .booklink-name a:hover, .kaerebalink-name a:hover { color: #FF9900; } .booklink-powered-date, .kaerebalink-powered-date { font-size: 8px; } .booklink-detail, .kaerebalink-detail { color: #333333; font-size: 12px; margin: 0 0 10px 0; } .booklink-link2 a, .kaerebalink-link1 a { width: 90%; display: block; margin: 0px auto 8px; padding: 10px 1px; text-decoration: none; font-size: 14px; font-weight: bold; box-shadow: 2px 2px 1px #dcdcdc; } .booklink-link2 a:hover, .kaerebalink-link1 a:hover { opacity: 0.6; } .shoplinkamazon a { color: #ffffff; background: #ff9901; border: 2px solid #ff9901; } .shoplinkrakuten a { color: #ffffff; background: #bf0000; border: 2px solid #bf0000; } .shoplinkkindle a { color: #ffffff; background: #0074c1; border: 2px solid #0074c1; }
レスポンシブ版
画像は省略、ブレイクポイントでPCのデザインとSPのデザインが切り替わります。レスポンシブだから当たり前か。ブレイクポイントはご利用中のテーマに合わせて変更してください。
.booklink-box, .kaerebalink-box { font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif; padding: 22px 25px 22px 25px; width: 94%; margin: 0 auto 15px; border: 3px solid #dfdfdf; box-sizing: border-box; text-align: center; } .booklink-image, .kaerebalink-image { width: 100%; margin: 0 0 5px 0; } .booklink-image img, .kaerebalink-image img {} .booklink-info, .kaerebalink-info { line-height: 125%; width: 100%; } .booklink-name, .kaerebalink-name { margin: 0 0 4px 0; } .booklink-name a, .kaerebalink-name a { color: #0066cc; text-decoration: underline; } .booklink-name > a, .kaerebalink-name > a { font-size: 16px; } .booklink-name a:hover, .kaerebalink-name a:hover { color: #FF9900; } .booklink-powered-date, .kaerebalink-powered-date { font-size: 8px; } .booklink-detail, .kaerebalink-detail { color: #333333; font-size: 12px; margin: 0 0 10px 0; } .booklink-link2, .kaerebalink-link1 {} .booklink-link2 a, .kaerebalink-link1 a { width: 90%; display: block; margin: 0px auto 8px; padding: 10px 1px; text-decoration: none; font-size: 14px; font-weight: bold; box-shadow: 2px 2px 1px #dcdcdc; } .booklink-link2 a:hover, .kaerebalink-link1 a:hover { opacity: 0.6; } @media screen and (min-width: 800px) { .booklink-box, .kaerebalink-box { text-align: left; display: table; } .booklink-image, .kaerebalink-image { vertical-align: top; box-sizing: border-box; display: table-cell; width: 111px; text-align: center; margin: 0; } .booklink-image img, .kaerebalink-image img { max-width: 100% } .booklink-info, .kaerebalink-info { line-height: 125%; vertical-align: top; box-sizing: border-box; display: table-cell; padding-left: 25px; width: auto; } .booklink-name, .kaerebalink-name { margin: 0 0 24px 0; } .booklink-name > a, .kaerebalink-name > a { font-size: 16px; } .booklink-powered-date, .kaerebalink-powered-date { margin: 6px 0 0 0; } .booklink-detail, .kaerebalink-detail { margin: 0 0 14px 0; } .booklink-link2 a, .kaerebalink-link1 a { width: auto; text-align: center; margin: none; } .booklink-link2 > div, .kaerebalink-link1 > div { width: 33.33%; padding: 0 5px 5px 0; box-sizing: border-box; float: left; } } .shoplinkamazon a { color: #ffffff; background: #ff9901; border: 2px solid #ff9901; } .shoplinkrakuten a { color: #ffffff; background: #bf0000; border: 2px solid #bf0000; } .shoplinkkindle a { color: #ffffff; background: #0074c1; border: 2px solid #0074c1; }
さいごに
カエレバデザイン2案目。ベースのコーディングができてしまえばあとはちょちょっと変えるだけで量産できそうですね。そのちょちょっとが難しいのですが。
ではでは、最後までお付き合いいただきありがとうございました。
コメント