ブログを作る④ - サイトデザインを決める

全体的にスタイルを調整し、サイト名とナビゲーションリンクをヘッダーとして追加した。

Tailwind CSSを使っている。

フォントサイズは14pxで、標準より少し小さめだろうか。

お洒落さよりも読みやすさを重視していく方針なので、それでいくと16px以上にした方が間違いなく読みやすいのだけれど、文字の主張が強くなると内容の主張まで強くなってしまう気がしたため、控えめに14pxにした。
同様の理由でフォントカラーも少しグレーに傾けている。

行間は少し広めになるようline-heightを設定した。
そのほか、font-feature-settingsによる字詰めを行っている。
字詰めにより、若干詰まりすぎている印象になったのでletter-spacingで少し調整した。

r7kamuraさんのアイデアを真似して、title属性をキャプション用のテキストデータとして流用している。

Markdownで![画像のalt属性](https://example.jpg "画像のtitle属性")のように記述すると、画像の下に"画像のtitle属性"という文字列がキャプションとして挿入される。

リンクにカーソルを合わせると不透明度が70%になるようにCSSをつけた。

ちょっとしたことだが、アクション可能な要素にこういったインタラクションがないと、無機質でのっぺりした印象になってしまう。
カーソルを指差しアイコンにするのが代表的な作法だろうか。
その他、Webは「クリックできるもの」「クリックできないもの」の違いを表現する創意工夫に溢れている。
そういったものに触れ合ったとき、Webに愛おしさを感じたりする。