特設ページと連載一覧のパネルの囲みを外してフラットにする (#3152)

[ma91n]

Closes #3152

何を変えたか

記事へ送るカードの囲みは、一覧の1件（#2747）→ We're hiring（#2820）の順に外してきていて、枠が残っていたのは連載・特設のパネルだけでした。issue のとおり、パネルの既定をフラットにし、囲みは「強調のために枚数を絞った枠」だけの印にします。

部品の共有関係

_partial/panel-card.ejs（カード1枚）と _partial/post-panel-grid.ejs（3列のグリッド）を、次の7か所が共有しています。

呼び出し元	中身	選び方	今回
/series/	全78連載（年ごと）	全件	フラット
/specials/guidelines/	ガイドラインの公開記事28本	全件	フラット
/specials/httf/	歴代コンテスト＋競プロ記事	全件	フラット
/specials/advent-calendar/	リバイバル記事	全件	フラット
/specials/techcast/	ポッドキャストの記事	全件	フラット
/specials/gallery/	見本（実物の partial を呼ぶ）	—	両方を展示
トップページの「特集」	候補から旬の2枚	絞り込み	枠を残す

CSS は .series-panels .article-card の1ルールが全部を描いていたので、ページ単位ではなく「枠の性格」で分けました。囲みは包みに series-panels-boxed を足したときだけ付きます。

ホームの扱い（issue に挙がっていない）

現状維持（枠あり）にしています。 issue の「パネルは特別に強調するなどの意図がある時のみ部分的に絞りたい」に、この枠がそのまま当たるためです。「特集」は候補（アドベント → Tech Cast → HTTF → 連載 → ガイドライン）から旬の2枚だけを選んで出す枠で（#2892）、行き先の全件は /series/ ・ /specials/ が持ち、そちらはフラットな一覧になります。

「特設ページだから枠」ではなく「選んで絞ったから枠」という線にしたので、/specials/techcast/ も issue の4ページと同じくフラットにしました（同じ partial・同じ性格の全件一覧で、ここだけ枠を残すと線が引けなくなります）。ホームも一緒にフラット化する案は、この線を採るなら別の判断になるのでこの PR には含めていません。

生成HTMLで、ホームの変更が包みのクラスと h-100 の付け替えだけであること、実効値が変わらないことを確認しています（下記）。

フラット化の設計

.series-panels .article-card { display:flex; gap:12px; align-items:center; margin:0 }
.series-panels.row, .series-panels > .row { --bs-gutter-x:48px; --bs-gutter-y:24px }
.series-panels-boxed.row, .series-panels-boxed > .row { --bs-gutter-x:24px; --bs-gutter-y:24px }
.series-panels-boxed .article-card { gap:16px; padding:18px; height:100%; border:1px solid var(--rule-base); border-radius:card-radius }

• 新しいクラス・サイズ・色は作っていません。 値はすべて既存のもの（gap:12px は We're hiring とランキングの行と同じ、48 / 24 は4の倍数の刻み、rule-base はそのまま）
• 内側の余白を持たないので、サムネの左端が節見出し・本文とそろいます（記事末の箱を枠線ではなくグレー背景で区別する #2820 と同じ）
• 外の空きは縦横で違います。比べる相手（中の空き）が軸ごとに違うため
  • 横は 48px — 隣の列との境目で近づくのは「左のカードの文字」と「右のカードのサムネ」なので、中の空き（12px）の4倍。24px では2倍にしかならず、同じ形の We're hiring が同じ判断をしています（記事末の箱を枠線ではなくグレー背景で区別する #2820 の「左のパネルの説明文が右のパネルのロゴに近すぎる」）
  • 縦は 24px のまま — 1枚は［サムネ｜文字］の横帯なので、縦に並ぶ相手との間に挟まる中の空きは題と添えの 4px しかありません。48px にすると帯そのもの（59px）とほぼ同じ高さの空きになり、囲みを外した意味が消えます
• hover は変えていません（題に下線・画像が一段引く、というカードの型のまま）。We're hiring が行の型（面）に移った（We're hiring の2リンクは、グレーアウトの面にすべきか？ #3113）のは1枚＝1行き先だからで、パネルは HTTF のメタと「特集」の全件導線に別のリンクを含みます
• h-100（height:100%!important）は markup から外し、囲みを持つ枠の CSS が持ちます。フラットではカードが中身の高さに収まり、行の中でサムネの頭がそろいます
• ガターの値は CSS が持ち、呼び出し側の .g-4 は落としました（markup と CSS の2箇所に同じ値を持たない）

情報密度の before / after

本文列 col-md-9（コンテナ1320pxで990px）・3列・題は Noto Sans CJK Bold 15.6px の実測、高さは CSS の値から計算しています。

	題の幅	1枚の高さ（題1行）	行の送り	グリッド全体	高さ900pxに入る枚数
before（枠あり）	164px	97px	123px	3,201px	21枚
after（フラット）	190px	59px	83px	2,169px（-32%）	30枚

/series/ の78枚での実測です。ほかのページも同じ向きでした。

ページ	グリッド全体	900pxに入る枚数
/series/（78枚）	3,201 → 2,169px（-32%）	21 → 30枚
/specials/guidelines/（28枚）	1,505 → 1,038px（-31%）	18 → 24枚
/specials/httf/（24枚）	1,165 → 773px（-34%）	18 → 24枚
/specials/advent-calendar/（10枚）	637 → 463px（-27%）	12 → 12枚

題が2行に折り返す連載も 6件 → 2件 に減ります（幅が 164px → 190px になるため）。

ガイド側の追従

• スタイルガイド /specials/styleguide/（「影は持たない」）— スタイルガイドの記述を実態に合わせる（段の外・現在地の表・ネイビーの例外・状態変化・枠線の範囲） (#3130) #3143 で入った「記事へ送るカードで枠線を持つのは横に並んで箱でないと成立しない部品（連載・特設パネル / リンクプレビュー）だけ」を実態に合わせました。枠線を持つのは強調のために枚数を絞った枠とリンクプレビューだけで、まとまりは間隔の比（48px 対 12px）が作る、と書き換えています
• 部品ギャラリー /specials/gallery/ — 「パネル」の見本を「強調したパネル」に改め、囲みを持つ形として展示。「パネルの並び」が既定のフラットな形を名乗ります
• _variables.styl の影・角丸のコメント（囲みを持つ部品の一覧）と、theme-styles.styl の カード＋影をやめてフラットな見せ方に寄せる #2747 のコメント
• CLAUDE.md に「パネルの既定はフラット。囲みを持つのは強調のために枚数を絞った枠だけ」の節を追加

検証

• npx hexo generate の生成HTMLを origin/main のものと突き合わせ
  • page/2/ と /specials/ は CSS のハッシュ以外まったく同一
  • ホームの差分は series-panels-boxed の追加・row g-4 → row・h-100 の除去だけ。CSS のカスケードを追うと実効値は before と同一（gap 16 / padding 18 / height 100% / border 1px rule-base / radius 8px、ガター 24/24）
  • 4ページ＋ techcast は series-panels row と h-100 なしのカードになっている
• make css の差分は .series-panels まわりの4ルールだけ（他の宣言は1つも動いていない）。make lint-css は3項目とも通過
• 変更した .ejs 6本と styleguide/index.md に textlint、CLAUDE.md と styleguide/index.md に markdownlint-cli2 — いずれも0件

目視の確認ポイント

/series/ ・ /specials/guidelines/ ・ /specials/httf/ ・ /specials/advent-calendar/（＋ /specials/techcast/）で、

1. カードが枠を失い、サムネの左端が節見出しとそろっているか
2. 列の間（48px）と行の間（24px）で、1枚のまとまりが読み取れるか
3. サムネの無い連載の空き枠（薄い灰色の 88×59）が白地の上で浮いていないか
4. カーソルを乗せたときの反応（題に下線・画像が引く）が変わっていないか
5. トップページの「特集」2枚と /specials/gallery/ の「強調したパネル」は今までどおり枠つきか

🤖 Generated with Claude Code