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

by
カテゴリ:

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

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

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

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

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

全体

色調の変更

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

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

navbar

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

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

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

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

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

ホーム

情報量を制限

マージンの調整

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

記事

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

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

マージンの調整

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

行間の調整

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

サイドバー

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

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

しかし,以下の問題をかかえていた.

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

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

ホームのサイドバー

記事のサイドバー

リンクの色をグレーに

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

そこで,灰色 (#6c757d) を採用した.

SNSボタンに Simple を採用

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

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

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


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