fix: ヘッダーとサイドバーの境界線重なり問題を修正#99
Merged
Merged
Conversation
- ヘッダーにz-index: 30を設定してサイドバーより上位に配置 - サイドバーの開始位置をヘッダーの高さ分下にオフセット - ヘッダーとサイドバーに境界線を追加して視覚的分離を改善 Closes #98
ブログページなどでサイドバーの境界線がヘッダー領域を突き抜けて表示される問題を修正しました。 変更内容： - ヘッダーの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 これにより、ヘッダーが全ページで独立したコンポーネントとして機能し、 明確な視覚的階層（ヘッダー > サイドバー）が確立されます。
サイドバー内の .curtain 要素が position: sticky で top: -64px に 設定されていたため、サイドバーの背景色を持ちながらヘッダー領域に 侵入していました。 この要素を display: none にすることで問題を解決しました。
- サイドバーグループ間の区切り線を削除 - ヘッダーボーダーを1pxに設定 - divider要素の非表示ルールを追加 - コンテンツエリアの垂直線を追加 - ロゴサイズ調整のメディアクエリを整理
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
概要
ブログページなどでサイドバーの境界線がヘッダー領域を突き抜けて表示される視覚的な不具合を修正しました。
Closes #98
変更内容
1. ヘッダーのz-index設定
.VPNavBarにz-index: 30を設定（サイドバーのz-index: 25より上位）2. 背景色の明示的な設定
#ffffff !important#1b1b1f !important3. サイドバーの位置調整
top: var(--vp-nav-height, 64px) !importantheight: calc(100vh - var(--vp-nav-height, 64px)) !importantborder-right: 1px solid var(--vp-c-divider)4. ヘッダー境界線の配置最適化
.VPNavBarからコンテンツ幅に合わせた要素に移動.VPNavBar .container.VPNavBar .wrapper.VPNavBar .wrapper検証済み
/blog/)/requirements/)/controls/)/)スクリーンショット
すべての検証において、以下が確認されました：
テストプラン