毎年恒例になりつつあるブログのリニューアルを今年もやりました。
変更したところ
Next.js 15へ
Next.js を14から15に上げました。App Router の導入のような大きなことは特になかったのでコードはあまり変わっていません。
デザイン
全体的に変えてみました。
色などは以前からもちょいちょい変えていましたが、カードスタイルの記事リンクをツリースタイルにするなど、このブログを作成してからずっと変えてなかった部分も変えてみました。
色
背景を濃い黒に、プライマリカラーを濃い青に変えてみました。
以前は灰色とピンク色でしたが、灰色はコントラストの関係で見えづらく、ピンク色は赤系統の色がデザイン上使いづらく変えることにしました。ピンク色は好みなのでいずれうまくサイトのデザインと調和させたい。
記事へのリンク
冒頭で少し触れましたが、ブログ記事リンクのデザインも変えました。以前はカード状のデザインでしたが、MUI の Timeline コンポーネントを使用してツリー状にしました。公開年での分類もできて結構気に入っています。
記事ページ
記事のリンクだけではなくページ自体も変えました。本文自体は Markdown から変換したものを埋め込んでいるため、デザインや構造にほとんど変わりはありませんが、記事下部や上部の情報のデザインは大きく変わっています。
Gitベースな履歴機能
前から Git の履歴をそのまま記事の更新履歴にすることは考えていましたが、他の方のブログで同じ発想を見かけてやはりいいなと思ったので実装してみました。スクリプトが有効になっていればページ下部の折りたたみから履歴を閲覧できる他、上部の履歴リンクなどから履歴ページへ飛ぶこともできます。
Aboutページ
私自身についての情報を載せるページを作ってみました。と言っても載せたいことはほとんどなくて、CSS の animation で遊ぶために作ったというのが理由です。😁
404ページ
リニューアルするにあたって、作業が軽量な上に404ページは遊びやすいので、いの一番作ってたページです。いくつか遊び要素が隠れているので気になる方は実際に見てみてください。
/konna-page-naiyo
感想
この記事を執筆時点でまだ TODO な部分が残っていますが、リニューアルを完走した感想としては、以前のデザインも考えてベストを作成したはずなのになぜこうもデザインが変わってしまうのだろうという気持ちがあります。一応スクリプトなしでも崩れないようにしたり、アクセシビリティに考慮したりなど最低限のことは前からやっているので、変わっているのは年々変わる好みの部分なんでしょうね。