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

The 15-minute pass that makes a converted page production-ready

変換済みページは構造的には正しくても、仕上がっているわけではありません。毎回同じ短いチェックリストを同じ順序で実行することで、プロジェクトごとに同じ問題を再発見する手間を省けます。

0. 安全レポートを読む(30秒)

何かを貼り付ける前に行ってください。後ではありません。結果ビューには、変換中に削除または書き換えられたすべての項目が一覧表示されます。削除されたスクリプト、クリーンアップされたフォームのaction、破棄された埋め込み、absoluteに格下げされたfixed配置、空のスロットに変換されたBase64画像などです。

ここで30秒かけるだけで、残りの確認作業に何が含まれるかがわかります。削除されたものが何もないと報告されたページは、4つのスクリプトと2つのフォームが報告されたページよりもはるかに短いチェックで済みます。また、最も無駄な失敗を防げます。レポートの1行に、その要素が書き換えられたことと理由がすでに書かれているのに、要素がおかしく見える理由を10分かけて探す、という失敗です。

1. 最初にブレークポイント(4分)

個々のウィジェットに触れる前に、デスクトップ、タブレット、モバイルを順に確認します。レイアウトの問題はコンテナレベルで修正するのが最もコストが低く、先に修正しておけば後でウィジェットのスタイルをやり直さずに済みます。複数列のグリッドが折りたたまれるか、ヒーローセクションの高さが適切か、長い見出しがひどく崩れないかを確認します。

順序は見た目以上に重要です。ウィジェットのスタイルはレイアウトの後工程です。カードのスタイルを変更してから、タブレットではグリッドを2列にする必要があったと気づけば、もう一度スタイルをやり直すことになります。毎回、コンテナが先、ウィジェットは後です。

2. リンクとボタン(3分)

すべてのCTA(コールトゥアクション)をクリックします。抽出されたブロックはラップしているアンカーが失われることがあるため、ボタンがリンクなしで取り込まれる場合があります。そのついでにホバーカラーを設定してください。ホバー状態はソースから読み取れず、スタイル未設定のホバーは、取り込んだページで最も目立つ兆候です。

3. 画像(3分)

すべてのプレースホルダースロットを埋めます。各スロットのキャプションには、そこに何があったかが示されています。表示したくない場合は、画像を配置したらキャプションを削除してください。また、全幅カード画像が意図したデザインどおりにトリミングされているかも確認します。

4. アイコン(1分)

空のアイコンコントロールがないか走査します。アイコンを名前で一致させられなかった場合は、意図的に空白のままになっています。これは、間違った推測のままで済ませるのではなく、アイコンピッカーから正しいものを選ぶようにという合図です。

5. 連携(2分)

任意のナビメニューウィジェットを実際のWordPressメニューに設定します。任意のフォームウィジェットのアクションを設定します。元の送信エンドポイントは意図的に引き継がれません。

6. 見出しとSEO(1分)

H1が正確に1つであることと、見出しレベルが適切に降順になっていることを確認します。すでにH1があるページにスタンドアロンページをインポートした場合は、インポートした見出しのレベルを設定し直します。

7. フォント(1分)

タイポグラフィの値(ファミリー、サイズ、ウェイト、行の高さ)は変換されますが、フォントファイルは変換されません。ソースがセルフホストまたはライセンスされたファミリーを使用していて、サイトにそのファミリーがない場合、ウィジェットは正しいファミリー名を保持しますが、ブラウザは静かに別のものへフォールバックします。通常、ざっと見ただけでは見逃すほど似ています。

見出しを1つと段落を1つ開き、ファミリーが実際に解決されるか確認します。解決されない場合は、まずサイトにフォントをインストールします(Elementorのカスタムフォント、Google Fontsの選択、またはテーマ)。そうすれば、1つのウィジェットにも触れずにタイポグラフィが整います。

8. グローバル設定に再接続(2分)

サイトカラーモードで変換した場合を除き、すべての色はハードコードされた状態で取り込まれます。ページは今日は正しく見えますが、ブランドカラーが変更された最初の時点で、それを一括で変更できる場所がないため、負債になります。

ページが小さく、どれがどれだか覚えているうちに、主要な色とテキストスタイルをElementorのグローバルカラーとグローバルフォントに再割り当てしてください。新しいページでは数回のクリックで済みますが、3人が編集したページでは午後いっぱいかかります。

9. 残ったものを片付ける(1分)

インラインスタイルを保持して変換した場合、ページ上部に元のスタイルシートを保持するCSSブロックが存在する場合があります。ウィジェットが独自の設定を保持していることを確認できたら、通常はそのCSSブロックを削除できます。削除後はレイアウトを確認してください。また、不要になったラッパーから残った空のコンテナも削除します。

何かがおかしく見えるのに理由がわからないとき

ツリーをクリックしながら原因を見つけようとしないでください。変換ツールに戻り、構造マップを開き、問題のある場所のプレビューにカーソルを合わせます。すると、Elementorツリー内の対応する行がハイライトされ、その逆も同様です。これにより「この要素は実際に何になったのか」が一度でわかります。

ほとんどの場合は2つの答えで説明がつきます。赤いHTMLウィジェット行は、ネイティブに相当するものがなかったため、生のマークアップとして保存されたことを意味します。通常はカスタムのインラインSVGや特殊な埋め込みです。何もハイライトされない場合は、見ているものがDOM要素ではなかったことを意味します。擬似要素、生成された引用符、グラデーションオーバーレイなどです。どちらもElementorの中を探しても修正できません。だからこそ、最初に確認する価値があるのです。

それからテンプレートとして保存する

ページやセクションを再利用する予定がある場合は、きれいなうちにテンプレートライブラリに保存してください。未来の自分が感謝するでしょう。グローバル設定の作業前に保存したセクションは、2回クリーンアップしなければならないセクションになります。