Elementorのヒーロー画像を2分で高速化！

Elementorのヒーロー画像を高速化する

WordPressのページエディタとして人気のElementorは、ページデザインを簡単にします。しかし、サイトを遅くすることもよくあります。ユーザーのミスによる場合もあれば、Elementorの設計による場合もあります。私がほぼ毎日目にする例が、Elementorのヒーロー画像の扱いです。デフォルトでは、Elementorはこれらに背景画像を使用するため、毎回ページの読み込みが遅くなります。

最終確認: 2026年3月 Arjen Karel

Elementorの背景画像の魅力

Elementorはデフォルトで、ヒーロー画像を背景画像として追加します。Elementorでページを編集する際、最初のコンテナをクリックし、スタイルに移動して画像を追加するだけです。簡単で、便利で、誰にでもできます。それで十分なら、ここで読むのをやめてください。しかし訪問者を気遣うなら、このまま読み進め、Elementorのヒーロー画像を正しく作成する方法を学んでください。

Elementorの背景画像の問題点

では、背景画像の何が問題なのでしょうか。背景画像は、要素の背景全体に広がるという動作で知られています。必要な役割は果たしますが、パフォーマンス上の代償を伴います。

• 遅い検出: 技術的な観点から見ると、背景画像は理想とは程遠いものです。Elementorの背景画像は、HTML内ですぐに検出されません。これらの背景画像はスタイルシート内でリンクされています。スタイルシートは個別にダウンロードしてパースする必要があるため、レンダリングプロセスのかなり後になってから検出されます。これにより、Largest Contentful Paint (LCP)が遅延します。
• 速度に最適化されていない: ネイティブのlazy loading、fetchpriority、非同期デコードなどの新しいプロパティが欠けているため、背景画像は速度に最適化されていません。
• レスポンシブではない: 最後になりますが、Elementorの背景画像はレスポンシブではないため、小さなモバイルデバイスでも常にデスクトップ用のフルサイズの画像を読み込みます。

これ以上は説明しませんが（興味があれば背景画像が悪である理由をお読みください）、この設定のページはCore Web Vitalsの基準を満たせないでしょう。

遅い背景画像を2分で修正する方法

遅い背景画像を問題にする必要はありません。簡単なCSSの調整で、高速でレスポンシブな画像に変換できます。秘訣は、object-fit: coverを使用して画像を拡大縮小し、コンテナのposition: relativeと画像のposition: absoluteを組み合わせることです。

余談ですが: 今日、Elementorの背景画像を非常に高速でレスポンシブな画像に変換するまでの時間を計ってみました。2分もかかりませんでした。

ステップ1: 必要なスタイルを追加する

遅い背景画像を修正するには、まずいくつかの不可欠なCSSスタイルを適用します。これらのスタイルにより、画像は適切な背景カバー画像として機能し、Elementorのヘルパーdivと競合しなくなります。

/* relativeにする親コンテナ */
  .relative{
      position: relative;
  }

  /* Elementorのヘルパーdivをrelativeにしない */
  .relative .elementor-container,
  .relative .elementor-column,
  .relative .elementor-widget-wrap {
      position: initial;
  }

  /* 新しく改善されたヒーロー画像 */
  .heroimg, .heroimg img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
  }

これらのスタイルの役割:

• .relative: 子要素を配置するために、親コンテナを相対配置にします。
• .relative .elementor-*: レイアウトの競合を防ぐために、Elementorのヘルパーdivをリセットします。
• .heroimg: 画像が背面に配置されつつ、コンテナを覆うように拡大縮小されるようにします。

スタイルの追加方法:

• WordPressのダッシュボードに移動します。
• 外観 > カスタマイズに移動します。
• 追加CSSをクリックします。
• 上記のCSSコードを貼り付けて、変更を保存します。

これで、遅い背景画像をレスポンシブで最適化されたヒーロー画像に変換する準備が整いました。次に、ヒーローセクションに .relative と .heroimg クラスを適用して、変換を完了します。

ステップ2: コンテナを準備する

スタイルの設定が完了したら、新しいヒーロー画像のためのコンテナを準備します。既存の背景画像を削除し、コンテナに.relativeクラスを適用します。

手順:

• コンテナを編集する:
• Elementorエディタを開き、現在ヒーロー画像が適用されているコンテナを選択します。
• 背景画像を削除する:
• スタイルタブに移動します。
• 画像が適用されている背景セクションを見つけます。
• ゴミ箱アイコンをクリックして背景画像を削除します。
• .relative クラスを適用する:
• 詳細設定タブに切り替えます。
• CSSクラスに relative と入力します。

ステップ3: 新しい画像を追加して新しいクラスを適用する

コンテナの準備ができたら、Elementorを使用してレスポンシブで最適化されたヒーロー画像を追加します。

予想されること: 最後のステップでは、クラスを適用する前にヒーロー画像がずれたり、おかしく見えたりすることがあります。これは正常な動作です。.heroimg クラスにより、画像は背景カバーのように機能するレスポンシブな全幅のヒーロー画像に変換されます。完了すると、最適化されたヒーロー画像はコンテナの背面に配置され、同じ見た目を維持しながらパフォーマンスが大幅に向上します。

手順:

• 画像要素を追加する:
• Elementorエディタで、左上のプラスアイコンをクリックして新しい要素を追加します。
• 画像ウィジェットを（.relativeクラスを持つ）トップコンテナにドラッグアンドドロップします。
• 画像をアップロードして選択する:
• 左側のパネルの画像設定で、画像のプレースホルダーをクリックします。
• 使用したい全画面画像をアップロードするか、WordPressのメディアギャラリーから既存のものを選択します。
• .heroimg クラスを適用する:
• 画像を選択した状態で、Elementorメニューの詳細設定タブに移動します。
• CSSクラスフィールドに heroimg と入力します。

結果: LCPが77%高速化

この時点で、ヒーロー画像は完全に最適化されました。ページを公開し、要素を検証すると、素晴らしいことに気づくでしょう。遅い背景画像が、レスポンシブで高速な前景画像に置き換えられています。この画像は高いfetchpriorityで読み込まれるようになり、読み込みが速くなり、Core Web Vitalsとユーザーエクスペリエンスの両方が向上します。

この例では、LCPが2.6秒から0.6秒に短縮されました。2分間の修正で77%の改善です。

おまけ: ヒーロー画像をプリロードする

背景画像を自動的にプリロードすることは事実上不可能です。前景画像は、WP Core Web Vitalsのようなプラグインでプリロードできます。これらのレスポンシブ画像をプリロードすることで、すべてのスクリプトの前にキューに入れられ、ウェブページの視覚的な要素が優先されます。

画像の最適化のその他の方法については、画像最適化の完全なガイドを確認してください。

YouTubeで完全なチュートリアルを見る

Elementorの背景画像を修正する様子をYouTubeでご覧ください！