変換の品質は、主に与える HTML によって決まります。これは、コンバーターに何かを貼り付ける前に実行する価値のあるチェックリストです。
1. セマンティックなタグを使う
見出しは <h1>–<h6>、本文は <p>、CTA は <button> または <a class="button">、リストは <ul> として使います。ネイティブタグはネイティブウィジェットに対応します。スタイル付きの <div> で偽装された見出しも検出できますが、本物のタグは曖昧さがありません。
2. DOM は浅く保つ
セクションごとにラッパーは 1 つにします。余分なネスト階層はすべて、エディターでクリックして開く必要がある別のコンテナになります。スタイルを持たない純粋に装飾的なラッパーは自動的に折りたたまれますが、パディングや背景を持つラッパーは削除するとレイアウトが変わるため保持されます。
3. CSS は自己完結させる
インラインスタイルまたは単一の <style> ブロックが最も変換に適しています。コンバーターはブラウザーが実際に計算したスタイルを読み取るからです。読み込まれない外部フレームワークのスタイルシートは、ページがスタイルなしでレンダリングされることを意味し、スタイルなしの状態こそが変換されるものです。
4. 画像を先に整理する
最善の方法: メディアライブラリにアップロードし、実際の https:// URL を使用します。それ以外の場合は、画像を 空の画像プレースホルダー に切り替えて後で埋めます。各スロットは alt をキャプションとして保持します。Base64 画像とローカルファイルパスは、WordPress に確実にインポートできないため、設計上プレースホルダーに置き換えられます。
5. インライン SVG より Font Awesome クラスを優先する
クラスベースのアイコンだけが、編集可能なアイコンとして Elementor のアイコンライブラリに取り込まれます。インライン SVG はアイコンコントロールに入れず、ページ CSS に存在していたサイズやストローク色も失われます。
6. 子要素ごとのマージンではなく gap を使う
フレックスまたはグリッドの親要素の gap は、Elementor の単一の gap コントロールに対応します。各子要素に適用されたマージンはウィジェットごとに引き継がれ、後で調整するのがはるかに面倒です。
7. max-width と auto マージンで中央揃えにする
max-width + margin:0 auto のパターンは認識され、ボックス化コンテナになります。これにより、すべての画面サイズでネイティブに中央揃えされます。
8. 引き継ぎたくないものを取り除く
スクリプト、トラッキングタグ、Cookie バナー、サードパーティの埋め込みは、安全のため削除または無効化されます。フォームは送信アクションを失います。Elementor フォームは、サイト上の実際の送信先に再接続する必要があります。ナビゲーションメニューは、実際の WordPress メニューを指すように設定する必要があります。
9. セクションごとに変換する
大きなページの場合は、ビジュアルピッカーを使用するか、構造マップでコピー起点を設定し、一度に 1 つのセクションを取り込みます。小さい単位の方がはるかに検証しやすく、サイトのヘッダーやフッターを誤ってインポートするのを防げます。
10. 書き出す前に構造マップを確認する
コンポーネント数、最大ネスト深度、信頼度の内訳を確認します。緑の行は直接変換され、赤の行は HTML として保持されたもので、再確認する価値があります。ソースを修正してもう一度変換する方が、Elementor 内で結果を修復するよりも通常は速いです。
11. 最初に各ブレークポイントでソースを開く
このリストで最も価値が高く、最もよく省略される項目です。レイアウトは各ブレークポイントの幅で再計測され、ブラウザーがそこで計算したものがそのまま保存されます。整理するための解釈レイヤーはありません。
そのため、変換前にブラウザーでソースをおよそ 1024px と 767px にリサイズします。767px で既に崩れているレイアウトは、忠実に崩れたモバイルレイアウトに変換されます。そして、ずっとソースにあった問題を変換のせいにして 1 時間を費やすのは非常に簡単です。2 分間リサイズすれば、動作するものを変換しているかどうかがわかります。
12. 静かに変換されない詳細を確認する
4 つのものはソースでは問題なく見え、変換後には単に存在しません。事前にそれらをスキャンすることで、それぞれが謎から予期されるタスクに変わります。
- 擬似要素による装飾。
::beforeや::afterで描画されるもの（引用符、アクセントバー、グラデーションオーバーレイ、下線の装飾など）は DOM ノードではないため、ウィジェットにはなれません。デザインの細部が消えた場合、まずこれを疑ってください。 - インラインブロックリンクではない角張ったボタン。 実際の
<button>要素、およびインラインブロックであるかbtn/buttonクラスを持つリンクは常に変換されます。それ以外のもの（フレックスでスタイルされたアンカー、クリック可能な div）は、3px 以上の角丸半径を含むジオメトリテストに合格する必要があるため、角が鋭いものはスタイル付きテキストのままになります。リンクにbtnクラスを付けると、それらはすべて一度に修正されます。 - 持っていないフォント。 ファミリー名は引き継がれますが、フォントファイルは引き継がれません。変換前に WordPress サイトにフォントをインストールしてください。そうしないと、フォールバックフォントで結果を評価し、実際には存在しない違いを追いかけることになります。
- ホバーとフォーカスの状態。 計算されたスタイルから読み取れるのは通常状態だけです。すべてのホバーカラーはインポート後のタスクなので、開始前にページにインタラクティブな要素がいくつあるかをメモしておく価値があります。
良いソースとはどのようなものか
上記のすべては 1 つの段落に凝縮できます。最も変換に適した HTML は、セマンティックで、浅く、自己完結しています。本物の見出しタグと段落タグ、セクションごとに 1 つのラッパー、フレックスまたはグリッドと gap で行うレイアウト、Font Awesome クラスとしてのアイコン、実際のホスト URL としての画像、すべての CSS を単一のスタイルブロックに、スクリプトなしです。
それは偶然ではなく、よく書かれた HTML がそもそもそう見えるものでもあります。ソースを引き継ぐのではなく生成する場合、これらの特性を求めることはプロンプトの 1 文で済み、このチェックリストのほとんどを不要にします。
インポート後
ボタンを再リンクし、フォームとメニューを再接続し、3 つのデバイスビューを確認し、プレースホルダー画像を再アップロードします。そうすれば、通常の Elementor ページになります。完全に編集可能で、あなたとコンテンツの間に HTML ウィジェットが立ちはだかることはありません。