ブログのアップデート

2024年の年末年始の時間を使ってブログを少しアップデートしました。
主な更新内容と、変更の背景について簡単にまとめます。

レイアウトを2カラムに変更

1カラムから2カラムのレイアウトに変更しました。

理由はいくつかあるのですが、一番の理由は目次をサイドバーに表示したかったためでした。この詳細については後述します。

また、表示はしたいけど本文と関係が薄い要素はメインカラムから取り除いて読みやすくしたく、そういったものをサイドバー側のカラムに逃がせるようになりました。

もともと本文の先頭に埋め込んでいた目次をサイドバーに表示するようにしました。

目次は必須と考えているのですが、1カラムと目次の相性があまり良くないです。本文が長いと目次で幅を取ってしまったり、ある程度読み進めたあとでは目次で現在地の確認がしづらかったり..というのがあると思います。

サイドバーに表示しただけでは現在地の問題は解消しないので、下にスクロールした場合は固定表示するようにしました。これは Qiita や zenn でも取り入れられており、いいなと思っている動きだったので参考にしています。

目次は固定表示される

コンテンツの余白、行間、字間など、全体的に以前よりも余裕を持たせました。
CSS で表現すると、 margin, padding, line-height, letter-spacing のことです。

これには深い理由はありませんが、日々目にするブログで自分自身が読みやすくいいなと思ったサイトは大抵大きめの余白を取っていたのがきっかけでした。実際 CSS で調整しながら検証していたのですが読みやすくなったと感じています。

スクロールが増えるのはデメリットですが、それよりも視認性を重視することにしました。

もともと游ゴシック体を使っていたのですが、Noto Sans JP に変更しました。

完全に個人の感覚ですが、游ゴシックよりも Noto Sans JP の方が視認性が高いと感じたので取り入れました。

これまで開発してきた作品・プロダクトを載せる worksページを作りました。
一旦は、もともと profileページに載せていた作品に関する情報を移動しただけではあります。

想いとしては、この works ページに載せられる作品をもっと作っていきたい、というのがあります。2024年にどれだけ update できるだろうか..!

本ブログには広告を設置していますが、もともとは自動広告設定で使用していました。自動広告は設定が楽なのは良いのですが、かなり読みづらい位置に広告が表示されることもあります。

読みやすさを考えるなら広告自体消すべきではあるのですが、自身のブログでどれだけ広告収入が得られるかというのも検証してみたい気持ちがあり、ジレンマを抱えながらではありますが、表示位置や表示件数を制御するようにしました。

Buy me a coffee という、いわゆる投げ銭サービスのリンクを記事の末尾にお試しで追加しました。

投げ銭してもらえるとは全然思っていないのですが、投げ銭したいと思ってもらえるような記事を書くモチベーションになるといいなというところです。あとは単純に Buy me a coffee のロゴやボタンのデザインがおしゃれで気に入っちゃいました。

ここに載せられなかった細かい改善もいくつか追加しています。年末年始でこれに夢中になって 70 commit くらい追加していました。

今後も読み手にとっての読みやすさを大事にしつつ、かつ自分も記事を書きたくなるように、趣味・センスをふんだんに盛り込んだブログに更新していこう。