ブログ移行プロジェクト進捗 #6 ─ TOC常時表示、画像自動生成、予約投稿

このブログはもともと WordPress で運用していたもので、Hugo（静的サイトジェネレーター）と Cloudflare Pages に移行したあとも、運用改善の記録を続けている。前回 #5 はナビの整理とアイキャッチ画像の合成機能の話だった。

今回は記事を読むときの使い勝手を少し整え、画像生成の手間を減らし、ずっと後回しにしていた予約投稿機能を作った。

目次を常に表示するようにした

記事ページには各セクションへのリンクを並べた目次が出る。使っているテーマはデフォルトで画面が広いとき（PC）にこの目次を非表示にする仕様だったため、2ペインレイアウトに切り替えた際に目次ごと消えてしまっていた。

CSS 1行で常時表示に変えた。これだけで、PC で記事を開いたときに最初から目次が見える状態になった。

月別アーカイブに日付ナビを足した

このサイトの月別アーカイブページ（例: 2026年3月の記事一覧）に、その月のどの日に記事が出たかをナビとして追加した。日付をクリックするとその日の記事へ飛べる。

前回 #5 で「アーカイブ改善したい」と書いていた部分の着手だ。過去の記事を日付で掘りたいときに多少使いやすくなった。

ローカルの ComfyUI をWSLから呼び出せるようにした

このブログのアイキャッチ画像はこれまで、SVG を手書きするかクラウドの画像生成 API（Cloudflare Workers AI）を使うかのどちらかだった。今回、手元の PC で動く ComfyUI（画像生成を組み立てて実行するローカルツール）をWSLのスクリプトから呼び出せる仕組みを追加した。

Windows 側で動いている ComfyUI に対し、作業環境の WSL（Windows 上で Linux コマンドを使う仕組み）から HTTP で指示を投げる形だ。記事のスラグと短いプロンプトを渡すと、生成画像が記事フォルダに保存されるところまで自動化した。詳しい手順と生成例はこちらの記事に書いた。

手元の GPU（RTX 4060 Ti）を使うのでクラウド API より速く、コストもかからない。ただし PC を起動していないと使えないため、外出先ではクラウド側に頼ることになる。

GA4レポートを強化し、RSS導線と収益導線を追加した

このブログのアクセス解析には Google Analytics 4（GA4）を使っており、週に一度 Telegram に届く自動レポートがある。そのレポートスクリプトに、直帰率・ページ滞在時間の傾向や記事別の流入元を追加した。どの記事にどこから人が来ているかが分かるようになった。

あわせて、記事末尾に RSS フィードへのリンクを追加した。SNS よりもフィードリーダーで読む人向けの導線だ。

収益面では、PV が多い記事のうち記事の内容と関連する商品カテゴリが明確なものに、Amazon・楽天への案内ブロックを設定した。記事とまったく関係ない広告が出るより、読んでいて違和感が少ない。

予約投稿に対応した

このブログの公開フローは「記事を書いて GitHub に push → GitHub Actions が自動でビルド・デプロイ」という流れだ。push した瞬間に公開されるため、「書いておいて翌朝公開」が今まではできなかった。

Hugo には publishDate というフィールドがあり、そこに未来の日時を入れると、その時刻になるまでその記事がビルドから除外される。この仕組みを活かして予約投稿を実装した。

やったことは三つ。

publishDate が設定された記事は、未来日付を禁止している CI チェックをパスするよう修正した
GitHub Actions に定期実行ジョブを追加し、毎時0分に「publishDate <= いまかつ未デプロイ」の記事を検出してビルド・デプロイを走らせる
デプロイ後は Bluesky と Mastodon に自動投稿し、投稿済みスラグを記録ファイルに書き込む

X（旧 Twitter）は API の契約がないので、記事を書いた時点で手動投稿用のキューに文章を積んでおく運用のまま。

なお、この記事自体が publishDate: 2026-03-28T21:30:00+09:00 を設定した予約投稿で、書いたあとすぐ push し、21:30 に自動公開された。

この一週間で出した記事

移行作業と並行して、通常の記事も出した。

Claude Code 関連

Forza Horizon 6

その他

写真日記は3月5日〜14日の10日分を出した。

参考

この記事は Claude Sonnet 4.6 が執筆しました。