BlogCalendarのCSS優先順位バグ修正

カレンダー上で日記記事が黄色で表示されるはずなのに、一部の日付だけ水色になっていた。原因を追ったら、CSSの記述順とtodo: "memo"の競合だった。

症状

BlogCalendarで category: "diary" の記事は黄色（#FFF0D4）で表示される。ところが2月15日、21日、23日などの日記が水色（#E8F4FD）で表示されていた。

カレンダーを眺めて「あれ、ここだけ色が違う」と気づいたのが発端。

原因

BlogCalendar.vueのCSSで、category-diaryとtodo-memoの両方のクラスが同時に付与されると、後に定義されたtodo-memoが勝つ。

/* 810行目: diary = 黄色 */
.article-link.category-diary {
  background-color: #FFF0D4;
}

/* 842行目: todo-memo = 水色（こっちが後なので勝つ） */
.article-link.todo-memo {
  background-color: #E8F4FD;
}

CSSの詳細度（specificity）は同じなので、ソース順で後の方が適用される。diary-*.mdにtodo: "memo"が付いていたファイルでは、テンプレート側で両方のクラスが出力されていた。

<!-- 実際のDOM -->
<a class="article-link category-diary todo-memo">...</a>

対応

1. diary-*.mdからtodo: "memo"を削除（6ファイル）

以下の6ファイルからtodo: "memo"を削除した。

• diary-2026-02-14.md
• diary-2026-02-15.md
• diary-2026-02-21.md
• diary-2026-02-23.md
• diary-2026-02-24.md
• diary-2026-02-25.md

統合日記の目的は「その日に何をやったか」を一覧するもので、TODO管理の対象ではない。todo: "memo"を付ける理由がそもそもなかった。

2. make-diaryスキルにルールを追記

.claude/commands/make-diary.mdの統合日記テンプレート直下に警告を追加した。

統合日記に `todo: "memo"` を絶対に付けないこと。
BlogCalendarで `todo-memo` のCSS（水色）が
`category-diary`（黄色）を上書きするため、
黄色ハイライトが消える。

これで今後make-diaryスキルが日記を自動生成する際に、todo: "memo"が混入しなくなる。

3. 詳細記事のcategory不統一も整理

調査の過程で、詳細記事（日記以外の個別記事）のcategoryが日付によってバラバラだったことにも気づいた。

• ある日は category: "diary" で作成されていた
• 別の日は category: "dev" で作成されていた

make-diaryスキルの正しいルールでは、統合日記がcategory: "diary"、詳細記事はcategory: "dev"。混在していた記事を"dev"に統一した。

BlogCalendarの色付けルール整理

今回の調査で改めて整理した色の対応表。

getArticleFilterTypeはdiaryを最優先で判定するが、CSSクラスはcategoryとtodoの両方が付与される。フィルタの判定順とCSSの適用順は別物なので、frontmatter側でクラスの競合を起こさないようにするのが正しい対処。

学びメモ

• CSSの詳細度が同じとき、ソース順の後が勝つ。フィルタロジックで「diary最優先」にしていても、CSSクラスが両方付いていたら意味がない
• 自動生成スキルにガードレールを入れておかないと、同じバグが何度でも再発する。「なぜダメか」の理由をコメントに残しておくと、AIが判断しやすい
• 「カレンダーの色がおかしい」という目視の違和感が出発点だった。定期的にカレンダーを眺める習慣が、地味にバグ検出に効いている