WordPress アイキャッチ画像ブログ投稿 Divi サイズ: 完全ガイド

公開: 2026-01-01

WordPress のアイキャッチ画像に適切な画像サイズを選択することで、ブログの美観と効果が決まる可能性があります。独自のルールと設定で画像表示を処理するDiviのようなページビルダーを使用する場合、この決定はさらに重要になります。シャープに見え、高速に読み込まれ、Divi を活用した Web サイトのデザインに完璧に調和するには、アイキャッチ画像のサイズはどのくらいにすべきか疑問に思っている場合は、この記事が最適です。

TL;DR

Divi テーマを使用する場合の WordPress の理想的な画像サイズは、通常、アスペクト比 16:9に一致する約 1200px x 675pxです。このサイズにより、ブログレイアウト間での互換性が確保され、高解像度のディスプレイでも鮮明に表示されます。品質を損なうことなく読み込みを高速化するには、最適化された JPEG または WebP 形式を使用します。 Divi Builder の画像設定とテーマオプションをカスタマイズして、投稿に注目の画像がどのように表示されるかを微調整します。

WordPress でアイキャッチ画像のサイズが重要な理由

WordPress は、サムネイル、中サイズ、大サイズ、フルサイズなど、アップロードされた画像の複数のバージョンを自動的に生成します。ただし、テーマによっては、最適なサイズでアップロードしないとアイキャッチ画像が正しく表示されない場合があります。これは、視覚的に豊富で高度にカスタマイズ可能な Divi に特に当てはまります。

画像が小さすぎると、ピクセル化して見える場合があります。サイズが大きすぎると、ページの速度が遅くなる可能性があります。画像のトリミングが適切でないと、顔やテキストなどの重要な視覚要素が切り取られ、サイト全体の外観が損なわれる可能性があります。

Divi 固有の画像処理: 知っておくべきこと

Divi テーマと Elegant Themes の Divi Builder は、優れた柔軟性を提供します。ただし、その柔軟性は、不正確な画像寸法に対してもより敏感であることを意味します。 Divi には、画像を表示するためのいくつかのモジュール (ブログ、ギャラリー、画像など) が付属しており、注目の画像の見え方は使用するモジュールによって異なります。

Divi で注目の画像を含むブログ投稿を追加すると、次のようになります。

Divi のブログモジュールを使用すると、注目の画像が取得され、選択したレイアウト (グリッドまたは全幅など) に応じてデフォルトのサイズが適用されます。
Divi のテーマビルダーを使用してカスタムブログ投稿テンプレートを作成すると、完全に制御できるようになりますが、画像のサイズと比率を慎重に計画する必要があります。

Divi でのアイキャッチ画像の最適なサイズ

一般に、Divi での WordPress のアイキャッチ画像の最適なサイズは次のとおりです。

標準の 16:9 アスペクト比の場合は1200 ピクセル x 675 ピクセル– ブログモジュールやソーシャルメディアでの共有に適しています。
視覚的に大きな損失を与えずにファイルサイズをわずかに削減したい場合は、 1080 ピクセル x 608 ピクセルです。
インパクトと画面範囲が重要な全幅画像の場合は1500 ピクセル x 844 ピクセル。

これらのサイズは Retina ディスプレイでは鮮明に表示され、小さな画面ではスムーズに縮小されます。

サイズを選択するときはレイアウトを考慮してください

Divi で選択したレイアウトは、どの注目画像のサイズが最適なパフォーマンスを発揮するかに影響します。

グリッドレイアウト:長方形の画像 (16:9) に最適です。カスタムレイアウトを使用しない限り、正方形または縦長の形式は避けてください。
全幅レイアウト:品質を維持し、ぼやけを避けるために、幅 1500 ピクセルなどの大きな画像を使用します。
サイドバーのレイアウト:ブログにサイドバーが含まれる場合、アイキャッチ画像の幅は狭くなります。最小幅 800 ピクセルを目指します。

アスペクト比についてはどうですか?

アスペクト比は単なるピクセルよりも大きな役割を果たします。 Web デザイン、特に Divi のブログ投稿で最も一般的で推奨されるアスペクト比は16:9です。これは、ソーシャルメディアのプレビュー、YouTube のサムネイル、最新のデスクトップモニターで使用される一般的なサイズと一致します。

考慮すべき他のアスペクト比:

4:3 – よりクラシックなブログレイアウトやボックス化されたブログレイアウトに適しています。
1:1 – グリッドギャラリーやミニマリストのブログデザインに役立ちます。

ただし、非常に具体的なデザインビジョンに基づいて作業している場合を除き、16:9 を使用してください。視覚的なバランスと互換性に優れています。

WordPress + Divi でアイキャッチ画像のサイズを設定する方法

アイキャッチ画像をすべての投稿で鮮明かつ一貫して表示するには、次の手順に従います。

適切なサイズで画像をデザインする: 理想的には、Photoshop、Canva、Figma などの外部画像エディターを使用して、 1200px x 675pxの画像を作成します。
画像を圧縮する: アップロードする前に、TinyJPG、ShortPixel、Squoosh などのツールを使用して画像を Web 用に最適化します。
投稿に画像をアップロードする: WordPress エディターの右側にある「注目の画像」ボックスを使用します。
ブログモジュールで設定する: Divi Builder で、ブログモジュールを使用し、「要素」設定タブで「注目の画像を表示」を有効にします。

Divi でのアイキャッチ画像の表示を改善するためのヒント

適切なサイズを選択した後でも、Divi テーマでのアイキャッチ画像の見え方を改善する他の方法があります。

Divi テーマビルダーを使用してカスタムブログテンプレートを作成すると、画像の配置とサイズを完全に制御できます。
レスポンシブ設定を有効にする: タブレットやモバイルビューで画像の比率を維持するように Divi モジュールが設定されていることを確認します。
画像スタイル設定を使用して、Divi Builder でパディング、シャドウ、境界線を直接調整し、プレゼンテーションを強化します。
適切なファイル形式を選択する: 可能な場合はWebPを使用します。WebP は JPEG や PNG よりも軽く、品質を保持します。

トリミングの問題への対処

場合によっては、Divi または WordPress が注目の画像を自動的にトリミングまたはサイズ変更することがあります。注意しないと、画像の重要な部分が欠けてしまう可能性があります。これを修正する方法は次のとおりです。

「サムネイルの再生成」プラグインをインストールします。これにより、設定を調整した後、新しいサイズでメディアライブラリが再処理されます。
CSS を使用する: テーマカスタマイザーでカスタム CSS を使用すると、デフォルトの画像寸法をオーバーライドできる場合があります。
手動でトリミング: WordPress が自動的にトリミングを行わないように、正しいアスペクト比で画像をアップロードし、エディターでトリミングします。

アイキャッチ画像に関する SEO の考慮事項

アイキャッチ画像も SEO において重要な役割を果たします。必ず次のことを行ってください。

説明的な代替テキストを含める: 関連するキーワードを含む代替 (alt) テキストを追加します。
SEO プラグインを使用する: Yoast SEO や Rank Math などのプラグインを使用すると、注目の画像が検索やソーシャルプレビューでどのように表示されるかをプレビューできる場合があります。
ファイルサイズを小さくする: ページの読み込みが速くなると、SEO ランキングが向上します。

Divi ブログモジュールの応答動作

Divi はデフォルトでモバイル対応ですが、注目の画像を美しく拡大表示するには、次のことを行う必要があります。

Retina サポートの場合は2 倍の解像度の画像を使用してください(たとえば、1200 ピクセルのコンテナの場合は 2400 ピクセル x 1350 ピクセル)。
ブログモジュール内の「デザイン→サイズ設定」を確認し、最大幅と最小幅の制約を設定します。

結論

Divi テーマを使用した WordPress で適切な画像サイズを選択するには、まず Divi が画像をレンダリングする方法を理解し、それに応じてビジュアルをデザインします。経験則としては、 1200px x 675pxを維持し、最適化された画像を使用し、Divi Builder で表示動作をカスタマイズすることです。ブログの視覚的な一貫性が高まるだけでなく、ページのパフォーマンスと SEO への対応力も向上します。

新しいサイトを立ち上げたり、既存のサイトのブランドを変更したりする場合は、時間をかけて注目の画像戦略を作成してください。あなたのブログ投稿、そして読者はあなたに感謝するでしょう。