HugoのテーマPaperModは標準だとスマホ環境での文字サイズが大きすぎて読みにくいのでカスタムCSSで調整する。

参考: Bundling Custom css with theme’s assets | FAQs · adityatelange/hugo-PaperMod Wiki

動作環境

  • Windows 11 / Git Bash
  • Hugo v0.164.0（今回の方法では通常版でも動作可）
  • PaperMod v8.0（現時点最新コミットまで取り込み済み）
$ hugo version
hugo v0.164.0-ce2470e7012b5ab5fc4e10ebe4027e9f8d9e00dc+extended windows/amd64 BuildDate=2026-07-06T16:39:30Z VendorInfo=gohugoio

$ cd themes/PaperMod && git log -1 --oneline
154d006 (HEAD -> master, origin/master, origin/HEAD) style(post-single): adjust padding for details summary element

導入手順

1. カスタムCSSを作成

assets/css/extended/custom.css を作成する。

もしくはプロジェクトのルートディレクトリで以下を実行する。

mkdir -p assets/css/extended && touch assets/css/extended/custom.css

2. CSSをコピペ

作成した custom.css に、以下のコードをそのままコピー＆ペーストする。

テーマ側の詳細度を上書きするため必要に応じて !important を付与している。

@media screen and (max-width: 768px) {
    body {
        font-size: 16px;
        line-height: 1.7;
    }

    .post-title,
    h1 {
        font-size: 1.5rem !important;
        line-height: 1.35;
    }

    h2 {
        font-size: 1.3rem !important;
        line-height: 1.4;
    }

    h3 {
        font-size: 1.15rem !important;
        line-height: 1.45;
    }

    .post-content {
        font-size: 1rem !important;
        line-height: 1.75;
    }

    .first-entry .entry-header h1 {
        font-size: 1.45rem;
        line-height: 1.4;
    }

    .first-entry .entry-header h2,
    .entry-header h2 {
        font-size: 1.2rem;
        line-height: 1.45;
    }

    .entry-content,
    .entry-footer,
    .post-meta,
    .breadcrumbs,
    .paginav span {
        font-size: 0.9rem;
    }

    .paginav .title,
    .post-tags a {
        font-size: 0.75rem;
    }
}

@media screen and (max-width: 400px) {

    .post-title,
    h1 {
        font-size: 1.35rem !important;
    }

    h2 {
        font-size: 1.2rem !important;
    }

    h3 {
        font-size: 1.1rem !important;
    }
}

3. 保存して開発サーバーを立ち上げて確認

hugo server で開発サーバーを立ち上げて確認する。あとは好みでスタイルを調整してもらえればOK。