From 1d97d906b9c1c53aab01344f4a44144e7cdb15bb Mon Sep 17 00:00:00 2001 From: ma91n Date: Tue, 8 Sep 2026 00:40:11 +0900 Subject: [PATCH] =?UTF-8?q?=E8=A8=98=E4=BA=8B=E6=9C=AB=E3=81=AE=E5=B8=AF?= =?UTF-8?q?=E3=81=BE=E3=81=A7=E3=81=AE=E7=A9=BA=E3=81=8D=E3=82=92=2056px?= =?UTF-8?q?=20=E3=81=AE1=E7=AE=87=E6=89=80=E3=81=AB=E6=88=BB=E3=81=99=20(#?= =?UTF-8?q?3227)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 共有ボタンの ul が Bootstrap の既定で持つ下 1rem と、1024px 以下で中身が 空になるサイドバーの padding-bottom 40px が .article-appendix の margin-top に上乗せされ、375px で 112px・1280px で 72px になっていた。前者は .social-area の中で落とし、後者は footer-gap と同じ :has(+ .article-appendix) で落とす。帯を持たないページ（一覧・特設）の空きは変えない。 Co-Authored-By: Claude Opus 5 (1M context) --- CLAUDE.md | 4 ++++ themes/future/css-src/theme-styles.styl | 12 ++++++++++++ 2 files changed, 16 insertions(+) diff --git a/CLAUDE.md b/CLAUDE.md index 7501ed9d6dc..cb51877fe27 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -1735,6 +1735,10 @@ bootstrap-subset → theme-styles.styl の順で `/css/site.css` に連結する - 帯までの空きは `.article-appendix` の `margin-top` の1箇所で決める。共有ボタンの下 padding と 著者紹介の `margin-bottom` を落として、著者紹介の有無で空きが変わらないようにした （以前は 48px と 67.5px でばらついていた） + - **共有ボタンの `ul` が Bootstrap の既定で持つ下 1rem と、サイドバーの `padding-bottom` + 40px もここに上乗せされていた**（#3227。375px で 112px、1280px で 72px）。1024px 以下では + 目次が消えて中身が空でも padding だけが本文と帯の間に残る。前者は `.social-area` の中で + 落とし、後者は `.footer-gap` と同じ `:has(+ .article-appendix)` で落とす - 短いページでは `.wrap > footer` の `margin-top: auto` が帯とネイビーの間に白を入れるので、 余りは帯より前（本文の `container`）で吸わせる - 残っている難点: 中身がコンテナ幅（約1,116px）になるぶん、関連記事の行のタイトル占有率が diff --git a/themes/future/css-src/theme-styles.styl b/themes/future/css-src/theme-styles.styl index 2606bbe556c..cbf51851222 100644 --- a/themes/future/css-src/theme-styles.styl +++ b/themes/future/css-src/theme-styles.styl @@ -1023,6 +1023,8 @@ Header and header elements font-size: text-base; display: inline-block; } +/* サイドバーがフッター直前に来るとき（1024px 以下で本文の下に落ちたとき・ + 2列で本文より長いとき）のフッター前の空き。帯が続くときは下で落とす (#3227) */ .blog-sidebar { padding-bottom: 40px; } @@ -1957,6 +1959,11 @@ summary:focus-visible, .social-area { padding: 16px 0 0; } +/* ul は Bootstrap の既定で下に 1rem 持つ。著者紹介との間は .author-box の + margin-top が持つので、ここに残すと帯までの空きに上乗せされる (#3227) */ +.social-area .social-button { + margin-bottom: 0; +} .img-frame-line { border: 1px solid var(--rule-base); @@ -5070,6 +5077,11 @@ a.award-badge:focus { .wrap > .container:has(+ .article-appendix) .footer-gap { margin-bottom: 0; } +/* サイドバーの下の空きも同じ。1024px 以下では目次が消えて中身が空でも + padding だけが本文と帯の間に残る (#3227) */ +.wrap > .container:has(+ .article-appendix) .blog-sidebar { + padding-bottom: 0; +} /* タブ。JS を使わず radio + label で切り替えている。