当 blog は 静的サイトジェネレータの Hugo によって運用している．

テーマは長らく Xzya/hugo-bootstrap だ
(デモサイト)．

しかし，目立つ青が随所に散らばるテーマであることなど，イマイチ読み難いように感じていた．

いつの間にか Bootstrap の更新なんかも入っていたのと，最近 HTML+CSS 関連の本を読んで雰囲気分かった気になったこともあり¹，テーマを最新版に更新しつつ様々な不満を解決することにした．

またオレオレテーマと本家の差分を追いやすいよう，テーマを git submodule で管理することにした．

全体

色調の変更

ヘッダやリンクの色調を青色
(#007bff)
から灰色
(#007bff)
に変更した．

チカチカしなくていいと思う．

navbar

幅をコンテンツ ± サイドバーに合わせた

以前は左右いっぱいに使っていた．

これは間延びした印象を与える上に目線の動きが無駄にデカい．

サイドバーがコンテンツ右側に表示される時は
navbar の幅 = コンテンツ+サイドバーの幅にした．

スマホなどでサイドバーがコンテンツ下側に表示される時は
navbar の幅 = コンテンツの幅にした．

ホーム

情報量を制限

• タグを非表示
• サマリーは YAML で与えた場合のみ表示
• 続きを読むボタン廃止

マージンの調整

過去のミスでサイドバーと記事一覧の開始位置が揃っていなかったので修正した．

記事

最下部に挿入されていた「See also」をサイドバーに移動

「See also」を目立つところに移すことで，閲覧中の記事に求めていた情報がなくても，別記事にあればページを閉じる前に辿りつける可能性が上がることを期待している．

マージンの調整

ホームと同じくサイドバーと本文の開始位置が揃っていなかったので修正した．

行間の調整

読み易さを意識して 1.5rem から 1.8rem に変更した．

サイドバー

内容をページの種別に応じて変更

従来はページに寄らず以下の内容をサイドバーに表示していた．

• SNS ボタン
• 新記事5件
• カテゴリ一覧
• タグ一覧
• プライバシーポリシーへのリンク
• 問い合わせフォームへのリンク

しかし，以下の問題をかかえていた．

• ホーム画面では記事一覧をコンテンツとして載せているので，サイドバーに表示すると冗長
• カテゴリ・タグは際限なく増えて情報として機能しなくなる
  • カテゴリは増やし過ぎないようにしていたが，タグは適当に付けまくっていた
• プライバシーポリシーはホームに表示しておけば十分
• 問い合わせフォームは Netlify Forms の機能を試しているが，なんか機能していない

そこで，サイドバーの内容をページの種別に応じて変えることにした．

というわけでできたのが以下．

ホームのサイドバー

• SNS ボタン
• カテゴリ一覧
• プライバシーポリシー

記事のサイドバー

• SNS ボタン
• See also

リンクの色をグレーに

記事ではリンクの色に深めの青色 (#0056b3) を採用したが，これと同色のリンクをサイドバーに用いると，目移りする可能性を感じた．

そこで，灰色 (#6c757d) を採用した．

SNSボタンに Simple を採用

Font awesome を利用していたが，はてブ用のアイコンがなかった．

CSS で代替できたが，ネイティブに対応している Simple に変更した．

ついでに Icongram を採用してサイズ・色の変更をカンタンにした．