このブログ(Notion Blog)のデザインを変更した

📆November 23, 2020🔖 Notion Blog

久しぶりにこのブログ(Next.js / Notion Blog)のデザインを変更しました。主な変更点としては以下。

  • 中央寄せのレイアウトだったものを左寄せに
  • 見出しの文言を微調整(英語から日本語に)
  • フォントサイズの微調整
  • デザイン変更前のブログ
    デザイン変更前のブログ
    デザイン変更後のブログ
    デザイン変更後のブログ

    実装面

    デフォルトで入っていた CSS module を使って実装しています。

    Built-In CSS Support

    コンポーネントごとにスコープを狭めて実装できるのが便利です。ヘルパークラスで位置を規定 + コンポーネントごとでスタイルを当てるというのが好みです(Vue.js に書き味が近いです)

    今後

    完全に自己満足のプロジェクトなので、ちまちまとデザイン修正をしていきたいと思っています。人に見せるコードじゃないというのもあって、場当たり的なコードが増えてきてしまった感があるので、そろそろがっつりとリファクタをしたい。以下やりたいこと。

  • SCSS 導入(そもそも入れてなかった)
  • ヘルパー系を SCSS でいい感じにまとめる
  • 使用してないスタイルの削除