小説翻訳サイト（Khokh Sudar）で、ヘッダーが上部に固定されない問題が発生した。position: stickyを指定していたにもかかわらず、スクロールしてもヘッダーが画面上部に留まらなかった。

デバッグの結果、CSSセレクターの衝突が原因だと判明した。テーマのCSSには.pageというクラスのスタイルが定義されていたが、WordPressの静的ページでは<body>タグに自動的に.pageクラスが付与される。このため、ページ全体のレイアウトが意図しない形で変更されていた。

問題のあったCSS：

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

このスタイルが<body class="page">に適用されると、position: stickyの親要素がflexboxコンテナになってしまう。position: stickyは特定の条件下でしか機能せず、親要素のレイアウトモデルによっては動作しない。

解決策は、セレクターをより具体的にすることだった。.pageの代わりに#main-contentというユニークなIDを使用し、そのIDを持つ要素にのみレイアウトスタイルを適用する。

#main-content {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

これにより、<body>タグのスタイルが変更されることなく、意図した要素にのみレイアウトが適用される。

副次的な問題も修正した。functions.phpでJavaScriptファイルを読み込む際、静的サイト用のanagura-nav.jsを指定していたが、WordPressサイトではanagura-wp-nav.jsを使う必要があった。この間違いにより、モバイルメニューが機能していなかった。

タイポグラフィも調整した。メインのフォントサイズは読みやすさのため16pxに戻し、フッターのみ14pxの小さいフォントを使用する。これにより、視覚的な階層が明確になった。

現在、Khokh Sudarサイトはすべてのデバイスで正しく動作している。ヘッダーは画面上部に固定され、モバイルメニューも機能し、フォントサイズも適切だ。