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.
私のようなニワカWeb初心者が手を出すものでもなかったなと思いますが,上記のGoogleによるガイドは非常にステップバイステップで分かりやすかっ たです.ボタン一つ取ってみてもボタンの設置から始まり,デザイン,修飾,効果など色々と書かれています.一応形になったのはこのガイドのおかげかなと 思っています.ついでに参考サイトを覚書程度に残していきます.
実際はもうちょっと見ていますが,大体こんなところです.

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

本来サイドバーは永遠に縦一列ではなく,Gridに従ってカードごとのサイズが調節されるようなデザインにしたかったのですが,BloggerのWidgetの仕組身を理解する前に大枠を作ってしまったため,結局ガバガバになるという.問題となっているJqueryも動いていたり動いていなかったり.関連ポストのWidgetも導入したかったのですが,動いてくれません.実際これに割いた時間が多いですね.
何故かTimestampにはtext-decorationのようなdot borderが入ったりと,Bloggerならではの記述によりMDLが使いづらいなと感じたこともあるので,ココらへんはGoogleの対応待ちといったところなんですかね.公式テンプレート出してくれないかなぁ.

/fa-pen/ 最新レビュー$type=one$count=1$va=0

名前

1日1時間,2,AMD,6,AMPLIFIER,3,anime,1,APPLE,6,AR,1,astroneer,2,AUDIO,3,BLOG,58,BOOK,2,C9,5,Cloud9,7,College,1,CREATIVE,3,DAC,3,EARPHONE,6,eSports,15,FF14,4,GAME,20,GARUPAN,1,GRAPHIC,19,GUIDES,10,HARDWARE,13,HEADPHONE,6,HEADSET,11,HRADWARE,4,KEYBOARD,12,LOGICOOL,16,LoL,57,MADCATZ,1,MEMORY,3,MICE,33,MICROPHONE,5,MONITOR,14,NVIDIA,6,PC,18,Pokemon,2,RAZER,18,REVIEW,46,RIOT,6,ROCCAT,2,Sennheiser,1,Software,3,SONY,1,SOUND BOARD,3,SOUND DEVICE,24,SPEAKER,4,STEAM,6,steelseries,1,TOPIC,115,VR,10,WCS,9,ガルパンはいいぞ,4,グルメ,1,ボードゲーム,1,ボドゲ,1,レビュー,4,旅行,10,
ltr
item
orz.game: Bloggerテンプレートを更新しました - Material Design Liteを導入
Bloggerテンプレートを更新しました - Material Design Liteを導入
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuaeodVrSLHIbvjDwfoBk7rw1qu6jYJR6J7tndvHdVxEPNN4Y8weR67BvzpeHcM3t3PCPgDDC4o4SJNwYOboEN6E0LXkHTWheC_LGF8I31iGlxDXlL-Pcr2MhqacAGyq2a3PAGsh_BMHk/s320/20151230-141912.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuaeodVrSLHIbvjDwfoBk7rw1qu6jYJR6J7tndvHdVxEPNN4Y8weR67BvzpeHcM3t3PCPgDDC4o4SJNwYOboEN6E0LXkHTWheC_LGF8I31iGlxDXlL-Pcr2MhqacAGyq2a3PAGsh_BMHk/s72-c/20151230-141912.jpg
orz.game
https://www.orz-game.com/2015/12/blogger-material-design-lite.html
https://www.orz-game.com/
https://www.orz-game.com/
https://www.orz-game.com/2015/12/blogger-material-design-lite.html
true
2740673184706068303
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content