概要 — HTML to Elementor

このツールは、WordPressとElementorを使って9年間にわたりフルスタック開発者として働き、その間に189のサイトをElementorへ移行してきたLeoによって構築・保守されています。

このツールが存在する理由

それらの移行はすべて同じ壁にぶつかりました。デザイン、別のビルダーからの書き出し、あるいは古い静的サイトが、HTMLとCSSの塊として届きます。それをElementorに取り込む場合、悪い選択肢が2つあります。全体を1つのHTMLウィジェットに貼り付けて、以後は編集を諦めるか、コンポーネントごとに作り直して1ページあたり1日を失うかです。最初の十数サイトを経験すれば、その妥協を受け入れるのをやめて、自動化し始めます。このツールはその自動化を整えて公開したものです。

189の移行から学んだこと

コンバーターのほぼすべてのルールは、実際のプロジェクトで起きた問題への直接の答えです。

スタイルシートは嘘をつくが、計算済みスタイルは嘘をつかない。 カスケード順、メディアクエリ、継承された値、ユーティリティクラスのせいで、CSSファイルで読んだルールが、ブラウザーが実際に描画する値と一致することはほとんどありません。コンバーターはまずHTMLをレンダリングして計算済みスタイルを読み取ります。そのため、コンパイル済みのCSSがページ内にあれば、Tailwind風のマークアップやフレームワークのCSSにも詰まらずに対応できます。外部URLから読み込まれるスタイルシートは安全のため除去されるので、先にCSSをインライン化してください。
1対1で対応させるとネストが爆発する。 通常のページは、視覚的な意味を持たないラッパーdivで溢れています。それをそのままコピーすると、誰も編集できない10階層もの深さのElementorツリーができあがります。スタイル上の効果を持たないラッパーは折りたたまれ、パディングや背景、影を実際に保持しているラッパーは維持されます。それらを統合することがレイアウトを壊す原因です。
インラインSVGは編集可能なElementorアイコンにはなれない。 これは変換のバグではなくElementorの制限です。アイコンコントロールが受け付けるのはアイコンライブラリのエントリかメディアライブラリのファイルだけで、それ以外は何も受け付けません。Font Awesomeのクラスは編集可能なアイコンへきれいに変換されますが、手書きのSVGは生のHTMLのままにしておく必要があります。HTMLを生成する前にこれを知っていれば、再構築を丸ごと回避できます。
Base64画像はインポートするまでは問題なく見える。 十数個のインライン画像があるページは0.5メガバイトを超えて膨らみ、メディアライブラリへの取り込みに失敗します。代わりにラベル付きの空スロットになるので、後で実際のファイルを入れて、どれがどれか分かるようにできます。
レスポンシブは1つの設定ではない。 レイアウトの違いは複数の幅で計測され、Elementor独自のレスポンシブ項目に書き込まれます。単一のデスクトップ向けレイアウトがスマートフォンで自然に崩れてくれるのを期待したりはしません。
本当に変換できないものもある。 アニメーション、スクリプト駆動のインタラクション、疑似要素、そしてサイト自身のデータに依存するもの——メニュー、商品ループ、クエリ——は静的HTMLから推測できません。ツールはそうしたものに遭遇したとき、静かに落とすのではなく、そのことを知らせます。

このツールがしないこと

ピクセルパーフェクトな出力は約束しません。HTMLとElementorは同じようにレンダリングされません。そうでないと主張するコンバーターは、十分なページ数を変換したことがないのです。あなたのWordPressサイトには触れません。このツールはデータを生成するだけであり、インポートはあなた自身のElementorの中で、あなたが行います。そして、登録を求めることもありません。

また、リスクを持ち越すこともしません。スクリプト、危険なリンク、外部スタイルシート、フォーム送信は、何かがエディターに届く前に除去されます。取り込まれるスタイルはインポートされたコンテンツにスコープされるため、テーマの他の部分に漏れることはありません。

ファイルがブラウザーから出ることはありません

解析、変換、プレビューはすべてブラウザー内でローカルに実行されます。あなたのHTML、画像、生成されるElementorデータは、このサイトにも他のどこにも送信されません。これは最初に下した設計判断であり、後で手放す機能ではありません。

対象となる人

Elementorでクライアントサイトを構築するフリーランサーや小規模チーム。
AIでHTMLを生成していて、編集不能なコードブロックではなく編集可能なページを求めている人。
静的ページの一括移行をWordPressとElementorへ進めている人。

お問い合わせ

質問、バグ報告、扱いにくい変換サンプルはすべて [email protected] で歓迎します。何かがうまく変換されない場合は、HTMLスニペットを送ってもらうのが間違いなく修正への最短ルートです。上のルールのいくつかは、まさにそうしてくれた人がいたから存在しています。