コンバーターには2つの書き出し方法があります。どちらもまったく同じコンポーネントを生成します。違いはひとえに、ワークフロー、持ち運びやすさ、そして結果をその後どう使うつもりかにあります。
方法A — Elementorデータを貼り付ける
Elementor データをコピーをクリックし、移行先のページをElementorで開いて、キャンバスの空いている場所を右クリックし、「他のサイトから貼り付け」を選びます。クリックした位置に、コンポーネントがそのままレイアウトへ配置されます。
裏側では、Elementor自身のコピー＆ペーストと同じ形式のJSONデータがクリップボードに入ります。「他のサイトから」のほうを選ぶ必要があるのはそのためです。通常の貼り付けは同じインストール内でコピーされたコンテンツを前提としていますが、こちらはほかの場所から来たデータを受け付けます。
- 向いている用途：その場でのすばやい挿入。編集中のページに、変換したセクションを1つ追加する場合などです。
- 必要なもの：移行先サイトでElementorエディターが開いていること、そしてブラウザでクリップボードにアクセスできること。
- 注意点：クリップボードの権限です。ブラウザやプライバシー系の拡張機能によっては、プログラムからのクリップボードへの書き込みをブロックします。コピーが何も言わずに失敗する場合は、代わりにJSONの方法を使ってください。
方法B — JSONテンプレートをダウンロードする
.json テンプレートをダウンロードをクリックし、Elementorでテンプレート → 保存済みテンプレートを開いてテンプレートをインポートを選びます。結果はテンプレートとして取り込まれ、ファイルをインポートしたサイトであれば、どのページにも挿入できます。
- 向いている用途：ページ全体、複数サイトでの再利用、同僚への作業の引き渡し、自分のファイル保管場所でのバージョン管理。
- 必要なもの：移行先サイトのテンプレートライブラリへのアクセス。
- おまけ：ファイルはただのJSONです。バージョン管理に入れたり、2回分の書き出しを差分比較したり、ある日付時点のデザインをアーカイブしたりできます。
どちらを使うべきか
シンプルなルールは、一度きりの挿入なら貼り付け、2回以上使うものならダウンロードです。
今作っているページに、カードやヒーロー、料金表の行を1つだけ入れたいなら、貼り付けです。2クリックで終わります。ランディングページを丸ごと移行する場合や、今後のプロジェクトで使い回す再利用ブロックのライブラリを作り始める場合は、JSONをダウンロードし、ファイルにきちんと名前を付けて、あとで見つけられる場所に保存してください。
クライアントやチームメンバーと仕事をしているなら、3つ目の観点もあります。JSONファイルは送ることができますが、クリップボードの中身は送れません。
先に書き出し範囲を決める
どちらの方法でも、書き出す前に範囲を設定してください。構造マップで行のターゲットアイコンをクリックするとその行がコピー起点になり、そのサブツリーだけが書き出されます。こうすれば、本当に欲しかったセクションと一緒に、ページの外側のラッパーやヘッダー、フッターまで引きずってくるのを避けられます。バツ印のアイコンでは、個々の行を除外できます。
これは貼り付けの方法でより重要です。貼り付けたデータは右クリックした場所に入るため、選択範囲が広すぎると、あとから取り除くのが面倒だからです。
貼り付けがうまくいかないとき
貼り付けたのに何も起きない場合の原因は限られています。可能性の高いおおよその順に挙げます。
- メニュー項目の選び間違い。通常の貼り付けは、同じインストール内でコピーしたコンテンツを前提としています。変換したデータには他のサイトから貼り付けが必要です。同じ右クリックメニューの、1つ下の項目です。ほかのすべての原因を合わせたよりも、これが原因であることのほうが多いくらいです。
- クリップボードへの書き込みがブロックされた。ブラウザやプライバシー系の拡張機能によっては、プログラムからのクリップボードへのアクセスを拒否します。その場合、コンバーターは黙って失敗するのではなく、そのことを知らせます。また、JSONダウンロードの方法はクリップボードをまったく使わないので、確実な代替手段になります。
- 途中で何かがクリップボードを上書きした。コピーをクリックしてから貼り付けるまでの間に、URLやスクリーンショットなど別のものをコピーすると、データが置き換わってしまいます。もう一度コピーして、すぐに貼り付けてください。
- クリップボードに入っているのがページではなくソースコード。Lovable、v0、BoltなどのAIアプリビルダーから来た人がはまりやすい原因です。これらのツールが生成するのはReactやJSXのプロジェクトで、JSXのコンポーネントのソースはHTMLではありません。ここに貼り付けても、役に立つものは何も変換されません。コンバーターが読み取るのはレンダリングされたページです。ツールのプレビューをブラウザで開き、そこからページのHTMLを取得すれば、ほかのページと同じように変換できます。
インポート後
どちらの方法でも、同じ短い仕上げ作業が必要です。
- ボタンのリンクを設定し直す。内側のブロックを書き出した場合、外側を包んでいたリンクが取り残され、ボタンがリンクなしで届くことがあります。
- ホバー状態を設定する（ボタンとリンク）。静的なページからは読み取れないため、インポートが未完成であることが最も目に付きやすい部分です。
- ナビメニューとフォームのウィジェットを、実際のWordPressのソースに接続する。メニューには自分のサイトのメニューのどれかを、フォームには自分のサイトで設定したアクションが必要です。どちらも引き継ぐことはできません。
- プレースホルダー画像を埋める。各スロットのキャプションを見れば、どこにどの画像が入るかがわかります。
- 3つのデバイス表示を確認するまで、ページを完成とみなさないでください。
Elementorのバージョンについて
貼り付けたコンテンツやインポートしたコンテンツは、移行先サイトのElementorのバージョンで解釈されます。あるサイトから書き出して、より古いバージョンが動いている別のサイトにインポートすると、新しいコンテナやグリッドの設定の一部が認識されないことがあります。移行先のElementorを最新に保っておけば、「書き出したときは正しく見えていたのに」という類いの紛らわしい問題を避けられます。