スタイルガイドの記述を実態に合わせる（段の外・現在地の表・ネイビーの例外・状態変化・枠線の範囲） (#3130)

[ma91n]

ガイドとサイト実体の突き合わせで見つかった、実態側が正しく記述が古い／過剰な5点を文言だけ直します。実装・CSS は触っていません（変更は source/specials/styleguide/index.md と CLAUDE.md の2ファイル）。

1. 段の外は3つ → 4つ

• before: 段の外にあるのは3つだけです。記事タイトル／404 ページの数字／タグの件数の上付き
• after: 段の外にあるのは4つだけです。（…）行き先の名前に添える総数は、いちばん下の段でも名前と 1px しか違わず名前の一部に見えるので、段より小さく置きます。

再確認: font_size_lint.mjs の EXEMPT に .header-dropdown-count 8px が理由付きで入っており、.header-dropdown-count / .sidebar-count / .author-list-count が同じルールを共有していました。CLAUDE.md は既に「4つ」。

2. 現在地の表の実物リンクが到達不能

• before: | サイドバーのカテゴリ | 太字 | [Programming カテゴリ](/categories/Programming/) |
• after: | 年月一覧 | 太字 | [すべての記事](/articles/) の年ページ |

再確認: _widget/category.ejs に現在地の実装は無く、CSS にも該当クラスが無い（#3024 でカテゴリページから軸の枠が消えている）。一方 .archive-list-current（font-weight: bold）は archive.ejs の年一覧に実在し、年ページの生成 HTML で確認済み。CLAUDE.md 側の例示も「文字だけが並ぶ帯（パンくず・年月一覧）」に直しました。

3. 「ネイビーは文字色に使いません」に例外を追記

• before: （例外の記述なし）
• after: 例外は2つの形だけです。1つはネイビーの図形とひと組で読ませる小さな文字で、タブに出る「← → で切り替え」は同時に出るフォーカスリングと同じ色にして1つの信号として読ませ、シェア数はボタンの丸と、著者名は頭文字の丸と1組に見せます。もう1つは、文字がそのページの面そのものになっている 404 の数字です。読み下す文章に混ざる文字には使いません。

issue との食い違い（1点目）: issue は「例外が1つ（.tab-hint）実在」としていますが、実測では静止状態でネイビーの文字を持つ部品は 4つ ありました（.tab-hint / .share-count / .author-box-name / .page-404 .number）。ダークモードの塊（theme-styles.styl の「差し色として置いた文字・記号」）もこの4つ＋.headerlink の hover をまとめて扱っています。.tab-hint だけを例外として書くとガイドが別の意味で嘘になるため、実態の4つを覆う形（図形とひと組の小さな文字／面として塗った数字）で1文にしました。.headerlink と .pagination の hover は既存の「インタラクション」に含まれるので触っていません。

4. 「別の時間を持つ状態変化」の括りを広げる

• before: タブの切り替え（0.18 秒）と details の開閉は反応ではなく状態の変化なので、それぞれ別の時間を持ちます。
• after: 開閉・展開は反応ではなく状態の変化なので、別の時間を持ちます。タブの切り替え、ドロップダウンと引き出しの開閉、検索窓の拡張、折りたたみの開閉がこれで、いずれも hover より長い側（0.12〜0.2 秒）に置きます。変わったことが読み取れるまで動きが続く必要があるからです。

再確認: hover-speed 0.05s に寄っているものと別に、ドロップダウン／検索ヒント 0.12s、検索窓の拡張 0.15s、タブ・引き出し・details 0.18s（tab-speed）、折りたたみの三角 0.2s を確認。個別の値は名指しせず幅で書いています（値の名指しは腐るため）。

5. 「〜だけが枠線を持ちます」の範囲を限定

• before: 輪郭はなるべく作りません。 一覧の1件は囲みを持たず間隔だけで分け、横に並んで箱でないと成立しない部品（連載・特設パネル / リンクプレビュー）だけが枠線を持ちます。
• after: 読み物を並べる場所では輪郭をなるべく作りません。 一覧の1件は囲みを持たず間隔だけで分け、記事へ送るカードで枠線を持つのは（…）だけです。（…）操作部品（検索窓・ドロップダウン）と、中身をまとめて囲む枠（統計・折りたたみ・年月のカード）はこの範囲の外です。枠がその部品の範囲そのものを作っているので、外すと境目が読めなくなります。

再確認: 全辺の枠線（border: Npx solid）は 25 宣言・約19種でした（ヘッダーのドロップダウン／検索窓／検索ヒント／モバイル目次／details／統計の枠／年月カード／傾向パネル／ギャラリー項目／連載ナビ／殿堂カード／表彰チップ・バッジ／NEW の印／共有ボタン／白地画像 ほか）。issue の「19種」と一致します。

補足: 「679件」の手書き数字

数字を落として「全件を並べます」にしました。 丸めても（約680）タグが増えれば古くなり、値の名指しはいずれ腐ります。ここで読者に必要なのは「行き先が多いから群に分ける」という物差しであって件数そのものではないので、数を書かない形にしています。

• before: 行き先が多い一覧（タグ一覧の「すべてのタグ」は679件）は、…
• after: 行き先が多い一覧（タグ一覧の「すべてのタグ」は全件を並べます）は、…

検証

• npx hexo generate → /specials/styleguide/ を 1280px で目視。直した5節を読み、表に到達不能なリンクが無いことを確認
• 年ページの生成 HTML に .archive-list-current が実在することを確認
• textlint（--rules-base-directory 付き）0件 / markdownlint-cli2 0件

Closes #3130

🤖 Generated with Claude Code

[ma91n]

追記: ②の差し替え先も到達不能だったので、行ごと落として実装も消しました

レビュー前の突き合わせで、②で差し替えた先（年月一覧）も到達不能だったことが分かりました。issue #3130 の記述をそのまま採ったための取りこぼしです。

何が起きていたか

.archive-list-current を出すのは themes/future/layout/archive.ejs の trans だけですが、この枝は !is_month() && !is_year()、つまり /articles/（全期間）でしか通りません。そこでの page.path は articles/index.html なので path.indexOf("2026") は常に -1 になり、現在地の span は生成されません。一方の年ページ（/articles/2026/）は is_year() の枝で、月別を .archive-list-item のカードで描くので trans を通りません。

生成物でも裏が取れました。hexo generate した public 配下の全 HTML で archive-list-current は 0 件で、残っていたのは site.css の .archive-list-current { font-weight: bold } ＝死んだ CSS だけでした。先の PR 本文に書いた「年ページの生成 HTML で確認済み」は、セレクタと CSS の存在を確認しただけで描画までは確認できていませんでした。訂正します。

直した内容（コミット fc42403）

1. スタイルガイドの「現在地」の表から年月一覧の行を落とす（パンくず / ページャ / タブ の3行に）
2. CLAUDE.md の例示を詰める — 「文字だけが並ぶ帯（パンくず・年月一覧）」→「文字だけが並ぶ帯（パンくず）」
3. 死んだ実装を消す — .archive-list-current の CSS と、archive.ejs の到達不能な分岐。transform を渡さなければ list_archives は item.name をそのまま返す（hexo/dist/plugins/helper/list_archives.js:65,80）ので、年一覧の描画そのものは変わりません

Note

3 は issue #3130 の「実装は変えない」という宣言から外れます。死んだ CSS と分岐まで消してよい、という承認を別途もらった上で入れています。

検証

• make css の before/after: 差分は .archive-list-current の3行が消えただけ（他の宣言に変化なし）
• make lint-css: 解決漏れの識別子なし / ベンダー接頭辞の同居なし / font-size は段に収まる
• hexo generate の全件照合: archive.ejs を触るので、マージ後の HEAD と本コミットで2回ビルドし public/articles/ 配下 1,614枚の HTML を機械照合。site.css?v= のハッシュ（CSS が変わったので当然変わる）を除くと、差があったのは /articles/index.html の1枚だけで、中身は削除した EJS ブロックが出していた空白5文字（\n␣␣␣␣）のみ。年一覧の <ul class="archive-list"> はバイト単位で同一でした。取りこぼし・余剰ファイルも0
• archive-list-current の出現: before 0件 / after 0件（HTML）、CSS からは消滅
• textlint（--rules-base-directory 付き、styleguide.md と archive.ejs）0件 / markdownlint-cli2（CLAUDE.md）0件

あわせて main に追従しました

origin/main をマージ済み（f9381c1）。archive.ejs は #3149 が触っていたので、衝突を残さないよう先に取り込んでから編集しています。#3148 の styleguide 側の変更（career: true・「本文末の帯」）とも両立しています。

範囲外として issue に残したもの

同じ表の「パンくず」「ページャ」行の実物「すべての記事 の2ページ目」も、_config.yml の per_page: 0 で /articles/ がページ分割されないため到達不能です。#3130 の指摘には無いのでこの PR では触らず、issue にコメントで残しました。