Khokh SudarサイトのSticky Header修正
小説翻訳サイト（Khokh Sudar）で、ヘッダーが上部に固定されない問題が発生した。position: stickyを指定していたにもかかわらず、スクロールしてもヘッダーが画面上部に留まらなかった。 デバッグの結果、CSSセレクターの衝突が原因だと判明した。テーマのCSSには.pageというクラスのスタイルが定義されていたが、WordPressの静的ページでは<body>タグに自動的に.pageクラスが付与される。このため、ページ全体のレイアウトが意図しない形で変更されていた。 問題のあったCSS： このスタイルが<body class=”page”>に適用されると、position: stickyの親要素がflexboxコンテナになってしまう。position: stickyは特定の条件下でしか機能せず、親要素のレイアウトモデルによっては動作しない。 解決策は、セレクターをより具体的にすることだった。.pageの代わりに#main-contentというユニークなIDを使用し、そのIDを持つ要素にのみレイアウトスタイルを適用する。 これにより、<body>タグのスタイルが変更されることなく、意図した要素にのみレイアウトが適用される。 副次的な問題も修正した。functions.phpでJavaScriptファイルを読み込む際、静的サイト用のanagura-nav.jsを指定していたが、WordPressサイトではanagura-wp-nav.jsを使う必要があった。この間違いにより、モバイルメニューが機能していなかった。 タイポグラフィも調整した。メインのフォントサイズは読みやすさのため16pxに戻し、フッターのみ14pxの小さいフォントを使用する。これにより、視覚的な階層が明確になった。 現在、Khokh Sudarサイトはすべてのデバイスで正しく動作している。ヘッダーは画面上部に固定され、モバイルメニューも機能し、フォントサイズも適切だ。