ブログをまたリニューアルしました（2019年版）

※リニューアルついでに「AMP配信」をONにしたので、スマホ経由だとそちらが表示される場合があります。一番上のブログアイコンをタップすれば通常版のブログに移動します。

Before

トップページ

詳細ページ

After

トップページ

詳細ページ

経緯みたいなもの

• Twitter新UIの、広い画面の時に余ったスペースをうまく使う感じのレイアウトが好きでそんな感じにしてみたかった
• 最近Nuxt.jsを触ってみたら静的ページの制作がだいぶ楽だったのだけど、はてなブログのテーマ開発も応用できるんじゃないかと思って試したかった
• このブログに関してはメニューが開閉式である必要が全くないなと最近感じててどうにかしたかった

やったこととか

• 汚いリポジトリ https://github.com/rokuzeudon/blog
  • はてなブログのHTML構造をpugで再現したらCSSをどこにどうあてたら良いのかわかりやすくなるかと思って試した
  • scss、pug、autoprefixerとかの導入カンタンで良い
  • 「タイトル下」「フッタ」みたいな設定画面の入力欄をコンポーネント単位で管理（そのままコピペして保存すれば良い）できて良い
  • 実際の表示を擬似的に確認しながらCSS書けて良い
  • ただただHTMLの再現が面倒。思ってた以上にバリエーションあるし途中で諦めた…
• とっちらかっていたカテゴリの整理
• Grid CSS、autoprefixer入れてるし大丈夫やろと適当に書いてたらIE Edgeでも盛大に崩れてしまい、原因調べて少し詳しくなった
• 単位、pxを撲滅した（つもり）。画面幅に応じてちょいちょい全体的に拡大するようにした
• メインビジュアルの背景部分、 ics.mediaさんのぼかし方がきれいだったので参考にした 🙏

終わりに

今後もちびちびとあちこち差し替えていきます！ はてなブログさん、カテゴリーの階層化を公式機能で提供してほしいなと思いました。