はじめに
ElementorとWordPressテーマが競合すると、レイアウト崩れ・ヘッダーの二重表示・フォントの上書きなどが起きます。Elementorに最適なテーマへの変更と競合箇所の特定方法を解説します。
症状・原因
- Elementorで作ったページのレイアウトがテーマのCSSで崩れる
- ヘッダーやフッターが二重に表示される
- フォントや色がテーマ設定とElementor設定で競合している
- テーマを変更したらElementorのページが崩れた
解決手順
ステップ1：Hello Elementorテーマに切り替える（最も確実）
Elementorが公式提供する軽量テーマ「Hello Elementor」は競合が最も少ないです：
wp theme install hello-elementor --activate切り替え後にElementorのCSSを再生成：
wp elementor flush-css
wp elementor regenerate-files
wp cache flushステップ2：Astraテーマ + Elementorの設定
AstraはElementorと最も親和性の高いサードパーティテーマです：
wp theme install astra --activate
wp plugin install astra-sites --activate # テンプレートライブラリAstraのカスタマイザー設定でElementorと競合しやすい箇所：
外観 → カスタマイズ → グローバル → タイポグラフィ
→「このセクションを無効化」（Elementorのフォント設定を優先）
外観 → カスタマイザー → ヘッダー → プライマリヘッダー
→ Elementor Proのヘッダーを使う場合: ヘッダーを非表示に設定ステップ3：テーマのCSSがElementorを上書きしている場合
競合するCSSを特定する：
# ブラウザの開発ツール → 要素を選択 → Computed スタイルで上書きを確認
# 上書きしているセレクタをメモして対処Elementorで優先度を上げる（最終手段）：
/* 外観 → カスタマイズ → 追加CSS */
.elementor-widget-heading .elementor-heading-title {
font-family: 'Noto Sans JP', sans-serif !important;
font-size: 2rem !important;
}テーマのCSSを子テーマで上書き：
/* 子テーマの style.css */
.site-header {
display: none; /* Elementor Proのヘッダーを使う場合 */
}ステップ4：ヘッダー・フッターの二重表示を解消する
Elementor Proのテーマビルダーを使う場合：
Elementor Pro → テーマビルダー → ヘッダー
→「条件を追加」→「サイト全体」
→ テーマのヘッダーを非表示にするCSSを追加// functions.php — テーマのヘッダーを無効化
add_action('get_header', function() {
if (did_action('elementor/loaded') && \Elementor\Plugin::$instance->preview->is_preview_mode()) {
return;
}
// テーマ固有のヘッダーフックを削除
remove_action('storefront_header', 'storefront_header_markup', 0);
});ステップ5：Elementorの「ページレイアウト」を変更する
各ページの設定でテーマのヘッダー・サイドバーを除外できます：
Elementor編集画面 → ハンバーガーメニュー → ページ設定
→ ページレイアウト:
- デフォルト（テーマのレイアウトを使用）
- Elementor キャンバス（完全に空白・LP向け）
- Elementor フルページ（ヘッダーなし）WP-CLIでページレイアウトを一括確認：
wp post meta get 123 _elementor_page_settings --format=json | \
python3 -m json.tool | grep page_layout注意事項
- テーマを変更するとWidgetエリア（サイドバー等）のコンテンツが失われることがあります
- Elementor ProのTheme Builderを使う場合は必ずHello ElementorまたはAstraを使ってください
!importantの多用はメンテナンスを困難にします。最小限にとどめてください
まとめ
ElementorとのテーマはHello Elementor（公式・最軽量）かAstra（親和性最高）を使うと競合が最小になります。既存テーマから変更できない場合は「ページレイアウト: Elementorキャンバス」でテーマのCSS影響を排除してください。