Hugo テーマを更新して UX 向上を狙ってみた

カテゴリ: hugo

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

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

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

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

またオレオレテーマと本家の差分を追いやすいよう,テーマを 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 を採用してサイズ・色の変更をカンタンにした.


  1. イラスト図解でよくわかるHTML&CSSの基礎知識 https://amzn.to/2VgI3h9