今回は、WordPressの人気プラグインElementorを使った画像ウィジェットの活用方法について解説します。
Webページのビジュアルコンテンツは、訪問者の第一印象を左右する重要な要素です。
特に、画像のサイズや配置、スタイルの調整が適切に行われているかどうかは、ユーザーエクスペリエンスに直結します。
Elementorの画像ウィジェットは、初心者から上級者まで幅広いユーザーに対応した多機能なツールです。
この記事では、画像の基本設定からスタイル調整、さらには高度な配置設定まで、具体的な操作方法を詳しくご紹介します。
また、SEO向上に役立つ画像のメタタグ設定についても触れていますので、ぜひ最後までお読みください。
要点
- 画像ウィジェットでは、自由に画像サイズを選べる（サムネイル・中・大・フル・カスタム）
- カスタムサイズ設定により、ピクセル単位の微調整が可能
- ホバー効果やCSSフィルター、枠線の装飾など多彩な機能
- 画像にリンクを設定したり、alt属性を追加できる
- サイズの横幅と高さを個別に指定すると画像が歪む可能性がある
- WebP形式（WordPress 5.8以降対応）を活用するとJPEGより平均25〜34%のファイルサイズ削減が可能
- レスポンシブ表示はブレークポイントごとに個別設定することで崩れを防げる
Elementor画像処理
Elementorは、ブラウザ上での操作を可能にする高度なページビルダープラグインです。
これを使うことで、使いやすい環境で画像処理ができます。
カスタマイズ性も非常に高く、様々な要件に応じた画像サイズの調整やスタイルの設定が自由に可能です。
画像ウィジェットの設定パネルは、大きく「コンテンツ」「スタイル」「アドバンスド」の3タブで構成されています。コンテンツタブでは画像の選択・サイズ・リンク設定、スタイルタブでは幅・不透明度・フィルター・ホバー効果、アドバンスドタブでは配置（絶対・固定）やz-indexなどを設定します。この構成を把握しておくと、目的の設定をすばやく見つけることができます。
画像ウィジェットの基本設定
📌 この記事はこちらの完全ガイドでも詳しく解説しています
まず、画像ウィジェットの基本設定について説明します。
画像を追加する際、画像サイズを「フル」に設定するのがおすすめです。
また、画像の位置やキャプションの設定もできます。
リンクを追加する場合、メディアファイルかカスタムURLを選択することが可能です。
画像サイズの選択肢と使い分け
Elementorの画像サイズには、以下の選択肢があります。
- サムネイル：WordPress標準サイズ（デフォルト150×150px）
- 中：WordPressの「中サイズ」設定値（デフォルト最大300×300px）
- 大：WordPressの「大サイズ」設定値（デフォルト最大1024×1024px）
- フル：アップロードしたオリジナル画像をそのまま表示
- カスタム：任意のピクセル数を指定
「フル」を推奨する理由は、WordPressが中間サイズを生成していない環境でも元画像を正しく呼び出せるためです。ただし、アップロード画像が大サイズ（例：3000px以上）の場合、ページ表示速度が低下するリスクがあります。画像圧縮プラグインと組み合わせて使うことで、このリスクを回避できます。
「カスタム」サイズを指定する場合、対応する中間サイズファイルがWordPressに存在しないと、ブラウザが元画像を縮小表示するだけになります。既存画像に対してカスタムサイズを適用したい場合は、「Regenerate Thumbnails」プラグインで既存画像のサムネイルを再生成してから設定してください。
alt属性の設定場所
Elementorウィジェット内のコンテンツタブ→「画像」の下にある「画像の代替テキスト（alt）」入力欄で直接設定できます。なお、WordPressのメディアライブラリで事前にalt属性を設定しておくと、Elementorに追加した際に自動的に引き継がれます。どちらで入力しても有効ですが、複数ページで同じ画像を使い回す場合はメディアライブラリ側で管理すると運用が効率的です。
⚠️ 注意：リンク先を「メディアファイル」に設定すると、画像クリック時に元ファイルが直接開いてしまいます。外部ページやLightboxを使いたい場合は「カスタムURL」を選択してください。
スタイル設定
次に、スタイル設定について見ていきます。
幅や横幅の上限を設定して、画像の大きさを調整できます。
不透明度やCSSフィルターを使って、画像の明るさや透明度を変更することもできます。
また、マウスオーバー時の挙動も設定可能で、透明度やボカシの変化を追加できます。
幅・高さの設定とよくある失敗
スタイルタブの「幅」はpx・%・vwなどの単位で指定できます。基本的には幅のみを指定し、高さは「auto」のままにしておくのが安全です。幅と高さの両方をpxで指定すると、元画像の縦横比と異なる場合に画像が引き伸ばされて歪んでしまいます。どうしても特定のアスペクト比に固定したい場合は、CSSのobject-fit: coverを活用してください。
CSSフィルターの主なパラメーター
| フィルター | 効果 | 設定範囲の目安 |
|---|---|---|
| 明るさ（Brightness） | 画像の明暗を調整 | 0（真っ暗）〜200（真っ白）、標準100 |
| コントラスト（Contrast） | 明暗の差を強調 | 0〜200、標準100 |
| 彩度（Saturation） | 色の鮮やかさを調整 | 0（グレースケール）〜200、標準100 |
| ぼかし（Blur） | 画像をぼかす | 0〜10px程度 |
| 色相回転（Hue Rotate） | 色相を回転させる | 0〜360度 |
レスポンシブ表示での注意点
Elementorはデスクトップ・タブレット・モバイルの3つのブレークポイントごとに個別設定が可能です。デスクトップで設定したサイズはモバイルに自動引き継ぎされますが、スマートフォンで画像が巨大に表示される問題が起きやすいです。編集画面上部のデバイス切り替えアイコンでモバイルモードに切り替え、幅を「100%」や適切なpx値に設定することで対処できます。
ボーダーとシャドウの追加
画像にボーダーやシャドウを追加する方法も紹介します。
ボーダーは直線や丸みを選んで追加でき、シャドウは色や透明度を調整して立体感を出すことができます。
ボーダー設定では「ボーダータイプ」（ソリッド・ダッシュ・ドットなど）、「幅」（px単位で各辺個別設定可）、「色」を指定できます。「ボーダー半径」を設定すると角を丸くでき、50%以上にすると円形表示になります。ボックスシャドウは「水平・垂直オフセット」「ぼかし」「広がり」「色・透明度」を組み合わせることで、自然な浮き上がり効果を演出できます。
高度な設定：重なり合う画像
画像を重ねる設定も可能です。
まず、画像を追加し、配置を「絶対」に設定することで、好きな位置にドラッグ＆ドロップできます。
レイヤー構造の順番はz-indexで設定し、前後の配置を調整します。
絶対配置を使う場合の手順は以下の通りです。
- 画像ウィジェットを選択し、「アドバンスド」タブを開く
- 「位置指定」を「絶対」に変更する
- 表示されたオフセット（上・右・下・左）を数値で指定して位置を決める
- 重なり順を調整したい場合は「z-index」に数値を入力（数値が大きいほど前面に表示）
⚠️ 注意：絶対配置にした画像が別要素の背後に隠れてしまう場合、z-indexが正しく設定されていないか、親要素の
overflow: hiddenが干渉している可能性があります。親コンテナのz-indexも確認してみましょう。
カラムと見出しの活用
カラムを使った画像の配置も便利です。
カラムに画像を背景として追加し、見出しやテキストを重ねることで、デザイン性の高いレイアウトが可能になります。
スペーサーを使って幅や高さを調整し、モバイル表示でも最適なレイアウトを維持できます。
カラム背景への画像活用は、セクション編集パネルの「スタイル」→「背景」→「背景タイプ：クラシック」から画像を選択することで実現できます。「背景サイズ」を「Cover」、「背景位置」を「Center Center」にすると、どんな画面幅でも画像が適切にトリミングされて表示されます。また、コンテンツとの視認性を確保したい場合は「背景オーバーレイ」に半透明の色を重ねるのが効果的です。
画像ファイル形式
インターネット上で使用する画像は、その使用目的によって適した形式が異なります。
例えば、JPG、GIF、PNGなどの画像ファイルは、ウェブページを構築する際に適切に用いられることが重要です。
その中で、JPEGとGIFは特に重要です。
JPEGは写真を公開する際に最も適しており、WEBページで頻繁に見かけます。
対照的に、GIFはイラストやアイコンなど、少数の色を使用するグラフィックスに向いています。
JPEGは24ビット圧縮で、適した圧縮方法を使えば画質を犠牲にせずにサイズを小さくできます。
但し、画像を大きく表示する場合は画質が劣化しやすいという欠点があります。
GIFは256色以内のカラーパレットを使用し、圧縮率が非常に高いです。
| ファイル形式 | 特徴 | 利用例 | Web推奨度 |
|---|---|---|---|
| JPEG | 24ビットカラー、適度な圧縮 | 写真 | ◎（WebPが使えない環境） |
| GIF | 256色以下、高い圧縮率、アニメーション対応 | イラスト、アイコン、アニメーション | △（アニメーション以外はWebP推奨） |
| PNG | 透過機能あり、可逆圧縮 | ロゴ、透過画像 | ○（透過不要ならWebP推奨） |
| BMP | 無圧縮、高画質だが重い | 編集用の素材 | ✕（Web使用には不向き） |
| WebP | JPEG比25〜34%軽量、透過・アニメーション対応 | 写真・ロゴ・アニメーション全般 | ◎◎（現代のWeb標準） |
また、PNGやBMPといった別の画像ファイル形式も存在しますが、JPEGとGIFの使い分けが初期のステップで重要です。
BMPは編集用の素材として貴重ですが、ウェブで利用するには容量が大きすぎるため向いていません。
WebP形式について（2025年現在の推奨）
WordPress 5.8以降、WebP形式の画像アップロードが正式にサポートされています。WebPはGoogleが開発した次世代フォーマットで、JPEGと比較して平均25〜34%のファイルサイズ削減が可能です（Google調べ）。ElementorはWebP画像をそのまま表示ウィジェットで利用できます。既存のJPEG/PNG画像をWebPに変換するには、ShortPixel・Imagify・Squooshなどのツールを活用してください。
画像ファイルのサイズが大きいとページ表示が遅れます。Googleのデータによると、ページ読み込みが1秒遅くなるごとにコンバージョン率は約20%低下するとされています。ウェブサイトを構築する際には画像形式の選択と容量の最適化が欠かせません。
メタタグとは
画像におけるメタタグも非常に重要です。画像に適切なメタタグを設定することで、検索エンジンに対して画像の内容を正確に伝えることができます。
これは、画像検索での表示や、全体的なSEOの向上に役立ちます。
alt属性（代替テキスト）
画像が表示されない場合や、視覚障害者のためのスクリーンリーダーが使用される場合に表示されるテキストです。
画像の内容を簡潔に説明するテキストを設定することが重要です。例えば、風景写真には「美しい夕焼けの風景」などと記述します。
Elementorでは、画像ウィジェット→コンテンツタブ→「画像の代替テキスト」欄に直接入力できます。キーワードを自然に含めながら、画像の内容を正確に表現することを心がけましょう。
title属性
画像にマウスを重ねたときに表示されるテキストです。
alt属性とは異なり、補足情報や追加の説明を提供するために使用します。
alt属性よりも詳細な情報を記述することが多いです。
ファイル名
画像ファイル名もSEOに影響します。意味のあるキーワードを含めたファイル名にすることで、検索エンジンが画像の内容を理解しやすくなります。
例えば、「IMG1234.jpg」ではなく「elementor-image-widget-setting.jpg」などとします。日本語ファイル名はURLエンコードされて文字化けする場合があるため、英数字とハイフンで構成するのが安全です。
キャプション
画像の下に表示されるテキストで、画像の説明や補足情報を提供します。
キャプションはユーザーにとってわかりやすいだけでなく、検索エンジンにも有益な情報を提供します。
画像のサイズと圧縮
メタタグとは直接関係ないですが、画像のサイズと圧縮も重要です。
適切なサイズと圧縮率により、ページの読み込み速度が向上し、ユーザーエクスペリエンスが向上します。
特にCore Web VitalsのLCP（最大コンテンツの描画）は、ページ内最大の画像の読み込み速度に直結します。ファーストビューに大きな画像を置く場合は、遅延読み込み（Lazy Load）をOFFにしてLCPスコアを改善することも検討してください。
画像に適切なメタタグを設定することで、検索エンジンが画像の内容を理解しやすくなり、検索結果での表示も改善されます。
WordPressを利用する場合、画像のメタタグを最適化するためのプラグイン（例えば、Yoast SEOやSEO Optimized Images）を活用することをお勧めします。
これにより、効率的に画像SEOを強化することができます。
画像SEOチェックリスト
- ✅ alt属性に画像内容を表すテキストを設定している
- ✅ ファイル名が「キーワード-説明.jpg」形式になっている（英数字・ハイフン使用）
- ✅ 不要に大きな画像はリサイズ・圧縮してからアップロードしている
- ✅ WebP形式を活用している（または変換プラグインを導入している）
- ✅ ファーストビューの主要画像にはLazy Loadを無効化している
よくある質問（FAQ）
Q. Elementorプラグインでは画像ウィジェットの画像サイズを変更できますか?
はい、変更できます。Elementorの画像ウィジェットでは、コンテンツタブから「サムネイル」「中」「大」「フル」「カスタム」の5種類の画像サイズを選択できます。カスタムを選ぶとピクセル単位で自由に指定することも可能です。
Q. Elementorで画像を圧縮することはできますか?
Elementor自体には画像圧縮機能はありません。画像の圧縮はアップロード前にSquooshなどのツールで行うか、ShortPixelやImagifyといったWordPress用の画像最適化プラグインを別途導入して対応することをおすすめします。
Q. Elementorの3D画像処理機能はありますか?
Elementorには標準的な3D画像処理機能はありません。ただし、CSSトランスフォームを使ったカスタムCSSを追加することで、遠近感のある3D風の表現を実現することは可能です。
Q. Elementorでメタタグを設定できますか?
画像ウィジェットのコンテンツタブから、alt属性（代替テキスト）を直接入力できます。ページ全体のメタタイトルやメタディスクリプションについては、Elementor ProのSEO設定、またはYoast SEOなどの専用プラグインと組み合わせて設定することをおすすめします。
まとめ
Elementorの画像ウィジェットは、直感的で多機能なツールとして、様々な画像サイズやスタイルを自由にカスタマイズできます。
画像の追加から、スタイル設定、ボーダーやシャドウの装飾、さらには重なり合う画像の高度な設定まで、多彩な機能を提供しています。
画像ウィジェットを効果的に利用することで、ウェブページのビジュアルを大幅に向上させ、訪問者に魅力的な体験を提供できます。
また、適切な画像ファイル形式を選び、メタタグを正確に設定することで、SEOの向上にも寄与します。
ブログやウェブサイトのビジュアルコンテンツをさらに充実させるために、Elementorの画像ウィジェットの活用方法をしっかりと理解し、実践していきましょう。
