これまでこのサイトのWordPressのテーマにはBootstrapを使っていたのですが、今回はMaterial Design Liteというフレームワークを使って、テーマを作成してみました。
※2015年9月現在、私のサイトでは動作がおかしくなるのが気になったため、Material Design Liteを使うのをやめてしまいました。
Material Design Liteとは
Material Design LiteはGoogleが公開している、お手軽にマテリアルデザインを扱うことができるフレームワークです。
Bootstrapと同じようにグリッドシステムやボタンなどのパーツが揃っています。
ですが、Bootstrapにはあったパンくずリストやページネーションといったあたりはないので、より簡素的なものになっています。
Material Design Liteを使ってみた理由
ここではなぜ私が、Material Design Liteを使ってみたかったかということを書いていきます。
コードサイズが小さい
約27キロバイトとBootstrapよりもかなり軽量だということ。
おしゃれ！
なんといってもこれがいちばんの理由です！
サイトの各部品を見ていたのですが、どれもおしゃれで使ってみたくなりました。
特にいちばんやりたかったが、ボタンのエフェクトです。
クリックすると、波紋のように広がっていくエフェクトがかっこいいですよね。
クリックする位置によって動作がかわるところも素敵です。
ネットで調べれば、やり方も載っているのでしょうが、Googleのが公式で使えるならそっちを使いたいよね～ってことで選びました。
Material Design Liteを使ってみて
ここからはMaterial Design Liteを、WordPressのテーマに組み込んでいったときのお話です。
情報が少ない
有名なBootstrapだとネットや本でも情報が載っていますが、Material Design Liteについての情報はまだ少ないようです。
調べていても、Material Design Liteを使っている人も少ない気がします。
あまり情報が載ってないので、Material Design Liteのサイトからコードを調べてたのですが、全部英語…
Material Design Liteはシンプルなほうだとは思いますが、英語が大の苦手な私にとっては、これでも理解するのに時間がかかるし、しんどいです。
ニュースでもやってますけど、技術者が足りない理由って英語が分からないからというのが一番大きいのでは？
うまくいかないことだらけ
私の技術不足なだけかもしれませんが、Material Design Liteを使ってあれこれやろうとしてみたんですけど、うまくいかないことが多かったです。
スクロール関係がうまくできない
LINEブログの関連記事のように、スマホ画面だと横スクロールできるようにさせたいと思い、overflow-x: auto;を記述してみたのですが、私のスマホでみるとうまくいかない…
パソコンのブラウザを小さくしてみると、ちゃんと横スクロール画面が出てくるし、スマホでも読み込んでる途中までは横スクロールできてるみたいなので、Material Design Liteの何かが悪さしてるはずだと思います。
でもどうやったら解決できるか、今の私にはまったくわからない…
あとフロントページでスクロールすると、要素が動いてアニメーションするようにさせたくて、WOW.jsを使ってみたのですがそれもうまくいかない…
私のサイトにこれまであった、トップに戻るボタンもうまくなりませんでした…
試行錯誤しても全然うまくならないから、Material Design Liteのことがちょっと嫌いになりましたよ。
でもかっこいい
Material Design Liteのスクロールうまくいかないんだって
もぅ 全然わかんないよね
いいよね！（by レ○クのCMより）
いろいろと文句もありますが、それでも実装してみればかっこいい！
私はこれまでテーマは毎回自作しているのですが、今まででいちばんおしゃれ～なサイトになってるんじゃないかな？
正直、自作でテーマなんか作るより、すでに提供されているテーマを利用したほうが時間も労力もかからず楽だと思います。
Material Design Liteを使っているテーマもあります。
まぁ、私はもともとHTML&CSSの勉強するためにWordPressをはじめたようなものですし、自分で作ってるほうが楽しいですからね。
今回は、Material Design LiteのソースをWordPressに合わせるのにも苦戦しまして、カスタムメニューなど使わず主に直書きになってるのが情けないですが、とりあえずちゃんとなっていればオッケーでしょ（笑）
最後にひとこと
多少の問題もありましたが、使い方次第ではおしゃれでかっこいいサイトをお手軽につくれるので、ぜひ試してみてください。