From eaa0444d5d06cdf59eb2791bb5e43df9d84504f5 Mon Sep 17 00:00:00 2001 From: ma91n Date: Mon, 31 Aug 2026 12:29:08 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=E3=82=B9=E3=82=BF=E3=82=A4=E3=83=AB?= =?UTF-8?q?=E3=82=AC=E3=82=A4=E3=83=89=E3=81=AE=E8=A8=98=E8=BF=B0=E3=82=92?= =?UTF-8?q?=E5=AE=9F=E6=85=8B=E3=81=AB=E5=90=88=E3=82=8F=E3=81=9B=E3=82=8B?= =?UTF-8?q?=EF=BC=88=E6=AE=B5=E3=81=AE=E5=A4=96=E3=83=BB=E7=8F=BE=E5=9C=A8?= =?UTF-8?q?=E5=9C=B0=E3=81=AE=E8=A1=A8=E3=83=BB=E3=83=8D=E3=82=A4=E3=83=93?= =?UTF-8?q?=E3=83=BC=E3=81=AE=E4=BE=8B=E5=A4=96=E3=83=BB=E7=8A=B6=E6=85=8B?= =?UTF-8?q?=E5=A4=89=E5=8C=96=E3=83=BB=E6=9E=A0=E7=B7=9A=E3=81=AE=E7=AF=84?= =?UTF-8?q?=E5=9B=B2=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Fable 5 --- CLAUDE.md | 2 +- source/specials/styleguide/index.md | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 8b306762726..1ce0d35ad2d 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -708,7 +708,7 @@ bootstrap-subset → theme-styles.styl の順で `/css/site.css` に連結する - **状態は新しい色を足さずに表す**（#2864）。動かすのは太さか面のどちらか一方で、 両方は動かさない（#2722 で踏んだ） - **現在地（active / current）の表し方は、その部品が押す面を持つかで決まる。** - 文字だけが並ぶ帯（パンくず・年月一覧・サイドバーのカテゴリ）は**太字**、 + 文字だけが並ぶ帯（パンくず・年月一覧）は**太字**、 丸や箱の的を持つ部品（ページャ）は**面**を塗る。帯の中で面を塗ると 現在地だけが浮き、的を持つ部品で太字にすると押せる範囲が変わらず所在が読めない - **タブは枠を持たない**（#3112）。カードで囲む形はフラット化 (#2747) の中で diff --git a/source/specials/styleguide/index.md b/source/specials/styleguide/index.md index c99e310137a..9b949aa98c4 100644 --- a/source/specials/styleguide/index.md +++ b/source/specials/styleguide/index.md @@ -83,7 +83,7 @@ layout: page ### ブランド色 -ネイビーは塗り面（フッター）とインタラクション（selection / hover / focus）専用で、**文字色には使いません**。本文の `ink-strong` との比が 1.63 しかなく、文字にすると黒と区別が付かないためです。クリムゾンはコンセプトブックの文法どおり、画面内で同時に1箇所だけの差し色に限定しています。 +ネイビーは塗り面（フッター）とインタラクション（selection / hover / focus）専用で、**文字色には使いません**。本文の `ink-strong` との比が 1.63 しかなく、文字にすると黒と区別が付かないためです。例外は2つの形だけです。1つは**ネイビーの図形とひと組で読ませる小さな文字**で、タブに出る「← → で切り替え」は同時に出るフォーカスリングと同じ色にして1つの信号として読ませ、シェア数はボタンの丸と、著者名は頭文字の丸と1組に見せます。もう1つは、**文字がそのページの面そのものになっている 404 の数字**です。読み下す文章に混ざる文字には使いません。クリムゾンはコンセプトブックの文法どおり、画面内で同時に1箇所だけの差し色に限定しています。 | 見本 | 変数 | 値 | 白背景との比 | 使うところ | | --- | --- | --- | --- | --- | @@ -235,7 +235,7 @@ layout: page -段の外にあるのは3つだけです。**記事タイトル**は幅で変わるので `clamp` で持ちます。**404 ページの数字**と**タグの件数の上付き**は、それぞれ1箇所でしか使わない一点ものです。 +段の外にあるのは4つだけです。**記事タイトル**は幅で変わるので `clamp` で持ちます。**404 ページの数字**と**タグの件数の上付き**は、それぞれ1箇所でしか使わない一点ものです。**行き先の名前に添える総数**は、いちばん下の段でも名前と 1px しか違わず名前の一部に見えるので、段より小さく置きます。 **見分けの付かない差に2つの役を割り当てません。** 新しい部品の大きさを決めるときは、まず近い段との差を見て寄せられないかを確かめます。1px 未満しか違わない2つの値は、読者には同じ大きさに見えます。 @@ -321,7 +321,7 @@ layout: page ### 影は持たない -影は1段階も持ちません。**輪郭はなるべく作りません。** 一覧の1件は囲みを持たず間隔だけで分け、**横に並んで箱でないと成立しない部品**（連載・特設パネル / リンクプレビュー）だけが枠線を持ちます。タブも枠を持たず、切り替わる範囲は帯の下辺の線が示します。 +影は1段階も持ちません。**読み物を並べる場所では輪郭をなるべく作りません。** 一覧の1件は囲みを持たず間隔だけで分け、記事へ送るカードで枠線を持つのは**横に並んで箱でないと成立しない部品**（連載・特設パネル / リンクプレビュー）だけです。タブも枠を持たず、切り替わる範囲は帯の下辺の線が示します。操作部品（検索窓・ドロップダウン）と、中身をまとめて囲む枠（統計・折りたたみ・年月のカード）はこの範囲の外です。枠がその部品の範囲そのものを作っているので、外すと境目が読めなくなります。 ### hover は1部品1反応 @@ -352,7 +352,7 @@ layout: page ヘッダーの帯の中だけは、下線も背景も動かさず文字色を1段階濃くします（帯から下がるドロップダウンの行は背景が変わります）。 -フッターのリンクだけは例外で、下線が左から 0.25 秒で伸びます。読者がわざわざ辿り着いた先なので動きを持たせても認知負荷にならない、という判断です。タブの切り替え（0.18 秒）と `details` の開閉は反応ではなく状態の変化なので、それぞれ別の時間を持ちます。 +フッターのリンクだけは例外で、下線が左から 0.25 秒で伸びます。読者がわざわざ辿り着いた先なので動きを持たせても認知負荷にならない、という判断です。**開閉・展開は反応ではなく状態の変化**なので、別の時間を持ちます。タブの切り替え、ドロップダウンと引き出しの開閉、検索窓の拡張、折りたたみの開閉がこれで、いずれも hover より長い側（0.12〜0.2 秒）に置きます。変わったことが読み取れるまで動きが続く必要があるからです。 ### フォーカスリング @@ -381,7 +381,7 @@ layout: page | 部品 | 表し方 | 実物 | | --- | --- | --- | | パンくず | 太字 | [すべての記事](/articles/) の2ページ目 | -| サイドバーのカテゴリ | 太字 | [Programming カテゴリ](/categories/Programming/) | +| 年月一覧 | 太字 | [すべての記事](/articles/) の年ページ | | ページャ | 現在のページだけネイビーの丸で塗る。省略の「…」は塗らない | [すべての記事](/articles/) の2ページ目 | | タブ | 下線がネイビーになり、太字になる。塗りにすると中身より目立つ | [トップページ](/) | @@ -438,4 +438,4 @@ layout: page ### 群のある一覧 -行き先が多い一覧（タグ一覧の「すべてのタグ」は679件）は、頭文字や年で群に分け、左のラベルが群を名乗る行に並べます。群の範囲は空きではなく行の上下の罫線が示します。群が多いときは節の先頭に群への飛び先を1行置きます。実物は[タグ一覧](/tags/#alltags)と[著者一覧](/authors/#awards)にあります。 +行き先が多い一覧（タグ一覧の「すべてのタグ」は全件を並べます）は、頭文字や年で群に分け、左のラベルが群を名乗る行に並べます。群の範囲は空きではなく行の上下の罫線が示します。群が多いときは節の先頭に群への飛び先を1行置きます。実物は[タグ一覧](/tags/#alltags)と[著者一覧](/authors/#awards)にあります。 From fc424031d3c31bb8680588665befa05c8d42cbca Mon Sep 17 00:00:00 2001 From: ma91n Date: Mon, 31 Aug 2026 18:07:07 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=E7=8F=BE=E5=9C=A8=E5=9C=B0=E3=81=AE?= =?UTF-8?q?=E3=80=8C=E5=B9=B4=E6=9C=88=E4=B8=80=E8=A6=A7=E3=80=8D=E3=81=AE?= =?UTF-8?q?=E8=A1=8C=E3=81=A8=E3=80=81=E5=88=B0=E9=81=94=E4=B8=8D=E8=83=BD?= =?UTF-8?q?=E3=81=A0=E3=81=A3=E3=81=9F=E5=AE=9F=E8=A3=85=E3=82=92=E8=90=BD?= =?UTF-8?q?=E3=81=A8=E3=81=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #3130 の②は「サイドバーのカテゴリ」の実物リンクが到達不能なので 「年月一覧」に差し替える指示だったが、差し替え先も到達不能だった。 `.archive-list-current` を出す枝は archive.ejs の `!is_month() && !is_year()`、つまり /articles/（全期間）でしか通らない。 そこでの page.path は articles/index.html なので `path.indexOf("2026")` は常に -1 になり、現在地の span は生成されない。 年ページは is_year() の枝で月別をカードで描くので trans を通らない。 生成物でも public 配下の全 HTML で 0 件だった。 表の行を落とし、CLAUDE.md の「文字だけが並ぶ帯」の例示も パンくずだけに詰めた。あわせて死んだ CSS（.archive-list-current）と 到達不能な分岐そのものを消す。transform を渡さないと list_archives は item.name をそのまま出すので、年一覧の描画は変わらない。 Co-Authored-By: Claude Fable 5 --- CLAUDE.md | 2 +- source/specials/styleguide/index.md | 1 - themes/future/css-src/theme-styles.styl | 3 --- themes/future/layout/archive.ejs | 10 +--------- 4 files changed, 2 insertions(+), 14 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 75ee45e6ea9..35c2429401f 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -708,7 +708,7 @@ bootstrap-subset → theme-styles.styl の順で `/css/site.css` に連結する - **状態は新しい色を足さずに表す**（#2864）。動かすのは太さか面のどちらか一方で、 両方は動かさない（#2722 で踏んだ） - **現在地（active / current）の表し方は、その部品が押す面を持つかで決まる。** - 文字だけが並ぶ帯（パンくず・年月一覧）は**太字**、 + 文字だけが並ぶ帯（パンくず）は**太字**、 丸や箱の的を持つ部品（ページャ）は**面**を塗る。帯の中で面を塗ると 現在地だけが浮き、的を持つ部品で太字にすると押せる範囲が変わらず所在が読めない - **タブは枠を持たない**（#3112）。カードで囲む形はフラット化 (#2747) の中で diff --git a/source/specials/styleguide/index.md b/source/specials/styleguide/index.md index 0c015e0d85d..c704fde2879 100644 --- a/source/specials/styleguide/index.md +++ b/source/specials/styleguide/index.md @@ -382,7 +382,6 @@ career: true | 部品 | 表し方 | 実物 | | --- | --- | --- | | パンくず | 太字 | [すべての記事](/articles/) の2ページ目 | -| 年月一覧 | 太字 | [すべての記事](/articles/) の年ページ | | ページャ | 現在のページだけネイビーの丸で塗る。省略の「…」は塗らない | [すべての記事](/articles/) の2ページ目 | | タブ | 下線がネイビーになり、太字になる。塗りにすると中身より目立つ | [トップページ](/) | diff --git a/themes/future/css-src/theme-styles.styl b/themes/future/css-src/theme-styles.styl index df3c199024a..8502f713fce 100644 --- a/themes/future/css-src/theme-styles.styl +++ b/themes/future/css-src/theme-styles.styl @@ -3286,9 +3286,6 @@ ul.tag-list { .archive-list-count:after { content: "本"; } -.archive-list-current { - font-weight: bold; -} /* 投稿が無い月のダミーカード (#2219)。月が歯抜けだと「無い」のか 見落としなのか区別できない。リンクにせず、ホバーにも応えない */ .archive-list-item-empty:hover { diff --git a/themes/future/layout/archive.ejs b/themes/future/layout/archive.ejs index 1b4da4e5c40..7503652233c 100644 --- a/themes/future/layout/archive.ejs +++ b/themes/future/layout/archive.ejs @@ -127,15 +127,7 @@ <% } %> <%- partial('_partial/section-heading', {id: 'years', text: '年別'}) %>
- <% - const trans = (str, path=page.path) => { - if (path.indexOf(str) > 0) { - return `${str}`; - } - return str; - } - %> - <%- list_archives({format: "YYYY", type:"yearly", transform:trans}) %> + <%- list_archives({format: "YYYY", type:"yearly"}) %>
<% } %>