From 641656cd38ea9531bb8f8384065b4c9069740726 Mon Sep 17 00:00:00 2001 From: okash1n <48118431+okash1n@users.noreply.github.com> Date: Wed, 28 Jan 2026 22:55:52 +0900 Subject: [PATCH 1/4] =?UTF-8?q?fix:=20=E3=83=96=E3=83=AD=E3=82=B0=E3=83=9A?= =?UTF-8?q?=E3=83=BC=E3=82=B8=E3=81=AE=E3=83=98=E3=83=83=E3=83=80=E3=83=BC?= =?UTF-8?q?=E3=81=A8=E3=82=B5=E3=82=A4=E3=83=89=E3=83=90=E3=83=BC=E3=81=AE?= =?UTF-8?q?=E5=A2=83=E7=95=8C=E7=B7=9A=E9=87=8D=E8=A4=87=E3=82=92=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - ヘッダーにz-index: 30を設定してサイドバーより上位に配置 - サイドバーの開始位置をヘッダーの高さ分下にオフセット - ヘッダーとサイドバーに境界線を追加して視覚的分離を改善 Closes #98 --- docs/.vitepress/theme/custom.css | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css index d889cf2..86c2f3f 100644 --- a/docs/.vitepress/theme/custom.css +++ b/docs/.vitepress/theme/custom.css @@ -33,6 +33,24 @@ --vp-home-hero-name-background: linear-gradient(90deg, #059669 0%, #059669 45%, #10B981 45%, #10B981 100%); } +/* Header z-index: ensure header is above sidebar */ +.VPNavBar { + z-index: 30; + background-color: #ffffff !important; + border-bottom: 1px solid var(--vp-c-divider); +} + +.dark .VPNavBar { + background-color: #1b1b1f !important; +} + +/* Sidebar: start below header */ +.VPSidebar { + top: var(--vp-nav-height, 64px) !important; + height: calc(100vh - var(--vp-nav-height, 64px)) !important; + border-right: 1px solid var(--vp-c-divider); +} + /* Hide default VitePress footer to use custom footer on all pages */ .VPFooter { display: none !important; From 3cdbf7b85a39c9b8415591f8aabb194c54146b74 Mon Sep 17 00:00:00 2001 From: okash1n <48118431+okash1n@users.noreply.github.com> Date: Wed, 28 Jan 2026 23:51:47 +0900 Subject: [PATCH 2/4] =?UTF-8?q?fix:=20=E3=83=98=E3=83=83=E3=83=80=E3=83=BC?= =?UTF-8?q?=E3=81=A8=E3=82=B5=E3=82=A4=E3=83=89=E3=83=90=E3=83=BC=E3=81=AE?= =?UTF-8?q?=E5=A2=83=E7=95=8C=E7=B7=9A=E9=87=8D=E3=81=AA=E3=82=8A=E5=95=8F?= =?UTF-8?q?=E9=A1=8C=E3=82=92=E4=BF=AE=E6=AD=A3=20(#98)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ブログページなどでサイドバーの境界線がヘッダー領域を突き抜けて表示される問題を修正しました。 変更内容： - ヘッダーのz-indexを30に設定してサイドバー（z-index: 25）より上に配置 - ヘッダーに明示的な背景色を設定（透過防止） - ライトモード: #ffffff - ダークモード: #1b1b1f - サイドバーの位置をヘッダーの高さ分調整 - top: var(--vp-nav-height, 64px) - height: calc(100vh - var(--vp-nav-height, 64px)) - サイドバーに右側境界線を追加 - ヘッダーの下部境界線を各メディアクエリ内のコンテナ/ラッパーに移動 - PC (960px+): .VPNavBar .container - タブレット (640-959px): .VPNavBar .wrapper - モバイル (<640px): .VPNavBar .wrapper これにより、ヘッダーが全ページで独立したコンポーネントとして機能し、 明確な視覚的階層（ヘッダー > サイドバー）が確立されます。 --- docs/.vitepress/theme/custom.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css index 86c2f3f..25e9fcd 100644 --- a/docs/.vitepress/theme/custom.css +++ b/docs/.vitepress/theme/custom.css @@ -37,7 +37,6 @@ .VPNavBar { z-index: 30; background-color: #ffffff !important; - border-bottom: 1px solid var(--vp-c-divider); } .dark .VPNavBar { @@ -67,6 +66,7 @@ max-width: 1280px !important; margin: 0 auto !important; padding: 0 64px !important; + border-bottom: 1px solid var(--vp-c-divider); } .VPNavBarTitle .VPImage.logo { @@ -80,6 +80,7 @@ @media (min-width: 640px) and (max-width: 959px) { .VPNavBar .wrapper { padding: 0 48px !important; + border-bottom: 1px solid var(--vp-c-divider); } .VPNavBarTitle .VPImage.logo { @@ -91,6 +92,10 @@ /* Mobile */ @media (max-width: 639px) { + .VPNavBar .wrapper { + border-bottom: 1px solid var(--vp-c-divider); + } + .VPNavBarTitle .VPImage.logo { height: 28px !important; width: auto !important; From 7e9dc1c3f9498e7074175b75f44d5c0e4eea908d Mon Sep 17 00:00:00 2001 From: okash1n <48118431+okash1n@users.noreply.github.com> Date: Thu, 29 Jan 2026 00:06:20 +0900 Subject: [PATCH 3/4] =?UTF-8?q?fix:=20.curtain=E8=A6=81=E7=B4=A0=E3=81=8C?= =?UTF-8?q?=E3=83=98=E3=83=83=E3=83=80=E3=83=BC=E9=A0=98=E5=9F=9F=E3=81=AB?= =?UTF-8?q?=E4=BE=B5=E5=85=A5=E3=81=99=E3=82=8B=E5=95=8F=E9=A1=8C=E3=82=92?= =?UTF-8?q?=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit サイドバー内の .curtain 要素が position: sticky で top: -64px に 設定されていたため、サイドバーの背景色を持ちながらヘッダー領域に 侵入していました。 この要素を display: none にすることで問題を解決しました。 --- docs/.vitepress/theme/custom.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css index 25e9fcd..4f5eef2 100644 --- a/docs/.vitepress/theme/custom.css +++ b/docs/.vitepress/theme/custom.css @@ -50,6 +50,11 @@ border-right: 1px solid var(--vp-c-divider); } +/* Fix curtain element that penetrates header */ +.VPSidebar .curtain { + display: none !important; +} + /* Hide default VitePress footer to use custom footer on all pages */ .VPFooter { display: none !important; From 02b7442715da84950d812a2be96f305ec0f3175d Mon Sep 17 00:00:00 2001 From: okash1n <48118431+okash1n@users.noreply.github.com> Date: Thu, 29 Jan 2026 02:17:49 +0900 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=E3=82=B5=E3=82=A4=E3=83=89=E3=83=90?= =?UTF-8?q?=E3=83=BC=E3=81=A8=E3=83=98=E3=83=83=E3=83=80=E3=83=BC=E3=81=AE?= =?UTF-8?q?=E3=83=9C=E3=83=BC=E3=83=80=E3=83=BC=E8=AA=BF=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - サイドバーグループ間の区切り線を削除 - ヘッダーボーダーを1pxに設定 - divider要素の非表示ルールを追加 - コンテンツエリアの垂直線を追加 - ロゴサイズ調整のメディアクエリを整理 --- docs/.vitepress/theme/custom.css | 145 ++++++++++++++++++++++++++----- 1 file changed, 122 insertions(+), 23 deletions(-) diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css index 4f5eef2..22e1321 100644 --- a/docs/.vitepress/theme/custom.css +++ b/docs/.vitepress/theme/custom.css @@ -31,6 +31,9 @@ --vp-home-hero-name-color: transparent; /* ISMS: #059669 (0-45%), Guide: #10B981 (45-100%) */ --vp-home-hero-name-background: linear-gradient(90deg, #059669 0%, #059669 45%, #10B981 45%, #10B981 100%); + + /* Remove sidebar border */ + --vp-sidebar-border-color: transparent; } /* Header z-index: ensure header is above sidebar */ @@ -43,11 +46,108 @@ background-color: #1b1b1f !important; } -/* Sidebar: start below header */ -.VPSidebar { +/* Header border */ +.VPNav { + border-bottom: 1px solid var(--vp-c-divider) !important; +} + +/* CRITICAL: Completely hide divider - ULTIMATE SPECIFICITY */ +html body .VPNav .divider, +html body .VPNav div.divider, +html body .VPNavBar .divider, +html body .VPNavBar div.divider, +html body div.divider, +html body .divider, +.divider.divider.divider, +.VPNavBar .divider-line, +.divider-line { + display: none !important; + visibility: hidden !important; + opacity: 0 !important; + height: 0 !important; + max-height: 0 !important; + width: 0 !important; + max-width: 0 !important; + overflow: hidden !important; + position: absolute !important; + left: -9999px !important; +} + +/* Remove all potential borders at Y=64px */ +.VPNav::after, +.VPNavBar::after, +.Layout > *:first-child::after { + display: none !important; +} + + +/* LEFT SIDEBAR - MAXIMUM SPECIFICITY border removal */ +html body aside.VPSidebar, +.VPSidebar.VPSidebar.VPSidebar { top: var(--vp-nav-height, 64px) !important; height: calc(100vh - var(--vp-nav-height, 64px)) !important; - border-right: 1px solid var(--vp-c-divider); + border: 0 !important; + border-width: 0 !important; + border-style: none !important; + box-shadow: none !important; + outline: 0 !important; +} + +html body .VPSidebar::before, +html body .VPSidebar::after, +.VPSidebar.VPSidebar::before, +.VPSidebar.VPSidebar::after { + content: none !important; + display: none !important; +} + +/* Remove border from sidebar nav wrapper - ALL MEDIA QUERIES */ +html body .VPSidebar .nav, +html body .VPSidebar > div { + border-top: 0 !important; + border-width: 0 !important; +} + +/* SOLUTION: Remove VitePress sidebar group divider line */ +.VPSidebar .group + .group { + border-top: none !important; + padding-top: 0 !important; +} + +/* CRITICAL: Force remove ALL borders in viewport */ +@media (min-width: 960px) { + .VPSidebar { + border-top: 0 !important; + border: 0 !important; + } + + .VPSidebar .nav { + border-top: 0 !important; + } + + /* Remove VPLocalNav border */ + .VPLocalNav { + border-top: 0 !important; + border-bottom: 0 !important; + display: none !important; + } + + /* Remove any layout borders */ + .Layout, + .VPContent { + border-top: 0 !important; + } +} + +@media (min-width: 1280px) { + .VPSidebar { + border-top: 0 !important; + border: 0 !important; + } + + .VPLocalNav { + display: none !important; + } } /* Fix curtain element that penetrates header */ @@ -60,20 +160,28 @@ display: none !important; } -/* Header alignment: match content area padding */ -/* PC */ -@media (min-width: 960px) { - .VPNavBar .wrapper { - padding: 0 !important; - } +/* Content area - prepare for pseudo-element */ +.VPDoc { + position: relative; +} - .VPNavBar .container { - max-width: 1280px !important; - margin: 0 auto !important; - padding: 0 64px !important; - border-bottom: 1px solid var(--vp-c-divider); +/* Add vertical line from header to aside using VPDoc pseudo-element */ +@media (min-width: 960px) { + .VPDoc.has-aside::after { + content: ''; + position: absolute; + top: 0; + right: 288px; + width: 1px; + height: 100%; + background: var(--vp-c-divider); + pointer-events: none; } +} +/* Logo size adjustments */ +/* PC */ +@media (min-width: 960px) { .VPNavBarTitle .VPImage.logo { height: 37px !important; width: auto !important; @@ -83,11 +191,6 @@ /* Tablet */ @media (min-width: 640px) and (max-width: 959px) { - .VPNavBar .wrapper { - padding: 0 48px !important; - border-bottom: 1px solid var(--vp-c-divider); - } - .VPNavBarTitle .VPImage.logo { height: 32px !important; width: auto !important; @@ -97,10 +200,6 @@ /* Mobile */ @media (max-width: 639px) { - .VPNavBar .wrapper { - border-bottom: 1px solid var(--vp-c-divider); - } - .VPNavBarTitle .VPImage.logo { height: 28px !important; width: auto !important;