【楽天koboにも対応】カエレバやヨメレバをレスポンシブな紹介リンクにするためのCSSデザイン

わかったブログ」を運営するかん吉さん(kankichi)が提供しているブックマークレットツール「ヨメレバ」と「カエレバ」。
お世話になっているブログ運営者の人も多いのではないでしょうか?
さて、そんな両ツールに対応したレスポンシブなCSSを書いたので、さらっと公開してみることにしました。

ヨメレバ・カエレバ専用CSS

まぁ、書いたと言っても、今回のネタフルリニューアルに派生したもので、この記事書くために書いたわけではないのですが、そこそこシンプルかつキレイに、なおかつ画面の別を問わず表示させられるので、これくらいは公開してもいっかーくらいのもんです。

つっても、CSSなんかブラウザ開いてさらっと見られるもんですから、別に非公開でもなんでもないんですけどね。

のちほど紹介するコードを、ご自分のサイトやブログのCSSファイルにペロッとコピペすることで、こんな感じの紹介リンクになります。

PC/タブレット向けでの表示
PCやタブレットでの表示

スマートフォン向けでの表示
スマートフォンでの表示

PCやタブレット、あるいはiPhone 6 Plus相当のスマートフォンの場合、ボタンが2列に並びます。これよりもやや小さい画面になるとボタンが1列になり、さらに小さいスマートフォンでは、書影や商品写真がセンタリングされ、その下に商品名やメタ情報、各ショップへのリンクが並ぶというように変化します。

ヨメレバ/カエレバ専用レスポンシブCSS

ということで、以下がCSS全文になります。
ただし、このCSSは「ヨメレバ」と「カエレバ」で用意されているテンプレートの“Amazlet風-2(cssカスタマイズ用)”での利用が想定されたものになっているので、それ以外のテンプレートではさきほどと全く同じスタイルにはなりません。
また、アイコンは必ずなしにするようにしてください。


めっさ長いのですが、これでも短く抑えたんですよ。いやマジで。

「ヨメレバ」と「カエレバ」では出力されるHTMLが同じ構造で異なる要素になっているので、それぞれ併記するかたちを取りました。

一応、各ショップへのボタンリンクは全て準備してあります。

メディアクエリーの分岐で指定してる数字がえらく中途半端に思えますが、この分岐がいちばんぴったり来るのでこういう指定をしています。あしからず。

これいいなーと思われましたら、ぜひ利用してやってください。
ただし、改変やら調整やらは構わないのですが、それによって表示が崩れたなどの責任は負いかねます。ご了承くださいませ。

「CSS」新着記事

Google Analytics連携でアクセスランキングを作れる「Ranklet」の汎用テンプレートを作ってみた件

Avatar for ホシナ カズキ

ホシナ カズキ

Sassに移行したのでどんな環境でサースってるのかをまとめてみた件

Avatar for ホシナ カズキ

ホシナ カズキ

CSSの calc() ファンクションを使って長さを計算しサイズ指定する方法

Avatar for ホシナ カズキ

ホシナ カズキ

Webサイトの特定要素をブルブルさせるためだけのCSSフレームワーク「CSS Shake」

Avatar for ホシナ カズキ

ホシナ カズキ

ホバー表示のツールチップを独自データ属性とCSSだけで作る方法

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

モバデビはモバイルやウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく