変換されたページを Elementor で開くと、コンテナの中にコンテナ、さらにその中にコンテナが表示されることがあります。これはランダムではなく、HTML を正確に反映しています。ルールを理解すれば簡単に制御できます。
基本ルール：1つのブロック要素に1つのコンテナ
コンバーターは DOM を走査します。すべてのブロックレベルラッパー（<div>、<section>、<article>、<header>、<figure>…）は Elementor のコンテナになり、その計算済みのパディング、背景、境界線、角丸、シャドウ、flex/grid レイアウトがそのコンテナに引き継がれます。テキスト、見出し、画像、ボタンはその中のウィジェットになります。
したがって、section > div.wrap > div.row > div.col > h2 のようなマークアップの連鎖では、見出しに到達するまでに4つの入れ子になったコンテナが生成されます。壊れているわけではありませんが、編集が面倒です。
自動的に折りたたまれるもの
視覚的・レイアウト上の効果がまったくないラッパーは自動的に削除されます。具体的には、<div> は、子要素がちょうど1つで、背景、背景画像、境界線、パディング、box-shadow、max-width、min-height、flex/grid 表示のいずれも持たない場合に折りたたまれます。コンバーターはこれらを数え、構造マップの概要で 「冗長なラッパーが折りたたまれました」 として報告します。
ラッパーがわずかなパディングや背景でも持っている場合、それは保持されます。削除するとレイアウトが変わってしまうからです。
カードは1つのウィジェットにフラット化されます
2つ目のより強力なフラット化があります。カードが本当に1つのコンテンツを囲むスタイル付きフレームにすぎない場合、フレームはウィジェット自体に移動し、ラッパーは消えます。以下の2つのパターンがそれを引き起こします。
- 画像 + 見出し + 短いテキスト → 単一の Image Box ウィジェット
- アイコン + 見出し + 短いテキスト → 単一の Icon Box ウィジェット
どちらの場合も、カードの背景、境界線、角丸、シャドウ、パディングはウィジェット自体の詳細設定に書き込まれます。そのため、5枚のカードの行は、5つのウィジェットを保持するグリッドになります。5つのコンテナを保持し、それぞれが1つのウィジェットを保持するグリッドではありません。これはまさに手作業で構築する場合と同じです。
よりフラットな結果を得る方法
- 浅い HTML を書く。 通常、セクションごとに1つのラッパーで十分です。AI で HTML を生成する場合は、プロンプトで明示的に指定してください。
- 不要なレイアウト用 div を追加しない。 グリッドや flex の親は子要素を直接レイアウトできます。モダン CSS では、アイテムごとに追加の
.colラッパーはほとんど必要ありません。 - コピールートを使用する。 構造マップで、実際に必要な行のターゲットアイコンをクリックします。その上のすべてが削除されるため、外側のページラッパーは Elementor に到達しません。
- 不要なものを除外する には、行の ✕ アイコンを使用します。
エクスポート前に確認する
構造マップの概要には 最大ネスト深度 が表示されます。7 や 8 のような数値が表示された場合、それはツリーのより深い場所にコピールートを設定するか、ソースマークアップを簡素化して再度変換するためのサインです。深さ 3～5 は Elementor エディターで快適に作業できます。