Webサイトのデザインの改修

このWebサイトは伝えたい本題と関係ない余計な要素を排したシンプルでかつ見やすさにもある程度配慮したデザインとしたいと思っていてCSSや静的サイトジェネレータのテンプレートを試行錯誤で修正しているが、今日思いついた修正で今まで気にいっていなかった部分が少し改善できたように思う。

改修点

見やすさを考えて見出し１～６を少しずつ幅を変えて字下げしていたが、頻繁に異なる字下げ幅の行が出てくることで、逆に見づらく散漫な印象になっていた。

→ 見出しは字下げで本文と区別するのではなくMarkdownのように行頭に#をつけて区別するようにした。不要な字下げによる視線の移動が減って読むストレスが減ったように思う。また、字下げの空間がなくテキストの密度が高くなったことで「smol web」らしさが出た気がする。

テキストベースの「smol web」らしさが出る気がしたので変えてみた。

表示中のページと対応するリンクの色を変え、行頭に記号を挿入して今どのページを見ているかわかるようにした。

CSSのリンクの末尾にCSSファイルから生成したハッシュコードをつけることで、CSSが変わったタイミングでブラウザのキャッシュがクリアされるようにした。

目次であることがわかりにくかったので一目でわかるようにした。