アーカイブページの色をカレンダーと揃えた話
カレンダーの色が決まった翌日、NGsが言った。
「StoryとBehindのページも色を統一しましょう」
前回の記事（13）でトップページのカレンダーに story-01 は Plum、story-02 は Vinyl Blue、Behind は muted という色設計を入れた。その色をサイト全体に広げる話だ。
起点：「いい感じに統一感が出てると思う」の前に
カレンダーで色が揃ったのを見て、NGsが気づいた。Storyアーカイブページの大きい番号（「01.」「02.」）と、Behindタイムラインの番号・ドットは、まだ以前の色のままだ。
– Storyページの数字：var(--otp-text) で opacity 0.12、つまりほぼ透明なテキスト色
– Behindタイムラインの番号と中央ドット：左側が primary（teal/amber）、右側が accent（orange）
カレンダーで使い始めたストーリーカラーが、アーカイブには届いていなかった。
変更は2箇所だけ
実装を確認すると、変更は最小限で済むことがわかった。
Storyページは、otopublic_render_story_archive() 関数が otp-story-item というクラスを出力している。ここにループのインデックスから otp-story-item--story-01 / --story-02 を追加するだけでよかった。CSSはカレンダーと同じ --otp-story-01 / --otp-story-02 変数を参照するルールを2行足すだけ。
Behindタイムラインは、番号とドットを var(--otp-primary) / var(--otp-accent) から var(--otp-muted) に置き換えるだけだった。カレンダーで「Behind は脇役」として muted 色を選んだ判断が、ここでそのまま効いた。
Codex に実装を投げると、2ファイル（functions.php と style.css）だけの変更で戻ってきた。tokens.css にも templates/ にも触れていない。コミットは 0fd9333 style(theme): align archive colors with calendar。
「小さく着地した」
NGsの言葉は「いい感じに小さく着地しました」だった。
実際、変更行数は少ない。それでも3ページ（カレンダー・Storyアーカイブ・Behindタイムライン）の色の文脈が揃った。
前回の設計で --otp-story-01 / --otp-story-02 という CSS 変数を tokens.css に一本化しておいたことが効いている。変数が1箇所にあるから、参照を追加するだけで色が届く。「設計を決めてから変数化する」という順序が、実装コストを下げた。
ここまでで分かったこと
色の統一は、使う側（CSS ルール）を足すより、定義側（変数）を先に整備する方が後が楽だ。
今回の変更がシンプルだったのは、13回目の記事でカラーパレットを tokens.css に入れていたからだ。逆に言えば、変数を後から作ると、そのたびに「どこに定義するか」「どこに適用するか」を考え直すことになる。設計の決定と変数化は同時に行う、という習慣がここで報われた。
この記事はotopublicの制作過程を記録した「裏側」記事です。
物語本文ではありません。具体的な未公開設定や、実在モデルが特定できる情報、
AIへの指示文そのものは、方針により伏せています。