HTML to Elementor
チュートリアルに戻る

ElementorにHTMLを安全に貼り付ける:何が除去され、なぜ除去されるのか

稼働中のWordPressサイトにHTMLを貼り付けるのは、信頼を前提とした行為です。そのHTMLがテンプレートやAI、あるいは他人のページから来たものであればなおさらです。最も安全な方法は慎重になることではなく、エディターに届く前に何が除去されるのかを正確に知っておくことです。以下がその一覧と、残りをカバーするための実践方法です。

2つのリスト:変換時に除去されるもの — スクリプト、外部スタイルシート、フォームのaction、危険なリンク — と、静的HTMLからは推測できないもの(ホバー状態、アニメーション、疑似要素のコンテンツなど)。
何かが伝わらない理由は2つある。安全のために意図的に削除されたか、単に静的ページでは表現できないかだ。

貼り付ける前に除去されるもの

変換はすべてブラウザー内で実行され、出力されるのはElementorのデータであって、元のマークアップではありません。その過程で、次のものが除去または無効化されます。

  • すべてのscriptタグ。元のページのJavaScriptは一切残りません。例外はありません。インタラクティブな部分は静的なマークアップとして届くので、Elementor自身のウィジェットで作り直してください。
  • すべてのインラインイベントハンドラー。onclickやonmouseoverのような属性は、各要素から個別に除去されます。これは「scriptタグのない」マークアップにスクリプトを紛れ込ませる典型的な手口です。
  • フォームの送信先。フォームのactionとmethodは除去されます。表示されるフィールドは残りますが、貼り付けたフォームが訪問者のデータを元のページの作者へひそかに送信することは決してありません。
  • 不明な埋め込み。object、embed、appletタグはブロックされます。iframeが許可されるのは、YouTube、そのnocookie版、Vimeoプレーヤーの計4つのホストだけで、これらは動画ウィジェットになります。それ以外のiframeは、動作するフレームとしては引き継がれません。iframeタグの中に文書をまるごと隠せるsrcdoc属性も除去されます。
  • 危険なリンク先とリスクのあるCSS。リンク先とスタイル宣言は、そのままコピーされるのではなく、クリーンアップされます。

除去されたものはすべて結果画面の安全レポートに一覧表示されるので、見えないところで適用されるルールではありません。貼り付ける前に、ご自身のページから具体的に何が取り除かれたのかを確認できます。

CSSがテーマに漏れ出さない理由

スタイル付きのHTMLを貼り付けるときの、より気づきにくいリスクは悪意ではなく衝突です。元のページのスタイルシートがbody { font-family: … }やh2 { color: … }を宣言していると、そのルールがサイト全体のスタイルを変えてしまいます。

これを防ぐため、引き継がれるスタイルはスコープ化されます。インポートされたCSSのすべてのセレクターは、インポートされたコンテンツの内側だけに適用されるよう書き換えられます。html、body、:rootを対象とするセレクターは、ページ全体に届くことを許されず、インポートされたブロック自体に割り当て直されます。インポートしたセクションは見た目を保ち、テーマがそれらのルールの影響を受けることはありません。

同じ考え方から、position: fixedは変換時にabsoluteへ格下げされます。そうしなければ、他人のページの固定要素が、そのテンプレートを使うすべてのページで、サイト全体の上に浮かんでしまうからです。

「安全」が意味しないこと

正直にお伝えすべき境界が2つあります。第一に、このツールはコンテンツの内容を審査できません。HTMLに、あなたが権利を持たないテキスト、画像、リンクが含まれていても、変換によってそれが変わることはありません。第二に、除去の対象は何が実行され、データがどこへ行くかであって、ページが何を述べているかは確認しません。貼り付ける内容には目を通してください。

貼り付ける前のベストプラクティス

  • 変換する。生のまま貼り付けない。危険なのは、第三者のマークアップをそのままHTMLウィジェットに貼り付ける方法です。この経路では一切除去が行われず、元のページに含まれていたものがそのまま入ります。ネイティブウィジェットへの変換こそが安全の層です。
  • 結果画面の安全レポートを読む。除去されたスクリプトが4つ、クリーンアップされたフォームが1つと表示されていれば、どの動作を作り直す必要があるか、そして元のページが何をしていたかがわかります。
  • まず下書きに貼り付ける。変換が危険だからではなく、レイアウトの確認は誰も訪れていないページで行うべきだからです。
  • フォームは意図を持って接続し直す。送信先は意図的に除去されています。元の送信先を探すのではなく、Elementorのフォームウィジェットをご自身のアクションにつないでください。
  • いずれにせよバックアップを取る。どのツールによる、どんな種類のインポートにも当てはまる基本的な助言です。

そして、あなたのHTMLがブラウザーの外に出ることはありません

安全は逆方向にも働きます。変換するページは、ローカルで解析、レンダリング、変換されます。HTMLや画像がこのサイトや他の場所へアップロードされることはなく、漏えいしうるアカウントも存在せず、WordPressの認証情報にも一切触れません。ツールはデータを生成するだけで、それをどう扱うかは、ご自身のエディターの中であなたが決めます。

最も安全な方法を一段落で

生のHTMLをウィジェットに貼り付けるのではなく、ネイティブコンポーネントモードで変換してください。安全レポートを読みます。下書きに貼り付け、インタラクティブな部分をElementor自身のウィジェットで作り直し、フォームをご自身のサイトに接続し直して、3つのブレークポイントすべてで正しく表示されることを確認してから公開します。方法はこれですべてです。上記の除去が見えない部分を処理し、このチェックリストが見える部分を処理します。

執筆:Leo

WordPress と Elementor に 9 年、189 サイトを移行。このコンバーターのルールはすべて実プロジェクト由来です。 このツールについて