Blogger

ブログテーマをマテリアルデザイン風にする

BloggerのテーマとしてVaster2を適用し、カスタマイズします。


Vasterはカスタマイズがしやすいらしいことと、シンプルで機能性も良さそうだったので採用しました。これをベースにカスタイマイズを進めます。

その前にVasterに必要な設定を行います。

モバイルテンプレートを切り、feedlyのURLを変更します。簡単です。

Material Design

GoogleのMaterial Design Lite（MDL）を使ってマテリアルデザインっぽい感じにしていきたいです。

まずは公式ページの説明に従って必要なものを設定します。

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

これを<head></head>内に設定します。

続いて効果を適用したい要素のclassを設定すれば、お手軽にマテリアルデザインの雰囲気が味わえます。

例えばclass="mdl-card mdl-shadow--2dp"と設定すればカード効果が適用されます。

このブログの場合、あくまで”風”なのですべて完璧にMaterial Design準拠ではありませんが、徐々に改良を続けていきたいです。

コメント

まだコメントはありません。