WordPress から Hugo へ移行したあと、記事の変換や公開先の切り替えだけでなく、サイトとして使いやすいかどうかも少しずつ整えることにした。
この記事では、Hugo 環境で追加・調整した表示まわりの作業をまとめる。
やりたいこと
今回の作業では、次の点を直した。
- 404 Not Found 用のエラーページを作成する
- サイト内のキーワード検索を追加する
- 記事一覧やホームの上部に出る広告を外す
- 日本語と English の切り替えをメインメニューから外し、国旗だけの控えめな表示にする
- サムネイル画像がない記事では
No Imageではなく既定画像を表示する
Hugo は静的サイトジェネレーターなので、検索やエラーページも静的サイトとして無理なく扱える形にしておきたい。
404 ページを追加する
Hugo では layouts/404.html を用意すると、ビルド時に public/404.html が生成される。
今回はサイトの通常レイアウトに合わせて、短い説明文とホームへ戻るリンクだけを置いた。
サーバー側で 404 のときにこのファイルを返す設定にしておけば、存在しないURLへアクセスされたときも、Hugo 側の見た目に揃えたページを表示できる。
サイト内検索を追加する
検索は外部サービスを使わず、Hugo が出力するJSONをブラウザ側JavaScriptで検索する方式にした。
hugo.toml でホームにJSON出力を追加し、layouts/index.json で記事タイトル、URL、日付、概要、本文、カテゴリ、タグを出力する。
検索ページは content/search.md と content/search.en.md として作り、日本語ページでは /search/、英語ページでは /en/search/ に置いた。
JavaScript側では index.json を読み込み、入力されたキーワードをスペース区切りでAND検索する。小さな個人ブログなら、このくらいの仕組みで十分使えそうだ。
上部広告を外す
ホームや記事一覧の上部に広告が出ると、記事を探したいときに少し邪魔に感じる。
そこで、一覧の上部広告は削除した。広告枠そのものは完全には消さず、ホーム下部や関連記事の下など、本文を読む流れを邪魔しにくい場所に残した。
言語切り替えを控えめにする
日本語・English の切り替えは便利だが、メインメニューの項目として並ぶと少し目立ちすぎる。
そこでメニューからは外し、ヘッダー右上に国旗だけで表示するようにした。
表示は 🇯🇵 と 🇺🇸 のみで、リンクの title と aria-label には言語名を残している。見た目は控えめにしつつ、何のリンクかはブラウザや支援技術に伝わるようにした。
既定サムネイルを用意する
WordPress から移行した記事には、アイキャッチ画像がないものも多い。
これまではカードに No Image と表示していたが、一覧で見ると少し寂しい。そこで static/images/default-thumbnail.svg を追加し、サムネイルがない記事カードではこの画像を表示するようにした。
対象はホーム、記事一覧、関連記事など、記事カードを使う場所にしている。
今回のまとめ
Hugo への移行は、記事を表示できるところまで持っていけば終わりというわけではなく、404、検索、広告、言語切り替え、サムネイルのような細かい部分を整えると、普段使うサイトとしてかなり落ち着いてくる。
まだデザインは調整の余地があるが、WordPress から移したあとに必要になりそうな最低限の使い勝手は、だいぶ揃ってきた。