Materialize（マテリアライズ）とは？Googleのマテリアルデザインをブログに実装する方法
本ページはプロモーションが含まれています
マテリアルデザイン。ブログをやっている方なら一度は耳にしたことがあるかと思いますが、Googleが提唱するデザインのガイドラインです。このマテリアルデザインを自分でつくろうと思うと非常に骨が折れるのですが、実は簡単にWEBに実装できる[Materialize]というフレームワークがあります。特定のタグをブログに追加することで簡単に実装することができますので、紹介したいと思います。（もちろんBloggerでも実装可能です）
マテリアルデザインとは
リンク：Material Design
こちらのリンクにGoogleの公式のドキュメントがあります。デザインのガイドラインが厳格に決まっていまして、これに則ることで始めてマテリアルデザインと呼べます。
Materializeとは
MaterializeはマテリアルデザインをCSSフレームワークに落とし込んでくれたもので、ガイドに沿ってclass属性を変えるだけで簡単にマテリアルデザインに変更することができます。イメージ的にはGoogle版Bootstrapと思っても良いかもしれません。
リンク：Materialize
Materializeをブログに実装するためには
MaterializeをBloggerに実装するのは非常に簡単です。CDNサーバにアップされているcss、jsを参照するようにhead内にタグを追加してあげるだけなので、一瞬で終わります。以下のリンクよりタグを確認してください。
リンク：Materialize（CDN）
公式サイトのCDNを参照してください
Materializeを実装するとどんなことができるの
とにかく、実装するとどんな感じになるかを知りたい方が多いかと思いますので、before after形式で差分をご確認いただければと思います。テストブログでトライしてみました。細かい部分は調整していませんがざっくりこんなことができるんだと思っていただけたら幸いです。なおテストにはQooQというテンプレートを使ってみました。このブログでも愛用しているおしゃれなテンプレートです
Materialize実装前デモ（before）
Materialize実装後デモ（after）
【変更点】
・ラベルのclass属性を[waves-effect waves-light btn]に変更
・記事部分のclass属性を[card]に変更
変更する方法ですが、自分はコンポーネントを参照して変更しました。
これだけでマテリアルデザインっぽく変更できます。普段利用されているテンプレートにMaterializeを実装してみたい方はコンポーネントからコピペするような作業イメージになりますので、トライしてみてください。結構簡単です。
まとめ
今回は、マテリアルデザインのCSSフレームワークの「Materialize」をご紹介しました。Bloggerでも実装可能なのでブログを自分好みにカスタマイズしたいけれどもスキルが無いから難しいなーと思っていた方にはおすすめです。HTMLやCSSの勉強にもなりますのでぜひトライしてみてくださいね。
