Blocksy脱出 →
Hello Elementor
この一点の問題が、テーマ丸ごとの移行作戦を引き起こした。WordPressテーマの構造的制約と格闘し、最終的に解決策を見つけるまでの記録を公開する。
PCでのサイト表示は問題なかった。しかしスマートフォンで確認したとき、致命的な問題が判明した。カスタムHTMLブロックに実装したハンバーガーメニューが、正しく動作しない。
原因を調査すると、Blocksyテーマの構造的な問題であることが判明した。
.ct-drawer-canvas の内側でレンダリングする。このラッパーの制約により、カスタムHTMLブロック内の
position: fixed が正常に機能しない。つまり、どれだけCSSを工夫してもBlocksyのアーキテクチャ上、SPナビのfixedは効かない。
これはCSSの書き方の問題ではなく、テーマそのものの構造的制約だった。カスタムCSSで何度試みても解決しない。Blocksy上での解決は事実上不可能という結論に至った。
問題が構造的なものである以上、解決策は一つだ。テーマを変える。
候補を絞り込み、最終的に「Hello Elementor」を選択した。軽量でシンプル、かつカスタムHTMLの配置に制約が少ない。ブランドCSSを別途管理できる点も評価した。
テーマ変更は単純なワンクリックではない。既存のデザインシステム・CSS・ナビゲーション構造を、新テーマの環境に移植する大規模作業だ。
.site-header { display: none !important; }
functions.phpに移植。wp_body_openフックを使い、#main-containerの外側にナビを配置することで、position:fixedが正常に機能するようになった。function nk_global_nav() {
echo ‘<nav id=”nk-nav”>…</nav>’;
echo ‘<div id=”nk-drawer”>…</div>’;
}
今回の作戦で、WordPressのテーマ選定がいかに重要かを痛感した。カスタムHTMLで完全なHTMLを書くアプローチを採用する場合、テーマのアーキテクチャが実装の自由度を大きく左右する。
Blocksyは優れたテーマだが、独自の描画ラッパーが「HTMLのフルコントロール」という今回の戦術と相性が悪かった。Hello Elementorのシンプルな構造は、このアプローチと完全に合致していた。
だからposition:fixedが効かない。テーマのアーキテクチャの問題だ。」 — 調査中の結論 / Claude分析
また、WordPressのカスタムHTMLブロックには重要な制約がある。スタイルタグを含む完全なHTMLを貼り付ける場合、ビジュアルエディターに切り替えるとstyleタグがWordPressに削除される。常にコードエディターモードで作業することが必須だ。
さらに、ブロックの区切りコメント（wp:html / /wp:html）をコードに含めてはいけない。これもカスタムHTMLブロックを壊す原因になる。
テーマ移行を経て、コードの管理方法にも一つの原則が確立された。CSSとPHPのすべてのコードブロックに、開始と終了のコメントを必ず入れる。
BLOCK: NAV — グローバルナビゲーション
============================================================ */
… コード …
/* END BLOCK: NAV */
このコメント規約により、どのブロックがどの機能を担当するかが一目でわかる。問題が発生した際のロールバック（巻き戻し）も、ブロック単位で対応できる。チームでの作業ではないが、AIとの共同作業においてもコードの可読性と管理性は不可欠だ。
- BlocksyのSPナビ問題の根本原因（.ct-drawer-canvasによるposition:fixed無効化）を特定
- Hello Elementorへのテーマ移行を完了。マスターブランドCSS v2.1を移植
- wp_body_openフックによるグローバルナビの#main-container外配置を実現
- ハンバーガー／ドロワーナビのSP実装を完了
- 全完成ページのBLOCK 01/02クリーンアップを実施
- ブロックコメント規約（BLOCK: NAME / END BLOCK: NAME）を確立
