PR表記 はじめに #
HugoのBlowfishテーマで、Amazonアソシエイトなどの広告リンクを貼る際に必要となる「PR表記（ステマ規制対策）」を実装しました。
Blowfishのレイアウト内のsingle.html を適切に編集することで、デザインを維持したまま実装可能です。
こちらの記事の冒頭に書いているようなPR表記が可能になります。
見る人もなかなかいない気がしますが、メモとして残しておきます。
実装方法 #
1. layouts/_default/single.html の編集 #
プロジェクトルートの layouts/_default/single.html （なければテーマフォルダからコピー）の {{ define "main" }} 内、header タグの中に以下の条件分岐を追加します。
{{ if .Params.pr }}
<div style="font-size: 0.8rem; color: #71717a; margin-bottom: 1rem; display: flex; align-items: center;">
<span style="border: 1px solid #71717a; padding: 0px 6px; border-radius: 4px; margin-right: 8px; font-weight: bold; font-size: 0.7rem;">PR</span>
<span>本ページはプロモーションが含まれています</span>
</div>
{{ end }}2. 記事のFront Matterで有効化 #
PR表記を出したい記事の冒頭に pr: true を追記するだけでOKです。
---
title: hoge
pr: true # こんなカンジで記載
---PR表記 まとめ #
これでBlowfishのレイアウトを維持したまま、PR表記を出すことができるようになりました。
楽天アフィリエイト はじめに #
当ブログに楽天アフィリエイトを導入しました。（合わなかったので今は取っ払っています。）
HugoのBlowfishテーマを使っている場合、意外と「サイドバーの編集場所」で迷ったので、実際に行ったカスタマイズ手順をまとめておきます。
1. 楽天アフィリエイトでコードを取得 #
まずは楽天アフィリエイトの管理画面から「モーションウィジェット」を作成します。 今回はサイドバーの幅に合わせて、サイズを 200x350 に設定しました。
2. テンプレートのカスタマイズ #
Blowfishテーマでサイドバーに目次が表示可能です。記事ページの右側に表示される目次テンプレート（toc.html）を拡張してヴィジットを配置することにしました。
toc.html のコピー #
まずはテーマの元ファイルを、自分のプロジェクト側にコピーして編集可能な状態にします。
cp themes/blowfish/layouts/partials/toc.html layouts/partials/toc.htmlコードの挿入 #
コピーした layouts/partials/toc.html の最初の </details> タグ（PC用目次の終わり）の直後に、以下のコードを挿入しました。
<!-- 広告エリア：PC表示時のみ目次の下に表示 -->
<div class="rakuten-sidebar-widget mt-6 hidden lg:block text-center">
<p class="text-[0.65rem] tracking-widest text-neutral-400 mb-2 uppercase">
広告
</p>
<div class="flex justify-center items-center">
<!-- ここに取得した楽天ヴィジットのスクリプトを貼り付け -->
</div>
</div>hidden lg:block を使うことで 「スマホでは非表示、PCの時だけサイドバーに出る」 ように制御しています。
3. ステマ規制（景品表示法）への対応 #
2023年10月からのステマ規制に伴って各種表示が必要になったようです。今回以下の2点を実施しました。
- PR表記の追加: 広告の直上に「広告」の文字を配置。
- プライバシーポリシーの更新: 楽天アフィリエイトがCookieを使用して広告を配信している旨を追記。
4. 楽天アフィリエイトを導入してみた感想 #
Blowfishのデザインを崩さずに広告を配置するのに少し苦労しましたが、一度設定してしまえばあとはHugoが自動ですべての記事に適用してくれます。
少しサイトが賑やかになった気がします。しばらく様子を見てみたいと思います。
20260526追記 合わないのでやめました笑
参考リンク:
