基本的な変換に加えて、アイコン、画像、構造をどう扱うかという3つの設定が、Elementorページの仕上がりの整い具合と編集しやすさを左右します。エクスポート前にこれらを正しく設定しておくかどうかで、そのまま安心して引き渡せるページになるか、1時間かけて手直しするページになるかが分かれます。
3つの設定には共通するテーマがあります。コンバーターは、ソースに実際に含まれているものしか扱えないということです。どの設定も、突き詰めればコンバーターがきれいにマッピングできる材料を渡すこと、そしてマッピングできないときにどうすればよいかを知っておくことが目的です。
1. Elementorのアイコンライブラリに収まるアイコン
HTMLでFont Awesomeのクラス（<i class="fas fa-check"></i> のようなもの）を使っている場合は、アイコンオプションを「Elementor アイコンライブラリに照合」に設定してください。各アイコンは固定されたSVGではなく、Elementorのアイコンピッカーから差し替えられる、実際に編集可能なアイコンになります。
さらに、アイコン＋見出し＋短いテキストで構成されたカードは、1つのアイコンボックスウィジェットに変換されます。コンバーターはアイコンを名前で照合し（アイコンのクラスとカードのタイトルを使用。例：「Reusable」→ recycle）、アイコンのサイズ、余白、タイポグラフィも引き継ぎます。一致するものが見つからない場合は、アイコンを空のままにして、あなたが選べるようにします。
ヒント：手描きのカスタムSVGはElementorのアイコンコントロールに入れられないため、ライブラリのアイコンを使いたい場合は、ソースでFont Awesomeのクラスを使うことをおすすめします。
2. 画像：Elementorで差し込む
AIは実際の画像ファイルをHTMLテキストに埋め込めないため、画像は最も扱いにくい部分です。最も簡単な方法は、画像を「空の画像プレースホルダー」に設定することです。すべての画像が空のスロットになり、各スロットにはaltテキストがキャプションとして残ります。そのため、Elementorで画像をアップロードするときに、どの画像をどこに入れればよいかがわかります。
- 最善：先に画像をメディアライブラリにアップロードし、その
https://のURLをHTMLで使います。手作業なしでそのままインポートされます。 - 避けるべき：Base64で埋め込んだ画像やローカルのファイルパス。コンバーターはデフォルトで、これらを空のプレースホルダーに置き換えます。
3. 構造マップ：エクスポート前に確認する
構造マップタブを開くと、ライブプレビューの横に正確なElementorツリーが表示されます。任意の行にカーソルを合わせると、対応する部分が両側でハイライトされます。
- 行にあるターゲットアイコンはコピールートを設定します。そのブロックだけをエクスポートし、外側のラッパーを取り除けます。
- ✕アイコンは、その部分をコピーから除外します（紛れ込んだ不要な要素があるときに便利です）。
- 概要には、コンポーネントの数、ネストの深さ、信頼度の内訳（直接変換 / 部分一致 / HTML のまま保持）が表示されます。
ここでざっと確認しておけば、うまくマッピングされなかった箇所を、公開サイトに届く前に見つけられます。
3つを組み合わせる
これらの設定の効果は積み重なります。Font Awesomeのアイコン、実際の画像URL、浅いマークアップで作られたカードの行は、整ったアイコンボックスや画像ボックスのウィジェットを収めたグリッドに変換されます。手作業で組んだものだとしても満足できる仕上がりです。同じ行でも、インラインSVG、Base64画像、5階層のラッパーで作られていれば、グラフィックが固定された深いコンテナツリーに変換されます。同じツール、同じページでも、その後の作業時間はまったく違ったものになります。
簡単な判断ガイド
- ブランドが確立した既存サイトにセクションを取り込みますか？アイコンはライブラリに照合し、カラーとタイポグラフィはサイトのものを使います。ブロックが自動的にブランドに合わせて整います。
- デザインを忠実に再現したいですか？アイコンはライブラリに照合し、カラーとタイポグラフィは元のものを使います。そのうえで、結果を評価する前にカスタムフォントをElementorに登録しておきます。
- 画像をまだアップロードしていませんか？空のプレースホルダーを使います。その前に、ソース内のすべての画像に意味のあるaltテキストが付いていることを確認してください。
- 長いページですか？コピールートを設定し、1セクションずつ取り込みます。
身につけたい習慣
何かおかしく見えるときだけでなく、エクスポートする前には毎回必ず構造マップを開いてください。コンポーネント数、ネストの深さ、信頼度の内訳を読むのにかかるのは15秒ほどで、この3つの数字を見れば、今すぐエクスポートしてよいか、ソースに戻って修正すべきかがわかります。入力を直して再変換するほうが、Elementor内で出力を修正するよりも常に速く、この習慣こそが、スムーズなワークフローとストレスの多いワークフローを分けるのです。