このブログを読み返していて、内容そのものより先に表示のぎこちなさが気になった。見出しの強弱は安定していないし、行間も少し詰まり気味で、表や等幅表示の扱いにも一貫性がない。
読みにくいページは、それだけで読む気を削る。そしてこのサイトはほとんどアクセスがないので、いちばん読むのは自分だ。自分で読みにくいのは困る。
そこで、文章を読み進めやすくするために、記事本文のデザインに手を入れた。
見出しの階層をはっきりさせる
このページは h2, h3, h4 が何段も続く構成になっている。こういう記事では、見出しの差が弱いと、いま読んでいる場所が大きな節なのか、小見出しなのかが分かりにくい。見出しは飾りではなく、読んでいる位置を示すものだ。だから本文より目立つのは当然だし、階層ごとの差も必要になる。
修正は layouts/_default/single.html に入れた。 h1 は大きく中央寄せにし、余計な装飾は外した。 h2 は左罫線と下罫線で節の開始が分かる形にし、 h3 はその一段下の見出しとして下線主体にした。 h4 以降は本文より弱くなりすぎないサイズを保ちつつ、破線の下線で段差だけを残した。強い色を使うより、余白と罫線で階層を見せる方が、このサイトには合っていた。
見出しを直すと、次に本文の詰まり方が気になった。そこで記事本文の p, li, dt, dd, blockquote の行間も少し広げた。本文の読みやすさは、行間を少し調整するだけでもかなり変わる。
表と等幅表示は装飾より機能を優先する
表は一度フラットにしすぎて、情報のまとまりがかえって見えにくくなった。表は文章ではなく構造を読むものなので、セルの境界が必要だ。そこで表の罫線は戻した。ただし背景色で強く塗るのではなく、無彩色寄りの線を基調にして、 th だけごく薄く区別する程度に留めた。これなら表であることは分かるし、ページ全体からも浮かない。
インラインの等幅表示も同じで、箱で囲うとUI部品のように見えすぎるし、単なる等幅フォントだけでは本文に埋もれやすい。最終的には、背景や枠線を外し、等幅フォントの太字で見せる形にした。ただし最初は文字が少し小さく見えたので、本文と同じ 1em に戻している。等幅表示は、コードらしさより、本文の中で見分けやすいことの方が大事だった。
表キャプションも少しずつ調整した。最初はただ近くに置けばよいと思っていたが、それだけでは表と別の要素に見えてしまう。そこで、表キャプションは表の上に置き、表番号も自動で振るようにした。キャプションがある表は figcaption 側で 表 1 のように出し、キャプションがない表は table::before で番号だけ出すようにしている。
その途中で、表キャプションが黒背景になったり、表との距離が変わらなかったり、右端の罫線が二重に見えたりした。原因はどれも、見ていたCSSと実際のHTML構造が少しずつずれていたことだった。表タイトルも caption ではなく figure の中の figcaption で出ていたし、表本体には別のマージンや外枠も付いていた。最終的には、表キャプションは背景なしで表の直上に置き、少しだけ右へ寄せ、表本体の外枠は外してセル罫線だけで外周を表現する形にした。
コードキャプションをちゃんとつなげる
コードブロック自体の配色や行間は比較的すぐ整えられたが、キャプションは少し厄介だった。見た目としては、コードブロックの上にキャプション帯があり、それがひとつの部品として見えてほしい。しかし実際の生成HTMLを確認すると、想定していた構造と違っていた。
最初は figure.highlight のような構造を前提にCSSを書いていたのだが、実際には素の figure の中に div.src や div.highlight が入り、その後ろに figcaption が来る構造だった。つまり、キャプションが出ていないのではなく、書いたCSSが当たっていなかった。こういう問題は、CSSだけ見て考えていると長引く。生成されたHTMLを見て、実際に何が出ているかを確認した方が早い。
さらに、キャプションを上に送るだけでも不十分だった。順序を変えても、コード本体側のラッパーに余白や内側の枠線が残っていると、キャプション帯とコード本体が離れて見える。特に厄介だったのは、シンタックスハイライト付きの .highlight だけでなく、素の .src ブロックも混ざっていたことだ。 .highlight 側はすでに暗い背景に揃っていたのに、 .src 側の pre には既定の余白と明るい背景が残っていて、図だけが水色っぽい箱に見え、キャプションとも分断されていた。
そこで figure の中にある .src, .highlight, .chroma の余白を潰し、内側の枠線や角丸も外したうえで、 .src > pre に残っていた既定マージンと背景も打ち消した。キャプションの先頭には CODE ラベルを付け、帯そのものがコードブロックのタイトルだと分かるようにした。ここでようやく、キャプションとコード本体がひと続きに見えるようになり、コードブロックごとに背景色がぶれる感じも消えた。
最後はHTMLを見ることになる
今回あらためて思ったのは、CSS の調整は感覚の仕事に見えて、実際にはかなり構造に依存しているということだった。見出しの強弱、表の境界線、等幅表示の目立たせ方までは比較的CSSだけで詰められるが、キャプションのように生成器が絡む部分は、最終HTMLを見ないと正しい判断ができない。
Hugo でビルドして、公開ページや生成済みHTMLを確認しながら直していくと、「どのCSSが当たっていないか」と「そもそも期待したタグが出ているか」を分けて考えられる。表示の問題はつい「色を変える」「余白を増やす」といった対処に流れがちだが、必要なのは、読み手がどこで迷うかを構造として見つけることだと思う。
追記。あとから見直すと、全体の縦方向の余白がまだ足りなかった。見出しの前後、段落どうしの間、表やコードブロックの上下が少しずつ詰まっていて、ページ全体が落ち着いて見えなかった。そこで本文の行間をさらに広げ、段落、リスト、表、コードブロック、キャプションの上下余白も少しずつ増やした。大きな見た目の変更ではないが、こういう調整の方が長い文章では効く。
追記。表キャプションを表の近くへ寄せたあと、表の右側に余白が出る場合に罫線が二重に見えることがあった。原因は、表全体の外枠とセル側の罫線が別々に出ていたためだった。そこで表本体の外枠は外し、セルの罫線だけで外周も表現する形にした。見た目はほとんど変わらないが、こういう細かい不整合は長く見ていると気になる。