ヨス(@yossense)です。いつも私のブログでもお世話になりまくっているブックマークレットに「カエレバ」というものがあります。アマゾンや楽天の商品へのリンクを一瞬で作ってくれる必須のものです。ブロガーの方、アフィリエイターの方で使っている方は非常に多いと思います。カエレバ今回はカエレバの初期設定で表示される、「Amazon」と「楽天市場」の文字をボタンにするCSSを紹介します!カエレバのショップへのリンクをボタン化では最初に現状と目標を見てみましょう。元レイアウトと目標レイアウト現状ではアマゾンとか楽天へのリンクが、小さくて押しにくいので、ボタンにしてクリックしやすくしようというわけです。CSSでどういうことをしていったかを説明しながら書いているので、結果だけほしい(最終的なCSSコードがほしい)方はこちらへどうぞ。背景に色を入れるカエレバの現状のレイアウトまずは、ボタンにするために「Amazon」と「楽天市場」の文字の背景に色を付けてみましょう。CSSコードはこちらを使います。;}カエレバのカスタマイズでのポイントはCSSに!importantを付けること。これを入れないと、カエレバの場合、スタイルシートが適応されません。元々のカエレバの設定CSSがあるのでそちらが優先されるからです。ところが、この!importantを挿入すると、どんな場合でもこっちの指定を優先してくれます。通常のコーディングではゴチャゴチャするので、よっぽどのことがない限り使わないようにしましょう。背景に色を入れたけど、文字が見づらい。このままでは文字が見えないので、お次は文字の色を白くしましょう。文字を白くして見やすくし、文字のアンダーラインも削除。アマゾンも楽天もどちらも文字を白くするので「,(カンマ)」を使って、同時に指定しましょう。あ、せっかくなので、アンダーラインも消しときましょう。;}これで文字が見えやすくなりましたね。ボタンっぽくなったけど、もっと余白を持たせ見やすくしたい。今度はもっとボタンらしくしましょう。そのためにはボタンにpaddingを付けてやります。余白を空けてボタンらしくなりました。;を入れることで、インラインでありながらブロック要素のような指定ができるようになります。ボタンを横並びに出来る(インライン要素の特色)のに、paddingなどで余白を付けられる(ブロック要素の特色)わけです。これでpaddingを使って上下左右の余白を持たせ、さらにボタンらしくなりました!<a>タグにpaddingを付けることで、paddingの余白部分もクリックできるようになり、ユーザビリティーが向上しました。文字の左側が空きすぎているようですね。これは、元々、アマゾンと楽天のマーク(背景画像として指定されていた)が入っていた分、右に文字をずらしていたようですね。それを解除&調整します。paddingを調節しました。;}これも先ほどのdisplay:inline-block;を入れて、paddingを入れました。好みに寄りますが、いろいろ装飾もしたくなりました。ボタンに装飾(文字の影、ボタンの角丸、ボタンに影)が付きました。2px!important;}ボタン自体に影を付けたいときはこちらのサイトでやると簡単にCSSが取得できます。調子に乗ってさらにグラデーションもしてみたくなった。ボタンにグラデーションがかかりました。カーソルをボタンの上に持ってきてもグラフィックに変化がない。このままでは、ボタンの上にカーソルが来ても変化がないので、クリッカブル(クリックが可能なこと)かどうか分かりません。カーソルがボタンの上に来た時に色が変わるようにしました。カーソルをボタンの上に持ってくると、ボタンの色が変わるようになった。私は完成したやつを改造して使っています。私が使っているやつのコードもカエレバ・ヨメレバ・ポチレバのコード公開ページで紹介しています。こちらもご参考に!勢いでスマホ対応もやっとここういうことは勢いが大切です。勢いに乗っているので、スマホ対応もやっときましょう。後になったらさらに面倒くさいですからね。スマホ対応もしとこう。メディアクエリって?では、今度はスマホバージョンのコーディングです。480ピクセルの画面で見るとデザインが変わるようにします。CSSファイルに直接書くだけで反映される「メディアクエリ」というやつを使います。メディアクエリというのは、ブラウザのサイズによって適応させるCSSを変えるものです。ブラウザのサイズが480ピクセル以下の場合......ということです。;}}メディアクエリのコードは、CSSファイルの中の一番最後にコピペしておくと良いです!スマホ用のCSSが完成(中略)こんな感じで、メディアクエリのカッコの中にCSSを書いていきます。空欄(スペース)は別に空けなくても大丈夫です。見やすいように空けているだけです。;を指定して、別々の「行」にしていること。blockにするとブロック要素として扱われるため、ボタンとボタンが別々の行になります。スマホの狭い画面なので別々の方がみやすいですね。;を付けて、フロートを解除しています。実は数ヶ月前から、カエレバの「Amazon」とか「楽天市場」の文字をボタンにしたかったんです。alt="楽天市場で買う">みたいなイメージタグのコードを一つ一つぶち込んでいくのは面倒くさすぎでした。今までのやつも一気に直らないかなと思い、テキストのボタン化を思いつきました。この文字の内容を「Amazonで購入する」のように変化させるには、背景画像を配置すれば出来ます。画像作るの面倒だし「で購入する」を入れることでコンバージョンに変化はないだろうと思い、やっていません。私が実際に使っているコードも下の記事にて公開していますので、よろしければお使いください。基礎から覚える、深く理解できる。2013-09-20AmazonKindle楽天ブックスHTML+CSSデザイン|基本原則、これだけ。2013-08-01AmazonKindle楽天ブックスパートナーこの記事、おもしろかったわ。ほかに似た記事ないん?ヨス「ブックマークレットのカテゴリ」にあるきん、そっち見てや。この記事が気に入ったらいいねしよう!最新記事をお届けします。オレンジメールプロフィールTwitterFacebook香川県在住。ブログで飯食っているプロブロガー(月間125万PV達成)のヨスです。効率化オタクが講じて、KADOKAWAから書籍も出版しました。英語学習メディア「英語びより」編集長。ブログを本気で書く人のためのオンラインサロン「ヨッセンスクール」を運営。夫婦別姓を実行してて、何度か新聞からも取材を受けてます。ジェンダーや言語学の話になるとうるさい人です。iPadを使い倒してます。