このブログのデザインを変えた

このブログはこれまでMilligramというCSSフレームワークを使っていた。これはなぜか紫という微妙につかいづらいカラーがデフォルト設定になっていて、milligram-themesを追加し、さらに自分の好みに合うよう細々と調整してきた。

今回の更新ではmilligram.cssとそのテーマと自分で書いたスタイルシートをいったん全て除却し、最近はやり始めているような気配がなくもないSimple.cssに乗り換えた。milligramはすでに更新されておらず、たとえばDarkモードに対応していないとか変数がexportされてないので変更したい箇所を上書きして回らないといけないとかの2022年ぽくない微妙に気になるポイントがあった。とはいえそんなところは細かいし、自分自身使ってないDarkモードに対応する必要に迫られたわけでもない。でもまぁ自分のサイトはたまにオーバーホールしてあげたくなるものだ。

CSSフレームワークを変更するついでにいろいろまとめて修正した。まず記事タイトルのH1要素とMarkdownのレンダリング結果に含まれるH1要素が同時に存在しないよう、後者を自動的にH2やH3になるようにHugoのショートコード機能でレベルを調整した。

<h{{ add .Level 1 }}>{{ .Text | safeHTML }}</h{{ add .Level 1 }}>

レベルを変えたい量だけ1なり2なり足してあげればよい。実のところこれまでアンチパターンとされていた複数H1要素については、現在ではSEO的な観点からは一つのページに複数個あってもよいらしい（参考）。しかし個人的には気分的にはH1要素はタイトルだけに使いたいし、今後サイトジェネレーターを変更したときにmdファイルを使い回せるようにできるだけ標準的なMarkdownの書き方にしておきたい。つまり意味もなく##とか###をmdファイルの中で意識して使いたくはない。ずっと気になっていた点だった。

次に画像の配置指定に画像のaltを使うのをやめた。これはaltの最悪の使い方だったのでなくせてよかった。画像を右に置きたいなと思ったときにaltにrightとかつけていた。本当に最悪だなとはずっと思っていたが、しかし標準的なMarkdownでは画像にクラス名を付加する記法が存在しない。苦肉の策だった。この機会にこれに類する画像配置をすべてやめた。ただテキストの間に100%-widthで画像が置かれるだけにした。画像のアスペクト比によらず、常にウィンドウサイズに収まるよう、max-heightに90vhという値を設定するのみとした。作り直してみると案外しっくりくる。画像を回り込ませるfloatは今思えば不要だった。

そして不要になったスタイルシートを全て削除した。大体145行削除して45行の追加、現在は90行ほどになっている。その場その場でいじくり回してきたスタイルシートのさして使わない記述を一掃できてよかった。この手のカオスはVimとかshellの設定ファイルにも同じことが言える。数年に一回全て削除して必要なものだけ残るようにゼロから作り直したくなる。なんでだろうね。