すべての変換ツールには限界があります。その限界を事前に知っておけば、予期せぬ驚きは5分で済む計画的な作業に変わります。
スクリプトとインタラクティブ性
すべての script タグは削除されます。これは安全上の判断です。貼り付け操作によって任意の JavaScript をサイトに取り込むのは危険ですし、エディター内ではいずれにせよ確実には動作しません。カスタム JS で動いているもの（スライダー、タブ、カウンター、アコーディオン）は、静的マークアップとして取り込まれます。
対処法: 対応する Elementor ウィジェットでインタラクションを作り直してください。タブ、アコーディオン、カルーセル、カウンター、プログレスバーはすべてネイティブに存在し、取り込んだスクリプトよりも保守しやすくなります。
フォーム
フォームの送信先 action と method は除去され、表示されるフィールドは保持されます。どこかに送信するフォームはマークアップではなく統合です。エンドポイントを引き継ぐと、訪問者のデータを黙って他人のサーバーに送ることになります。
対処法: Elementor のフォームウィジェットに割り当て、アクション（メール、Webhook、連携）をご自身のサイトで設定してください。
ナビゲーションメニュー
ナビは「ナビメニュー」ウィジェットを生成できますが、そのウィジェットは実際の WordPress メニューに紐づける必要があります。他人のマークアップからあなたのサイトのメニュー構造を推測する方法はありません。
擬似要素
::before と ::after の擬似要素は DOM ノードではありません。この方法で描かれた装飾的な図形、引用符、グラデーションオーバーレイ、下線アクセントは、要素として存在しないためウィジェットには変換できません。変換後にデザインの細部が欠けている場合、まず擬似要素を疑ってください。
アニメーション、トランジション、sticky 動作
キーフレームアニメーション、スクロールエフェクト、トランジション、sticky 配置は引き継がれません。Elementor には独自のモーションエフェクトと sticky コントロールがあり、いずれにしてもエディターとの統合が優れています。
サードパーティの埋め込み
YouTube と Vimeo の iframe のみが保持され、それ以外は未知のフレームを取り込むよりは削除されます。object タグと embed タグも削除されます。
ホバーとフォーカスの状態
読み取れるのは要素の通常状態のみです。ホバー時の色、フォーカスリング、アクティブ状態は Elementor で再適用する必要があります。
Base64 画像とローカルパス
データ URL 画像と相対ファイルパスはメディアライブラリの添付ファイルにできないため、空の画像スロットに変換されます。元の alt テキストはキャプションとして保持されるので、どの画像がどこに入るかがわかります。
CSS カスタムプロパティはフラット化されて取り込まれます
ソースがデザイントークン（--brand-500、--space-4 など）を使っている場合、変数そのものは残りません。コンバーターは計算済みスタイルを読み取ります。スタイルが計算される時点で、ブラウザはすべての var() 参照をリテラル値に解決済みです。背景が var(--brand-500) のボタンは、その変数への参照としてではなく、その変数がたまたま保持していた色として変換されます。
変換後に見た目は何もおかしくありません。だからこそ、これには引っかかりやすいのです。ページは正しく描画されますが、デザインシステムを保守可能にしていた特性は失われています。後でブランドカラーを変更すると、30個のウィジェットを手作業で編集することになります。
対処法: Elementor 側でトークンレイヤーを再構築してください。貼り付ける前に、パレットをグローバルカラーで定義し、タイプスケールをグローバルフォントで定義してから、取り込んだウィジェットをそれらのグローバルに再割り当てします。一度行うだけで、単一の情報源としての挙動を取り戻せます。コンバーターにはまさにそのためのサイトカラーモードとサイトフォントモードがあります。これにより、取り込んだウィジェットから色とタイポグラフィを除外し、ハードコードされた値としてではなく、あなたの Elementor グローバルを継承させられます。
名前付きグリッドエリア
グリッドレイアウトはカラムと余白の設定を通じて変換されます。grid-template-columns は Elementor のグリッドコンテナに対応し、fr 単位は保持されます。対応しないのは grid-template-areas です。これはレイアウトを小さな ASCII 図として描き、各子に名前を割り当てる名前付き領域の構文です。
Elementor のグリッドコンテナには名前付きエリアに相当するものがないため、その方法で構築されたレイアウトは配置情報を失い、子は通常のソース順にフォールバックします。結果は壊れてはいませんが、あなたのレイアウトでもありません。
対処法: ソースを管理しているなら、名前付きエリアではなく grid-template-columns と明示的な span でレイアウトを表現してください。そうでない場合は、Elementor 内で子を再配置することを想定しておいてください。
固定配置は意図的にダウングレードされます
position: fixed のものは変換中に position: absolute に書き換えられ、安全レポートがその旨を伝えます。これは、このツールがデザインを再現するのではなく意図的に変更する数少ない箇所の1つです。
理由は影響範囲を閉じ込めることです。fixed 要素は親ではなくブラウザのビューポートに対して配置されます。そのため、他人のページから取り込んだ固定ヘッダー、sticky クッキーバー、フローティングチャットバブルは、貼り付けたセクションから逃げ出し、そのテンプレートを使うすべてのページであなたのサイト全体に浮かんでしまいます。absolute にダウングレードすることで、取り込んだブロック内に留まり、確認して対処を決められます。
対処法: 本当に要素を固定したい場合は、取り込み後に Elementor 独自の sticky コントロールで設定してください。それらはエディター、管理バー、ヘッダーを認識しますが、生の CSS ルールは認識しません。
Web フォント: 名前は引き継がれ、ファイルは引き継がれません
タイポグラフィは値として変換されます。ファミリー名、サイズ、太さ、行の高さ、文字間隔などが Elementor のタイポグラフィコントロールに反映されます。フォントファイルは別問題です。@font-face ルールはソースサイトでホストされている woff2 ファイルを指していますが、それらをあなたのサーバーにコピーするものはなく、WordPress にファミリーを登録するものもありません。
そのため、セルフホストフォントを使用しているページから変換された見出しは、正しいファミリー名を保持しつつ、実際にあなたのサイトにあるものにフォールバックします。通常は並べて比較するまで気づかない程度に似ています。
対処法: まずご自身のサイトにフォントをインストールしてください。Elementor のカスタムフォント、Google Fonts の選択、またはテーマを通じて行い、その後に変換します。ファミリーがすでに利用可能であれば、取り込んだタイポグラフィはすぐに一致します。
どの限界に当たったかを知る方法
推測する必要はありません。結果ビューの2つの要素が直接答えてくれます。
- 安全レポートには、削除または書き換えられたもの（除去されたスクリプト、クリーンアップされたフォームアクション、破棄された埋め込み、fixed から absolute への書き換え、削除された Base64 画像）が一覧表示されます。細部が消えた場合、通常はここに名前が挙がっています。
- 構造マップは、ライブプレビューの横に Elementor ツリーを表示し、ホバーすると互いをハイライトします。赤い HTML ウィジェットブロックとして取り込まれたものにはネイティブの対応先がなかったことになります。ホバーすると、それがページのどの部分だったかが正確にわかります。
この2つがあれば、「なぜこれが違って見えるのか」という問いは「この特定の要素がこの特定の方法で処理された」という認識に変わり、午後いっぱいではなく2分の修正で済みます。
率直なまとめ
構造、テキスト、画像、アイコン、色、余白、タイポグラフィは良好に変換されます。一方、振る舞い、統合、DOM に存在しないもの、ソースサーバー上のファイルやデータに依存するものは変換されません。フォーム、メニュー、ホバー状態、アニメーション、フォントを対象とした短い取り込み後の確認作業を計画しておけば、プロセスは驚きではなく予測可能なものになります。