前回 #4では、サイト全体の見た目を作り直した。今回はそのつぎで、左のナビをページをまたいでも同じ並びにそろえる、AI 記事サイトのおすすめ枠を数字でも追えるようにする、X・Facebook・写真日記まわりを運びやすくする、という三つを軸に手を入れた。
左のナビを整理した
サイト名やロゴの下に並ぶ、検索・年別アーカイブ・タイムマシン・タグ・RSS への導線を入れ替えた。
画面幅が広いとき（PC 想定）は、このかたまりは最初から左に縦に並んで見える。左上の三本線は出てこない。
画面が狭いとき（スマホ想定）は、同じかたまりを三本線のタップで開閉する。狭い画面では場所を取るので、畳んでおいて必要なときだけ広げる、という動きだ。
「過去の今日」に飛ぶタイムマシンは、ひとつのセクションとして分かるようにし、短い説明文も付けた。タグ一覧とRSS も、この並びに含めた。
以前は、別のメニュー欄にも「トップへ」「検索」「月別一覧」が残っていたが、左の並びからも同じページに行けるので、同じ入口が二重になっていた。メニュー側の重複はやめた。記事を読みながらページを行き来しても、左の並びそのものは変わらない。
AI 記事サイトの「関連で探す」枠を広げた
ai.hide10.com の記事の下に出る、Amazon や楽天への案内枠がある。もともと記事の内容に合わせて出し分けていたが、猫の話やゲームの話のときにも、それらしいカテゴリの案内が出るようにデータを増やした。
あわせて、その枠が画面に実際に表示されたかを、解析ツールに送るようにした。クリックだけ数えていたときには分からなかった「そもそも読者の目に入ったか」を、あとから確認しやすくするためだ。
X と Facebook の「投稿メモ」を整理した
そもそもの仕組み
このサイトでは、X や Facebook に手で貼る短文を、あらかじめリポジトリの中にストックしておく。記事を公開した直後に毎回ゼロから考えなくてよいようにするためだ。候補は テキストファイルに並べ、区切り線で区切ったひとかたまりが「1 投稿分」になる。
そのリストを、ブラウザで眺めやすい 1 枚の HTML に変換するスクリプトもある。投稿したら先頭から削る、といった運用をしやすくするためで、自動で SNS に投稿する本体ではない（貼るのは人の手）。
今回変えたところ
候補の書き方を、読みやすいブロック形式に揃え直し、HTML 側の見え方もそれに合わせた。
以前は GitHub Actions で 毎日 X に自動投稿する流れもあったが、API の契約都合でやめた。いまは 人がキューを進める前提だ。Facebook 用にも、同じ発想の候補リストと、キューを進めるためのスクリプトを足してある。
写真日記を、手順どおりに回せるようにした
Cursor などで写真日記を書くとき、フォルダの置き場やファイル名で毎回迷わないように、このリポジトリ内での約束事を 1 本のドキュメントにまとめた。あわせて、
- 素材を所定の場所に集める
- Hugo 用の本文と画像を組み立てる
- 最低限のチェックをする
までを、短いスクリプト三つに分けて実行できるようにした。手戻りが減るのが目的だ。
アイキャッチにキャッチコピーを重ねる仕組みをつくった
記事の顔になる画像で、イラストや雰囲気だけ先に決めておき、あとから大きな見出しや短い説明を載せられるようにした。キャッチコピーを変えたいときは、背景を描き直さずに差し替えだけで済む。
最初に使ったのは マネーフォワード ME の個人ツール紹介だ。この進捗 #5 のヒーロー画像も同じく、featured-base.png とキャッチコピー合成のやり方のままだ。
記事末尾の「誰が書いたか」をそろえた
AI やツールを使って書いた記事では、末尾の執筆の出所の書き方を揃えた。写真日記も含めて、読者がパッと見て区別しやすいようにした。
あいだに出した本編記事（抜粋）
進捗作業と並行して、通常の記事も公開した。
- Forza Horizon 6 の「車文化」イベントの整理
- LATENT の人型ロボットの動画まわり
- Net.Attack のリリース話
- Claude Code の料金を抑える設定の話
- SWE エージェントと CI の整理
公開のしかた自体はこれまでどおりで、静的サイトとしてビルドして載せている。
このあとやりたいこと
- おすすめ枠の「表示されたか」の数字が、実際の判断に使えるかしばらく見る
- アイキャッチ合成を、他の記事フォルダでも同じやり方で回せるか検討
- #4 で書いた SNS に貼ったときの画像（ogp） の運用が続いているか確認
参考
この記事は Cursor AI（Composer）が執筆しました。