【楽天koboにも対応】カエレバやヨメレバをレスポンシブな紹介リンクにするためのCSSデザイン
「わかったブログ」を運営するかん吉さん(kankichi)が提供しているブックマークレットツール「ヨメレバ」と「カエレバ」。
お世話になっているブログ運営者の人も多いのではないでしょうか?
さて、そんな両ツールに対応したレスポンシブなCSSを書いたので、さらっと公開してみることにしました。
まぁ、書いたと言っても、今回のネタフルリニューアルに派生したもので、この記事書くために書いたわけではないのですが、そこそこシンプルかつキレイに、なおかつ画面の別を問わず表示させられるので、これくらいは公開してもいっかーくらいのもんです。
つっても、CSSなんかブラウザ開いてさらっと見られるもんですから、別に非公開でもなんでもないんですけどね。
のちほど紹介するコードを、ご自分のサイトやブログのCSSファイルにペロッとコピペすることで、こんな感じの紹介リンクになります。
PC/タブレット向けでの表示
スマートフォン向けでの表示
PCやタブレット、あるいはiPhone 6 Plus相当のスマートフォンの場合、ボタンが2列に並びます。これよりもやや小さい画面になるとボタンが1列になり、さらに小さいスマートフォンでは、書影や商品写真がセンタリングされ、その下に商品名やメタ情報、各ショップへのリンクが並ぶというように変化します。
ヨメレバ/カエレバ専用レスポンシブCSS
ということで、以下がCSS全文になります。
ただし、このCSSは「ヨメレバ」と「カエレバ」で用意されているテンプレートの“Amazlet風-2(cssカスタマイズ用)”での利用が想定されたものになっているので、それ以外のテンプレートではさきほどと全く同じスタイルにはなりません。
また、アイコンは必ずなしにするようにしてください。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ===============消しちゃダメ============== */ | |
| /* kaereba/yomereba Customize Settings 1.0.0 ver */ | |
| /* Created by Cazuki Hoshina */ | |
| /* Copyright (c) @cazuki All rights Reserved. */ | |
| /* ======================================== */ | |
| .kaerebalink-box, .booklink-box { | |
| width: 100%; | |
| margin: 0 0 2rem; | |
| padding: 1rem; | |
| background: #ffffff; | |
| border: 1px solid; | |
| border-color: #eaeaea #dddddd #d0d0d0; | |
| -webkit-border-radius: 3px; | |
| -moz-border-radius: 3px; | |
| border-radius: 3px; | |
| box-sizing: border-box; | |
| /zoom:1; | |
| } | |
| .kaerebalink-box:after, .booklink-box:after { | |
| content:""; | |
| display:block; | |
| visibility:hidden; | |
| height:0; | |
| clear:both; | |
| } | |
| .kaerebalink-image, .booklink-image { | |
| float:left; | |
| width:128px; | |
| margin:0; | |
| text-align:center; | |
| } | |
| .kaerebalink-image img, .booklink-image img { width:128px; height:auto; } | |
| .kaerebalink-info, .booklink-info { margin: 0 0 0 140px; line-height: 1.6rem; } | |
| .kaerebalink-name, .booklink-name { | |
| font-size: 1.0625rem; | |
| font-weight: bold; | |
| margin: 0; | |
| } | |
| .kaerebalink-name a, .booklink-name a { color: #2b2b2b; } | |
| .kaerebalink-name a:hover, .booklink-name a:hover { text-decoration: underline; } | |
| .kaerebalink-powered-date, .booklink-powered-date { font-size: 0.75rem; font-weight: normal; } | |
| .kaerebalink-detail, .booklink-detail { font-size: 0.9375rem; margin: 0 0 0.5em; } | |
| .kaerebalink-link1, .booklink-link2 { width:100%; } | |
| .kaerebalink-link1 div, .booklink-link2 div { | |
| float: left; | |
| width: 49.5%; | |
| margin-bottom: 1%; | |
| font-size: 0.875rem; | |
| font-weight: bold; | |
| text-align: center; | |
| box-sizing: border-box; | |
| } | |
| .kaerebalink-link1 div:nth-child(even), .booklink-link2 div:nth-child(even) { margin-left: 1%; } | |
| .kaerebalink-link1 div a, .booklink-link2 div a { display:block; padding:3px 0; text-decoration:none; } | |
| .shoplinkamazon a, .shoplinkrakuten a, .shoplinkrakukobo a, .shoplinkyahoo a, .shoplinkyahooAuc a, | |
| .shoplinkseven a, .shoplinkbellemaison a, .shoplinkcecile a, .shoplinkkakakucom a, | |
| .shoplinkkindle a, .shoplinkbk1 a, .shoplinkehon a, .shoplinkkino a, | |
| .shoplinkjun a, .shoplinktoshokan a { | |
| display:block; | |
| text-decoration:none; | |
| } | |
| .shoplinkamazon a { color:#ffffff; background:#ff9900; } | |
| .shoplinkkindle a { color:#ffffff; background:#1882c9; } | |
| .shoplinkrakuten a { color:#ffffff; background:#bf0000; } | |
| .shoplinkrakukobo a { color:#ffffff; background:#ff2626; } | |
| .shoplinkyahoo a { color:#ffffff; background:#fc1d2f; } | |
| .shoplinkyahooAuc a { color:#252525; background:#ffdb00; } | |
| .shoplinkseven a { color:#ffffff; background:#225093; } | |
| .shoplinkbellemaison a { color:#ffffff; background:#83be00; } | |
| .shoplinkcecile a { color:#ffffff; background:#6b053d; } | |
| .shoplinkkakakucom a { color:#ffffff; background:#00138e; } | |
| .shoplinkbk1 a { color:#ffffff; background:#0484d2; } | |
| .shoplinkehon a { color:#ffffff; background:#00006a; } | |
| .shoplinkkino a { color:#ffffff; background:#003e9d; } | |
| .shoplinkjun a { color:#4b5854; background:#d8c9b7; } | |
| .shoplinktoshokan a { color:#ffffff; background:#29b6e9; } | |
| .booklink-footer { clear:both !important; } | |
| @media only screen and (min-width:460px) and (max-width:640px) { | |
| .kaerebalink-link1 div, .booklink-link2 div { float: none; width: 100%; } | |
| .kaerebalink-link1 div:nth-child(even), .booklink-link2 div:nth-child(even) { margin-left: 0; } | |
| } | |
| @media only screen and (max-width:459px) { | |
| .kaerebalink-image, .booklink-image { | |
| float:none; | |
| width:100%; | |
| margin:0; | |
| text-align:center; | |
| } | |
| .kaerebalink-image img, .booklink-image img { width:180px; height:auto; } | |
| .kaerebalink-info, .booklink-info { margin: 0; } | |
| .kaerebalink-link1 div, .booklink-link2 div { float: none; width: 100%; } | |
| .kaerebalink-link1 div:nth-child(even), .booklink-link2 div:nth-child(even) { margin-left: 0; } | |
| } |
めっさ長いのですが、これでも短く抑えたんですよ。いやマジで。
「ヨメレバ」と「カエレバ」では出力されるHTMLが同じ構造で異なる要素になっているので、それぞれ併記するかたちを取りました。
一応、各ショップへのボタンリンクは全て準備してあります。
メディアクエリーの分岐で指定してる数字がえらく中途半端に思えますが、この分岐がいちばんぴったり来るのでこういう指定をしています。あしからず。
これいいなーと思われましたら、ぜひ利用してやってください。
ただし、改変やら調整やらは構わないのですが、それによって表示が崩れたなどの責任は負いかねます。ご了承くださいませ。
