「はてなブログを今風のWEBデザインにしてみたい！
でもCSSとかはよく分からないから無闇に触れない……」
と悩んでいませんか？
この記事では、はてなブログテーマのZENO-TEALを、コピペでサクッと簡単に今風デザインにできるCSSを公開しています！
当ブログで使っているCSSですので、なんとなく今風なデザインになっているかと思います。
Googleが推奨している「マテリアルデザイン」を解説しつつ、マテリアルデザインっぽく見せるCSSを公開しています。
この記事を読み終われば、「マテリアルデザイン」とは何かが分かって、かつブログにデザインを取り入れることができます！
マテリアルデザインとは？
マテリアルデザインとは、Google社が推奨しているデザインの考え方です。
マテリアルは直訳で「物質的な」「具体的な」という意味で、ユーザーが感覚的に操作を理解できることを目的としています。
マテリアルデザインの特徴として、以下が挙げられます。
現実の物理法則を取り込む
マテリアルデザインは、「紙」と「インク」の表現で形成されています。
現実世界で紙を重ねて貼り付けると厚みが出て、影ができますよね。
これと同じように、マテリアルデザインも各要素に影をつけることで、立体的に見せます。
連続性のある動き
マテリアルデザインでは、ユーザーが直感的に操作が分かるように動き＝アニメーションをつけることを定義づけています。
例えば、ボタンを押そうとした（ホバー）時は、影が濃くなって浮かび上がったりすれば、「あ！このボタン押せるんだ」と何となくわかりますよね。
この何となくわかる、が重要です。ユーザーの動きに合わせて画面の要素が変わることで、ユーザーが次に何をすればいいのかを分かりやすくします。
マテリアルデザインを使う
上では軽く説明しましたが、本来マテリアルデザインはルールが厳密に決まっており、全て準拠するのはかなり大変です。
なので、マテリアルデザイン「っぽく」見える、くらいに留めたCSSを作成してみました＾＾；
（全部変えるのが大変で諦めたとかそんなことは決してないです。ええ。）
はてなブログであれば、以下の手順でカスタマイズできるので、ぜひ使ってみてください！
1. はてなブログのブログ管理画面 > デザインを選択
2. レンチマーク > デザインCSSをクリック
3. 以下のCSSを貼り付け
/* マテリアルデザイン対応 ここから */ .hatena-module-title, .entry-content h2, .hatena-fotolife, #blog-title { box-shadow: 0 2px 5px rgba(0,0,0,0.12) } /* TOPページの記事一覧 */ .page-index .entry { box-shadow: 0 1px 1px rgba(0,0,0,0.12) } .pager-next, .pager-prev, .entry-categories { display: block; transition: .3s; box-shadow: 0 2px 2px 0 rgba(0,0,0,.12); } .pager-next, .pager-prev, .entry-categories:hover { box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2); } /* マテリアルデザイン対応 ここまで */
まとめ
他にもデザインCSSを追加している場合、上のCSSを入れることで謎の動きをし始めるかもしれません。
もしも何かありましたら、コメントを残してください！
