Bloggerテンプレートを更新しました - Material Design Liteを導入

そうでなくとも録に更新しないブログなのにもかかわらず，最近更に更新が滞っていましたが，その訳について． 詳しいことはまた別途にチョロチョロ書いていくかもしれません． Blogger Templates BloggerはTemplateで簡単にデザインを変えることができるのも...

そうでなくとも録に更新しないブログなのにもかかわらず，最近更に更新が滞っていましたが，その訳について． 詳しいことはまた別途にチョロチョロ書いていくかもしれません．

Blogger Templates

BloggerはTemplateで簡単にデザインを変えることができるのも魅力の一つかと思いますが，実際のところなかなか見つかりません．幾つかのテンプレートを導入，調節を繰り返してきましたがどうにもしっくりこず．よさ気と思って使っていたものもよく見るとガバガバな部分があり．特に問題になるのがレスポンシブ周りで，非常に難しい．逆にGoogleが作ってくれている動的ビューはレスポンシブに関してはいいのですが，デザインがイマイチ．

私の調節不足もあるのでしょうが海外産サードパーティ製のテンプレートはどうにも調節が面倒な部分も多く，それならいっそ自分で作ってみようということでやってみました．丁度ホリデーシーズンということもあり時間があったので，ここ数日は記事そっちのけでCSSとHTMLを睨み続けていた訳になります．

Introducing Material Design Lite to Blogger

正直なところ，フラットデザインとマテリアルデザイン，メトロUIの違いは未だによく分かっていません．が，兎に角Google謹製ですし，ブログサービスもGoogle製．ならば使わない手はないだろうということでガイドを読んでみることにしました．

Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. Get started now.

from MATERIAL DESIGN LITE

私のようなニワカWeb初心者が手を出すものでもなかったなと思いますが，上記のGoogleによるガイドは非常にステップバイステップで分かりやすかっ たです．ボタン一つ取ってみてもボタンの設置から始まり，デザイン，修飾，効果など色々と書かれています．一応形になったのはこのガイドのおかげかなと 思っています．ついでに参考サイトを覚書程度に残していきます．

• のんびりポタ・ランニング
• iPrime Blogger Template
• material-design-lite
• Neue
• Android：マテリアルデザイン対応を効率的に進めるためにSupport Libraryを積極的に使ってみる
• materialup
• Liruu Design
• 【動きが素敵！】マテリアルデザインをよく理解できるUIデザインまとめ
• 2016年を先取り！コピペで学ぶ HTML/CSS スニペット60個まとめ
• Materialize - マテリアルデザインのためのCSSフレームワーク

実際はもうちょっと見ていますが，大体こんなところです．

マテリアルデザインをBloggerで使う

本来サイドバーは永遠に縦一列ではなく，Gridに従ってカードごとのサイズが調節されるようなデザインにしたかったのですが，BloggerのWidgetの仕組身を理解する前に大枠を作ってしまったため，結局ガバガバになるという．問題となっているJqueryも動いていたり動いていなかったり．関連ポストのWidgetも導入したかったのですが，動いてくれません．実際これに割いた時間が多いですね．

何故かTimestampにはtext-decorationのようなdot borderが入ったりと，Bloggerならではの記述によりMDLが使いづらいなと感じたこともあるので，ココらへんはGoogleの対応待ちといったところなんですかね．公式テンプレート出してくれないかなぁ．