Hugoのテーマ PaperMod でアフィリエイト開示を記事ごとに設定可能にする方法を紹介する。

このブログではこれまで開示が必要な場合は記事本文に直接書いていた。が、その度に文言をコピペするのが手間だったので記事のパラメーターで簡単に設定できるようにした。

動作環境

  • 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. カスタムレイアウトを作成

themes/PaperMod/layouts/single.html をコピーして layouts/single.html を作成する。

2. アフィリエイト開示の表示処理を追加

カスタムレイアウトに以下のハイライト部分・アフィリエイト開示の表示処理を追加する。このサイトでは日本語と英語を扱うので i18n を用いている。

表示箇所は投稿日や言語切り替えUIの下にする。これは読者が記事本文を読む前にその記事がアフィリエイトリンクを含んでいることを予め認識できるようにするため。

ちなみに、テンプレート内のコメントは最終的なHTML出力には残らないので変更箇所の目印として残しておくとよい。

    ...
    <div class="post-meta">
      {{- partial "post_meta.html" . -}}
      {{- partial "translation_list.html" . -}}
      {{- partial "edit_post.html" . -}}
      {{- partial "post_canonical.html" . -}}
    </div>

    <!-- Affiliate Disclosure -->
    {{- if .Params.affiliate }}
    <div style="color: var(--primary); font-size: 0.85rem; margin-top: 10px;">
      {{- i18n "affiliate_disclosure" }}
    </div>
    {{- end }}
    ...

3. 言語ファイルにアフィリエイト開示の文言を追加

i18n/en.yaml

- id: affiliate_disclosure
  translation: "Note: Links may earn me a commission."

i18n/ja.yaml

- id: affiliate_disclosure
  translation: "※ 本記事にはアフィリエイトリンクが含まれます。"

4. 記事作成時のデフォルトパラメーターとして affiliate を追加

この時点で記事のFrontmatterに affiliate: true を追加すればその記事でアフィリエイト開示文言を表示できるようになっている。が、新しく記事を作った時にこのパラメーターがないと表示方法を忘れることになるので、今のうちに追加しておく。

archetypes/default.md の Frontmatterにパラメーターを追加する。このブログではアフィリエイトのある記事の方が少ないのでデフォルトは false にしてある。

---
...
affiliate: false
---

5. 確認

hugo server で開発サーバーを立ち上げて確認する。

affiliate: true を追加した記事でアフィリエイト開示文言が表示されていればOK。