Material Design LiteかBootstrapか...Bloggerのサイトを作る上でどちらが良さそうなのか感想少しだけメモしておきます．
BloggerのテンプレートをなんとかMatrial DesignにしてやろうとMaterial Design Liteを使いながら必死に対応させてみたのが前回でした．
Bloggerテンプレートを更新しました - Material Design Liteを導入
年末の休みを利用してちょろちょろっと作ってみただけでしたので，SEOもへったくれもなく，Bloggerの文法もよく知らないためコンポーネントが表示されたりされなかったりと，中途半端な作りになってしまっていました．なので結局テンプレートの自作は諦め，ThemeForestで利用可能なMagOneを適用して日本語に対応するためにCSSを少しだけ書き換えて終わっていました．
で，前回はフリーテンプレートからの乗り換えとして，MDLを使ったテンプレートの自作に挑戦したものの，調べるうちにMDLの欠点(当時の)が浮き彫りになってしまい，できることとできないことがはっきりしてくる結果に．そして頓挫．Material Design Liteそのものに関してみると，フレームワークとして非常に簡単で初心者の私でも扱えたくらいだったのですが，如何せんjQueryが動いたり動かないという点が個人的に気になりました．
今回は有料テンプレートを放棄してなんとか納得の行くテンプレートを自作してみようとBootstrapでテンプレートを作ってみることにしました．
基本的にはMaterial Design Liteと同じ，というかMDLが似せている感じなのだと思うのですが，そこまで困ることなく導入することができたように考えています．
基本的にはFlexboxですから，CSSだけで書けなくもないのでしょうけれど，ブログでやるには正直面倒です．CSSにGridのシステムが組み込まれるようなので，そうなってきたら使ってみてもいいのかもしれませんが．
デザインや細かいパーツはPHOTOSHOP.VIPを参考にしていますが，基本的にはBootstrapのデフォルトCSSから変えていないと思います．個人的にそこまで2カラムのデザインが馴染まなかったことから，メインの記事を1カラムに出来たのは良かったと思います．
一通り完成させてみるとBloggerとWordpressの自由度の差を感じ，なかなかできないことも多いのではないかと考えています．次に気が向いたらWordpressも視野に入れてもいいかなという気はしますが，また別のハードルが高そうなので，いつになることやら...
そんな中で素敵デザインのテンプレートを作っている人たちには感服してしまいますね．
Bloggerテンプレートを更新しました - Material Design Liteを導入
年末の休みを利用してちょろちょろっと作ってみただけでしたので，SEOもへったくれもなく，Bloggerの文法もよく知らないためコンポーネントが表示されたりされなかったりと，中途半端な作りになってしまっていました．なので結局テンプレートの自作は諦め，ThemeForestで利用可能なMagOneを適用して日本語に対応するためにCSSを少しだけ書き換えて終わっていました．
Blogger向きのフレームワーク
Material Design Lite
MDLを使ったデザインのデモサイトは一応残っていますので，BloggerとMaterial Design Liteの組み合わせでの挙動を見てみたい人はこちらより確認できると思います(デザインのダサさは触れないで下さいネ)．ThemeForestは流石というべきか，色々なデザインで高機能なテンプレートが沢山あるのですが，そもそも高い上に当然日本語対応していないことから，微調整しているうちに”お金を出す割に苦労が結構あるな”という気がしていました．またテンプレートは作者が細かくアップデートしていきますから，その度にCSSを微調節して日本語対応させるというのはなかなか辛いものがあります．
今回は有料テンプレートを放棄してなんとか納得の行くテンプレートを自作してみようとBootstrapでテンプレートを作ってみることにしました．
Twitter Bootstrap
Bootstrapに関しての話はしませんが，他にもフレームワークがある中で選んだのはコンポーネントも充実していますし，jQueryも使えそうということから，大抵のウィジットを追加しても動くだろという考えに基づいています．
基本的にはMaterial Design Liteと同じ，というかMDLが似せている感じなのだと思うのですが，そこまで困ることなく導入することができたように考えています．
MDLとの違い
Googleの信者，そしてBloggerを使っているということであればMDLを使えるようにしておくというのも一つの手だと思うのですが，まだ開発が始まったばかりということもありますし，説明が充実していないなぁと感じました．その点Bootstrapは参考になる情報も充実しています．そう考えると私のような初心者にはまずBootstrapから入るべきだったのだろうなと感じます．プロのデザイナーの人からすれば使いづらいのでしょうが，Gridデザインのためだけに導入しているようなものなのでコンポーネントは追加のようなものと捉えて，後々書き換えていければ十分ですね．基本的にはFlexboxですから，CSSだけで書けなくもないのでしょうけれど，ブログでやるには正直面倒です．CSSにGridのシステムが組み込まれるようなので，そうなってきたら使ってみてもいいのかもしれませんが．
BloggerでBootstrap
導入にあたって，一つだけ言えることは0から書いたほうがいいということです．既存のテンプレートを対応させていくのではなく，まっさらなテンプレート，HTMLから作ったほうがコンポーネントを仕込みやすいように感じました．<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' lang='ja' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:gr='http://gree.jp/ns' xmlns:mixi='http://mixi-platform.com/ns#' xmlns:og='http://ogp.me/ns#'>
<head>
<meta charset='utf-8'/>
<meta content='IE=edge' http-equiv='X-UA-Compatible'/>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<b:skin><![CDATA[
]]></b:skin>
</head>
<body>
<b:section id='header' showaddelement='yes'/>
<b:section class='main' id='main' name='Main' showaddelement='yes'/>
<b:section class='blog-footer' id='footer'/>
</body>
</html>
こんな感じのものをベースとして，あとは好きなコンポーネントをBloggerから足してはWidget-contentsを<div class='好みのグリッド幅'>で囲って上げていくだけです．今風のデザインにしたいけれど...
今回自作したきっかけは細かな調節をしやすいようにというものでしたが，作っていくうちに無い物ねだりというか，色々とやりたいことが出てきてしまって結構時間がかかる上に，そういったものを追加していくとどんどん冗長になっていくという．Webデザインって難しいですね．デザインや細かいパーツはPHOTOSHOP.VIPを参考にしていますが，基本的にはBootstrapのデフォルトCSSから変えていないと思います．個人的にそこまで2カラムのデザインが馴染まなかったことから，メインの記事を1カラムに出来たのは良かったと思います．
一通り完成させてみるとBloggerとWordpressの自由度の差を感じ，なかなかできないことも多いのではないかと考えています．次に気が向いたらWordpressも視野に入れてもいいかなという気はしますが，また別のハードルが高そうなので，いつになることやら...
そんな中で素敵デザインのテンプレートを作っている人たちには感服してしまいますね．
