既存のHTMLページをElementorに移行するとなると、実際にはほとんど編集できない単一のHTMLウィジェットに貼り付けるか、すべてのセクションを手作業で作り直すかという、どちらも好ましくない二択になりがちです。このガイドでは第三の方法として、HTMLをネイティブで編集可能なElementorコンポーネントに変換する方法を紹介します。
ここでいう「編集可能」とは
これこそが要点なので、正確に説明しておきます。ページをHTMLウィジェットに入れると、Elementorはそれを中身の見えない1つのブロックとして扱います。キャンバス上には表示されますが、見出しをクリックしてサイズを変えることも、アイコンピッカーからアイコンを差し替えることもできず、クライアントがコードに触れずにテキストを更新するのはまず無理です。ページはElementorの中に置かれているだけで、Elementorでできているわけではありません。
ネイティブ変換はそこが違います。各見出しは、独自のタイポグラフィ設定を持つ見出しウィジェットになります。各段落はテキストエディターになります。スタイル付きのリンクは、リンク・色・パディングを設定できるボタンになります。ラッパー要素は、実際のflexまたはgrid設定を持つコンテナになります。変換後は、あなたとコンテンツの間にHTMLウィジェットが挟まることはありません。たまたまHTMLから生まれただけの、ごく普通のElementorページです。
手作業で作り直せばよいのでは？
そうすべき場合もあります。元がシンプルなヒーローセクション1つだけなら、作り直しは10分で済み、Elementorの作法どおりの申し分ない結果が得られます。変換が真価を発揮するのは、ページが長いとき、余白やタイポグラフィが細かく、正確に残す価値があるとき、あるいはこの作業を繰り返し行うとき（複数のランディングページを移行する場合や、AI生成HTMLやデザインツールのHTMLを日常のワークフローの一環として実際のページにする場合など）です。
1. HTMLを貼り付ける、またはドロップする
コンバーターを開き、.htmlファイルをドロップゾーンにドラッグするか、コードボックスにソースを貼り付けます。インラインCSSとBase64画像にも対応しています。処理はすべてブラウザ上で行われ、ファイルがサーバーにアップロードされることはありません。そのため、クライアントの案件でも、機密保持について相談することなく変換できます。
スタイルが、ファイルに含まれていない別のスタイルシートにある場合、プレビューはスタイルなしで表示されます。そして、変換されるのはまさにそのスタイルなしの状態です。変換する前に、CSSがインラインか<style>ブロック内にあることを確認してください。
2. ネイティブコンポーネントモードを選択する
オプションパネルでネイティブコンポーネントモードを選びます。1つのHTMLブロックではなく、実際のウィジェットを生成するのがこの設定です。ついでに、ほかの3つのオプションも少し確認しておきましょう。
- アイコン — 「Elementor アイコンライブラリに照合」を選ぶと、アイコンは固定されたSVGではなく、差し替え可能な実際のアイコンになります。
- 画像 — HTMLにまだメディアライブラリのURLが入っていない場合は、「空の画像プレースホルダー」を選びます。各枠にはaltテキストがキャプションとして残るので、どこにどの画像を入れればよいかが分かります。
- カラーとフォント — ブランドの確立した既存サイトに載せるならサイトの値を、デザインを忠実に再現するなら元の値を使います。
3. 構造マップを確認する
エクスポートする前に、構造マップタブを開きます。ライブプレビューの横に実際のElementorツリーがそのまま表示され、行にカーソルを合わせると、両側の対応する部分がハイライトされます。
ここで確認すべき点は3つあります。まず信頼度ドットです。緑は要素がネイティブウィジェットに直接変換されたことを、赤はHTMLのまま保持されたため確認が必要なことを示します。次に最大ネスト階層です。6程度を超えている場合は、ソースに必要以上のラッパー要素があることを示唆しています。そしてコンポーネント数は、これから貼り付ける量のおおよその目安になります。
このタブでは、範囲の制御も行えます。行のターゲットアイコンでその行をコピールートに設定すると、そのサブツリーだけがエクスポートされ、外側のページラッパーは除かれます。✕アイコンは、行を丸ごと除外します。長いページでは、このように1セクションずつ変換するほうが、すべてを一度にインポートするよりずっと検証しやすくなります。
4. コピーまたはダウンロードする
Elementor データをコピーを使い、Elementorエディターの空いている場所を右クリックして「他のサイトから貼り付け」を選びます。すでに開いているページにセクションを追加するときは、これが最も手早い方法です。
あるいは、JSONテンプレートをダウンロードして、Elementorのテンプレートライブラリからインポートします。ページ全体を扱う場合、チームと共有する場合、時間をかけてコンポーネントライブラリを構築していく場合など、結果を再利用でき持ち運べるファイルとして残したいときは、こちらの方法が適しています。
短い仕上げ作業を見込んでおく
HTMLとElementorがまったく同じように表示されることはなく、どうしても移せないものもあります。次の作業に10〜15分ほど見込んでおきましょう。ボタンのホバー状態の設定（CSSのホバールールは静的なページからは読み取れません）、プレースホルダー画像の差し替え、メニューやフォームを実際のWordPressのソースにつなぐこと、そして3つのデバイス表示を順に確認することです。どれも難しくはありませんが、後から気づくより、意識的にチェックリストとして片付けるほうが確実です。
よりクリーンな結果を得るためのヒント
- セマンティックタグ（
<h2>、<p>、<button>）を使いましょう。コンバーターがCSSから推測するのではなく、ネイティブにマッピングできます。 - スタイル指定のない、深くネストしたラッパー
<div>は避けましょう。背景やパディングを持つラッパーは、1つにつきコンテナが1つ増えます。 - すべての子要素にマージンを付けるより、flexまたはgridの親に
gapを指定しましょう。ギャップは1つの設定項目にマッピングされます。 - Elementorで差し替えられるアイコンにしたい場合は、インラインSVGではなくFont Awesomeのアイコンクラスを使いましょう。
- 問題はソース側で直してから再変換しましょう。エディター内で出力を修正するより、ほぼ確実に早く済みます。