HugoのMainroadテーマをカスタマイズしてコーポレートサイト風にした話

XServerのWordPressブログをHugo＋Cloudflare Pagesに移行した後、デフォルトのMainroadテーマのままでは味気なく、コーポレートサイト風のレイアウトに作り直しました。 この記事では、その試行錯誤の経緯を記録として残します。

出発点：Mainroadテーマのデフォルト

HugoのテーマにはMainroadを選びました。シンプルで記事一覧＋右サイドバーの2カラム構成が気に入ったためです。 ただ、デフォルトのままだと以下が気になっていました。

• カラーが赤系：ロゴのイメージカラーとまったく合わない
• ヘッダーが黒背景：重たい印象
• フッターも黒背景：全体的に暗すぎる
• メニューが1行テキストのみ：もう少し情報量を持たせたい
• ロゴがテキストのみ：画像ロゴを使いたい

参考にしたのは、地域の工務店や士業のコーポレートサイト。白背景にブルー系のアクセントカラー、上部にロゴと連絡先、その下に横並びナビゲーション、というレイアウトを目指しました。

カラーをブルー系に統一

Mainroadテーマのアクセントカラーはデフォルトで赤（#e22d30）です。 ロゴ画像のイメージカラーに合わせて#4a7ab5（ミッドナイトブルー）に変更しました。

変更箇所はstatic/css/custom.cssにまとめて上書きしています。テーマのCSSを直接編集すると、テーマのアップデート時に消えてしまうためです。

a { color: #4a7ab5; }
a:hover { color: #2d5f9a; }
.widget__title { border-bottom-color: #4a7ab5; }
.tags__link { background: #4a7ab5; }

hugo.tomlのparams.style.vars.highlightColorでテーマ変数も変更しましたが、CSSテンプレートを経由して展開されるため、カスタムCSSでの上書きも必要でした。

ヘッダー・フッターを白背景に

デフォルトのMainroadはヘッダーとフッターが黒背景です。 全体を白背景に統一するため、以下を上書きしました。

.footer {
    background: #fff;
    border-top: 1px solid #ddd;
    color: #666;
}

メニューバーも同様に白背景に変更し、メニュー項目の区切りは細かい破線の縦線（repeating-linear-gradient）で表現しています。

ロゴ画像の配置

テキストロゴからSVGロゴ＋タイトル画像の組み合わせに変更しました。

Mainroadのlogoパーシャルをオーバーライドし、以下の構成にしています。

• 左側：フラスコのロゴマーク（logo_image.png）
• 右側上段：サイト名の画像（logo_title.png）
• 右側下段：キャッチコピー

ロゴマーク画像は元々余白が多く、そのままでは大きく見えすぎたため、Pythonスクリプトでピクセルを解析して上下左右の余白をギリギリまでトリミングしました。

また、ロゴ右側の縦位置の調整に苦労しました。CSSのalign-items: flex-endとalign-items: centerを何度も切り替えながら、最終的に「ロゴマーク下部に右側テキストを揃える」形に落ち着きました。

ナビゲーションメニューの2行表示

メニュー項目を「日本語名（大）＋英語名（小）」の2行表示にしました。

hugo.tomlのメニュー設定でparams.subtitleを追加し、テンプレート側で表示しています。

[[menus.main]]
  name = "トップページ"
  url = "/"
  [menus.main.params]
    subtitle = "Home"

メニュー項目間の縦線は::after疑似要素で右端に、先頭アイテムのみ::beforeで左端にも表示しています。最初は隣接アイテムの::afterと::beforeが重なって二重線になってしまい、先頭だけ::beforeを使う方法で解決しました。

ヒーロー画像の配置

Mainroadのヒーローブロックはデフォルトではwrapperの中に入っており、サイドバーと同じ幅になってしまいます。 layouts/_default/baseof.htmlで{{ block "hero" . }}{{ end }}をwrapperの外に出し、横幅いっぱいに表示されるようにしました。

画像はobject-fit: cover＋object-position: center 70%で、下寄りの部分が表示されるよう調整しています。 角丸はborder-radius: 12pxをhero__innerに適用しました。

サイドバーの調整

記事ページではサイドバーを非表示にしています。hugo.tomlで設定するだけです。

[params.sidebar]
  home = "right"
  list = "right"
  single = false

プロフィールウィジェットはMainroadに標準で含まれていないため、layouts/partials/widgets/profile.htmlを新規作成しました。丸いアバター画像を左に、名前とひとこと紹介を右に配置するflexレイアウトです。

ページ遷移時のレイアウトずれ

トップページ（サイドバーあり）から記事ページ（サイドバーなし）に遷移すると、ヘッダー全体が左にずれて見えました。 原因はスクロールバーの有無によるviewport幅の変化でした。

html { scrollbar-gutter: stable; }

この1行で解決しました。スクロールバー領域を常時確保することで、ページが切り替わっても幅が変化しなくなります。

ファビコンの作成

logo_image.pngからフラスコ部分だけを切り抜いてファビコンにしました。 PillowライブラリのPythonスクリプトで切り抜き範囲を指定し、白背景に合成してから32×32にリサイズしています。

まとめ

Hugoのテーマカスタマイズは「CSSの上書き」と「テンプレートのオーバーライド」の組み合わせで、テーマ本体を一切変更せずに大きく見た目を変えられます。 テーマを直接編集しないことで、テーマのアップデートにも追従しやすくなります。

今回の変更点はすべて以下のファイルにまとめています。

フリーランスとして活動するにあたり、ポートフォリオサイトとしても機能するよう、引き続きコンテンツを充実させていく予定です。