From 22c34dfad3e8fa4e63d533bf2d0b2888633f9bbe Mon Sep 17 00:00:00 2001 From: ma91n Date: Tue, 8 Sep 2026 00:40:15 +0900 Subject: [PATCH 1/2] =?UTF-8?q?/tags/=20=E3=81=AE=E8=A6=AA=E5=AD=90?= =?UTF-8?q?=E3=81=AE=E6=9C=A8=E3=81=A7=E6=8A=BC=E3=81=9B=E3=81=AA=E3=81=84?= =?UTF-8?q?=E3=83=8E=E3=83=BC=E3=83=89=E3=82=92=E3=83=98=E3=83=83=E3=83=80?= =?UTF-8?q?=E3=83=BC=E3=81=AE=E7=BE=A4=E3=83=A9=E3=83=99=E3=83=AB=E3=81=A8?= =?UTF-8?q?=E5=90=8C=E3=81=98=E6=9E=A0=E4=BB=98=E3=81=8D=E3=81=AB=E3=81=99?= =?UTF-8?q?=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit タグとして実在しない分類ノード（AI・DB・OS…11件）が、押せる根の名前と 色だけ（ink-strong と ink-mute、差 1.62:1）で分かれていた。ヘッダーの ドロップダウンの群ラベル（.category-group-label）を当てて、四角い枠で分ける。 枠の指定をヘッダー限定のスコープから基底へ移し、ヘッダーには位置の補正だけ残す。 Fixes #3226 Co-Authored-By: Claude Opus 5 (1M context) --- CLAUDE.md | 8 +++++ themes/future/css-src/theme-styles.styl | 41 +++++++++++++++---------- themes/future/layout/tags.ejs | 6 ++-- 3 files changed, 36 insertions(+), 19 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 7501ed9d6dc..0b85f7aaa8a 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -194,6 +194,14 @@ lede: "Go 1.27 で標準ライブラリに追加されたuuidパッケージを `/categories/` の「累計 327本」はチップにしていたが、#2405 の根拠 （タグチップは塗り、こちらは枠だけ、で性質の違いを示す）は #2990 で タグチップも地をやめた時点で消えている。**素の文字**（`ink-mute` × `text-meta`）で置く + - **「分類の名前で、押せない」ラベルは四角い枠の `.category-group-label` 1つ**（#3226）。 + ヘッダーのドロップダウンの群（`開発` `基盤`）と `/tags/` の親子の木の実在しない + ノード（AI・DB・OS…11件）が同じクラスを当てる。押せる名前（太字・`ink-strong`）と + 同じ列に並ぶので色だけでは分かれず（差 1.62:1、axe `link-in-text-block`）、 + 静止の下線は本文だけの規則（#2926）なので枠で分ける。チップとは + 四角・非太字・`rule-base` の3点で取り違えない。木には枝の縦罫もあるが、 + 「群を表す手は1つ」（サイドバーの節）には当たらない——枠が示すのは範囲ではなく + 押せないことで、押せる根は縦罫だけを持つ - **著者数は出さない。** ここで選ぶのは行き先のカテゴリで、何人が書いたかは その判断に効かない。数字はカテゴリページのサイドバーが持つ - **タグのチップは枠の左端をそろえる**（`ul.tag-list` の `margin-left: -4px`。 diff --git a/themes/future/css-src/theme-styles.styl b/themes/future/css-src/theme-styles.styl index 2606bbe556c..de4ecb19c8f 100644 --- a/themes/future/css-src/theme-styles.styl +++ b/themes/future/css-src/theme-styles.styl @@ -665,29 +665,30 @@ Header and header elements font-weight: 700; color: var(--ink-mute); } -/* カテゴリの群の名前 (#2908)。素の文字で、行き先である行より弱く置く - （添えの段。太字にもしない）。**群を表す手はその場所で1つだけ持つ。** - サイドバーは下の縦罫が範囲を示すので、ラベル自身は印を持たない */ +/* 群の名前 (#2908)。「分類の名前で、押せない」ものの形で、ヘッダーのカテゴリの群と + /tags/ の親子の木の実在しないノード（AI・DB・OS…#3226）が同じ形を使う。 + 行き先である行より弱く置く（添えの段。太字にもしない）。 + 枠を持つのは、押せる名前と並んだときに色以外の手がかりが要るため。 + 2列の多段組で左の余白が無く、縦罫を引く場所が無いので、印はラベル自身が持つ。 + 行にはアイコンがあるため、素の文字にすると子のほうが手厚く見える。 + 枠はタグのチップ（ピル型・太字・rule-strong）と取り違えられないよう、 + 角は radius-small の四角のままで地は敷かず、線は一段薄い rule-base。 + 幅は文字ちょうどに留める（列幅いっぱいに伸ばすと同じ幅のボタンの列に見える） */ .category-group-label { display: block; + width: fit-content; margin: 0 0 space-step; + padding: 2px (space-step * 2); + border: 1px solid var(--rule-base); + border-radius: radius-small; font-size: text-meta; line-height: leading-row; color: var(--ink-mute); } -/* ドロップダウンだけは枠を持つ。2列の多段組で左の余白が無く、縦罫を引く場所が - 無いので、印はラベル自身が持つしかない。行にはアイコンがあるため、 - ここで素の文字にすると子のほうが手厚く見える。 - 枠はタグのチップ（ピル型・薄い地）と取り違えられないよう、角は radius-small の - 四角のままで地は敷かない。幅は文字ちょうどに留める - （列幅いっぱいに伸ばすと同じ幅のボタンの列に見える）。 - 枠の中の文字は行のアイコンの頭（.header-dropdown-item の左 12px）に揃える */ +/* ドロップダウンでは枠の中の文字を行のアイコンの頭 + （.header-dropdown-item の左 12px）に揃える */ .header-dropdown-group .category-group-label { - width: fit-content; margin-left: (space-step * 3) - chip-pad-x - 1px; - padding: 2px (space-step * 2); - border: 1px solid var(--rule-base); - border-radius: radius-small; } /* カテゴリ・連載の行。リソース / アクティビティの行と違って説明を持たない。 名前が主題そのもので、6行並ぶので太字にもしない（検索パネルのカテゴリ行を @@ -3690,15 +3691,21 @@ ul.tag-list { break-inside: avoid; margin-bottom: (space-step * 6); } -/* 群の名前。根がタグとして実在すれば行き先になる（面を持たないので反応は下線 +/* 群の名前。根はタグとして実在する行き先（面を持たないので反応は下線 #3162。/categories/ の .category-index-name と同じ型）。実在しないノード - （AI・DB・OS…）は素の文字で、そのぶん薄い段に落ちる */ + （AI・DB・OS…）はこのラベルではなく、ヘッダーのカテゴリの群と同じ + .category-group-label で描く (#3226)。押せる名前と押せない名前が + 色だけで分かれると、押してみるまで区別が付かない（差 1.62:1） */ .tag-forest-label { margin: 0 0 (space-step * 2); font-size: text-body; line-height: leading-row; font-weight: bold; - color: var(--ink-mute); +} +/* 木の根の枠付きラベルは、押せる根の名前と同じ 8px で枝から離す。 + 4px のままだと、枠の下辺が線として見えるぶん、押せる根より詰まって見える */ +.tag-forest > li > .category-group-label { + margin-bottom: (space-step * 2); } .tag-forest-label a { color: var(--ink-strong); diff --git a/themes/future/layout/tags.ejs b/themes/future/layout/tags.ejs index 27f68901434..ec15e058504 100644 --- a/themes/future/layout/tags.ejs +++ b/themes/future/layout/tags.ejs @@ -64,9 +64,11 @@ このページ1枚でしか使わないので partial にはしない %> <% // 子を持たない子はチップ、持つ子は自分のラベルを立てて中を字下げする。 - // 名前とチップの markup は根と同じなので、深さだけ変えて再帰で描く + // 名前とチップの markup は根と同じなので、深さだけ変えて再帰で描く。 + // タグとして実在しないノード（AI・DB・OS…）は押せないので、ヘッダーの + // カテゴリの群と同じ枠付きのラベルで描く (#3226) function renderTagGroup(n, depth) { %> -

<% if (n.path) { %><%= n.name %><%= n.posts %><% } else { %><%= n.name %><% } %>

+ <% if (n.path) { %>

<%= n.name %><%= n.posts %>

<% } else { %>

<%= n.name %>

<% } %>
<% if (n.chips.length) { %>
<%- partial('_partial/tag-chips', {items: n.chips}) %>
From d705de4c8772a4db9c8d8f502b94db3f95892fac Mon Sep 17 00:00:00 2001 From: ma91n Date: Tue, 8 Sep 2026 09:02:04 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=E6=9C=A8=E3=81=AE=E6=8A=BC=E3=81=9B?= =?UTF-8?q?=E3=81=AA=E3=81=84=E3=83=8E=E3=83=BC=E3=83=89=E3=81=AF=E6=9E=A0?= =?UTF-8?q?=E3=82=92=E6=8C=81=E3=81=9F=E3=81=9A=E3=80=81=E5=A4=A7=E3=81=8D?= =?UTF-8?q?=E3=81=95=E3=83=BB=E5=A4=AA=E3=81=95=E3=83=BB=E8=89=B2=E3=81=A7?= =?UTF-8?q?=E5=88=86=E3=81=91=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 押せる名前（本文の段・太字・ink-strong）に対して text-meta・400・ink-mute の 3つで分かれるので、枠を足さなくても区別が付く。枠を持つのは縦罫を引く場所が 無いドロップダウンだけに戻す。木は枝の縦罫が範囲を示している。 Co-Authored-By: Claude Opus 5 (1M context) --- CLAUDE.md | 14 +++++------ themes/future/css-src/theme-styles.styl | 33 +++++++++++++------------ 2 files changed, 24 insertions(+), 23 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 0b85f7aaa8a..3700b112f7b 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -194,14 +194,14 @@ lede: "Go 1.27 で標準ライブラリに追加されたuuidパッケージを `/categories/` の「累計 327本」はチップにしていたが、#2405 の根拠 （タグチップは塗り、こちらは枠だけ、で性質の違いを示す）は #2990 で タグチップも地をやめた時点で消えている。**素の文字**（`ink-mute` × `text-meta`）で置く - - **「分類の名前で、押せない」ラベルは四角い枠の `.category-group-label` 1つ**（#3226）。 + - **「分類の名前で、押せない」ラベルは `.category-group-label` 1つ**（#3226）。 ヘッダーのドロップダウンの群（`開発` `基盤`）と `/tags/` の親子の木の実在しない - ノード（AI・DB・OS…11件）が同じクラスを当てる。押せる名前（太字・`ink-strong`）と - 同じ列に並ぶので色だけでは分かれず（差 1.62:1、axe `link-in-text-block`）、 - 静止の下線は本文だけの規則（#2926）なので枠で分ける。チップとは - 四角・非太字・`rule-base` の3点で取り違えない。木には枝の縦罫もあるが、 - 「群を表す手は1つ」（サイドバーの節）には当たらない——枠が示すのは範囲ではなく - 押せないことで、押せる根は縦罫だけを持つ + ノード（AI・DB・OS…11件）が同じクラスを当てる。押せる名前（本文の段・太字・ + `ink-strong`）と同じ列に並ぶので色だけでは分かれず（差 1.62:1、axe + `link-in-text-block`）、**大きさ（`text-meta`）・太さ（400）・色（`ink-mute`）の3つ**で + 分ける。静止の下線は本文だけの規則（#2926）なので使わない。 + **枠を持つのはドロップダウンだけ**（縦罫を引く場所が無い）。木は枝の縦罫が + 範囲を示すので枠は足さない——「群を表す手はその場所で1つ」 - **著者数は出さない。** ここで選ぶのは行き先のカテゴリで、何人が書いたかは その判断に効かない。数字はカテゴリページのサイドバーが持つ - **タグのチップは枠の左端をそろえる**（`ul.tag-list` の `margin-left: -4px`。 diff --git a/themes/future/css-src/theme-styles.styl b/themes/future/css-src/theme-styles.styl index de4ecb19c8f..c6f6505223d 100644 --- a/themes/future/css-src/theme-styles.styl +++ b/themes/future/css-src/theme-styles.styl @@ -667,28 +667,30 @@ Header and header elements } /* 群の名前 (#2908)。「分類の名前で、押せない」ものの形で、ヘッダーのカテゴリの群と /tags/ の親子の木の実在しないノード（AI・DB・OS…#3226）が同じ形を使う。 - 行き先である行より弱く置く（添えの段。太字にもしない）。 - 枠を持つのは、押せる名前と並んだときに色以外の手がかりが要るため。 - 2列の多段組で左の余白が無く、縦罫を引く場所が無いので、印はラベル自身が持つ。 - 行にはアイコンがあるため、素の文字にすると子のほうが手厚く見える。 - 枠はタグのチップ（ピル型・太字・rule-strong）と取り違えられないよう、 - 角は radius-small の四角のままで地は敷かず、線は一段薄い rule-base。 - 幅は文字ちょうどに留める（列幅いっぱいに伸ばすと同じ幅のボタンの列に見える） */ + 素の文字で、行き先である行より弱く置く（添えの段。太字にもしない）。 + 押せる名前（本文の段・太字・ink-strong）とは大きさ・太さ・色の3つで分かれる。 + **群を表す手はその場所で1つだけ持つ。** サイドバーと木は縦罫が範囲を示すので、 + ラベル自身は印を持たない */ .category-group-label { display: block; - width: fit-content; margin: 0 0 space-step; - padding: 2px (space-step * 2); - border: 1px solid var(--rule-base); - border-radius: radius-small; font-size: text-meta; line-height: leading-row; color: var(--ink-mute); } -/* ドロップダウンでは枠の中の文字を行のアイコンの頭 - （.header-dropdown-item の左 12px）に揃える */ +/* ドロップダウンだけは枠を持つ。2列の多段組で左の余白が無く、縦罫を引く場所が + 無いので、印はラベル自身が持つしかない。行にはアイコンがあるため、 + ここで素の文字にすると子のほうが手厚く見える。 + 枠はタグのチップ（ピル型・薄い地）と取り違えられないよう、角は radius-small の + 四角のままで地は敷かない。幅は文字ちょうどに留める + （列幅いっぱいに伸ばすと同じ幅のボタンの列に見える）。 + 枠の中の文字は行のアイコンの頭（.header-dropdown-item の左 12px）に揃える */ .header-dropdown-group .category-group-label { + width: fit-content; margin-left: (space-step * 3) - chip-pad-x - 1px; + padding: 2px (space-step * 2); + border: 1px solid var(--rule-base); + border-radius: radius-small; } /* カテゴリ・連載の行。リソース / アクティビティの行と違って説明を持たない。 名前が主題そのもので、6行並ぶので太字にもしない（検索パネルのカテゴリ行を @@ -3702,9 +3704,8 @@ ul.tag-list { line-height: leading-row; font-weight: bold; } -/* 木の根の枠付きラベルは、押せる根の名前と同じ 8px で枝から離す。 - 4px のままだと、枠の下辺が線として見えるぶん、押せる根より詰まって見える */ -.tag-forest > li > .category-group-label { +/* 木の中の押せないラベルも、押せる根の名前と同じ 8px で枝から離す */ +.tag-forest .category-group-label { margin-bottom: (space-step * 2); } .tag-forest-label a {