WordPress の画像サイズに関する初心者向けガイド（+ ベストプラクティス）

この分かりやすい初心者向けガイドで、WordPressの画像サイズ設定の基本を学びましょう。WordPressがサムネイル、中サイズ、大サイズの画像を自動的に作成する方法、これらのサイズがサイトの見た目とパフォーマンスに重要な理由、そして WP Media Folder て画像整理を行う方法を学びましょう。

 このガイドでは、WordPressのデフォルトの画像サイズ（サムネイル、中サイズ、大サイズ）、それらの存在理由、そしてテーマに合わせてカスタマイズする方法について説明します。また、 WP Media Folder プラグインを使って画像を管理する方法についても説明します。技術的な知識がなくても、このガイドは簡単に理解できるはずです。WordPressが画像サイズをどのように処理し、どのように調整するかを具体的に理解できます。

WordPressのデフォルト画像サイズの概要

WordPressに画像をアップロードすると、サイト上の様々な場所で表示されるよう、その画像の複数のバージョンが自動的に作成されます。デフォルトでは、WordPressは以下のものを生成します。

• サムネイル：150 × 150ピクセルの正方形バージョン。ブログのプレビューリスト、ウィジェット、ギャラリーなどでよく使用されます。
• 中: 最長辺が300ピクセルになるように拡大されたバージョンです。画像の高さが幅よりも長い場合は、高さが300ピクセルで幅が狭くなるか、その逆になります。
• 大：最長辺が1024ピクセルのバージョン。全幅のアイキャッチ画像やブログ記事のヘッダーに最適です。
• 完全: アップロードしたファイルそのままで、変更されていません。

WordPressは、画像が表示される場所に応じて最適なサイズを選択します。投稿リスト内の小さなサムネイルは150×150ピクセルで配信されますが、アイキャッチ画像バナーでは最大1024ピクセルが使用される場合があります。このシステムにより、読み込み速度、帯域幅の使用量、そしてデバイスや画面サイズを問わず、表示が最適化されます。

WordPressがこれらのサイズを自動的に生成する理由

• 画像がデザイン領域に適切に収まるようにします（拡大したりぼやけたりしないなど）。
• ファイルサイズを縮小し、特にモバイルデバイスでのページの読み込みパフォーマンスを向上させる
• コンテンツ作成者のワークフローを簡素化し、手動でのサイズ変更は不要になります。

アップロードした画像が WordPress が生成するサイズよりも小さい場合 (たとえば、幅 800 ピクセルの写真)、WordPress は画像がサポートする寸法までのサイズのみを作成するため、大きなサイズが元のサイズを超えることはありません。

デフォルトの画像サイズの使用に関するベストプラクティス

各デフォルト サイズの一般的な使用例を次に示します。

サムネイル

ギャラリーグリッド、ブログ投稿のプレビュー、ウィジェット、サイドバーリストなどにご利用ください。サムネイルサイズは大きな表示領域には使用しないでください。ピクセル化されて表示されます。

この例では、 WP Media folderで作成されたギャラリーを使用しました。

中

ブログ記事や小さめのバナー内のインライン画像に最適です。鮮明さとファイルサイズのバランスが取れています。

大きいサイズ

全幅画像、注目のヘッダー、スライダー、全画面セクションなどに使用します。フルサイズのオリジナル画像はサイズが大きくなり、ページの読み込みが遅くなる可能性があるため、どうしても必要な場合（高画質の写真など）を除き、使用を避けてください。

非常に大きなオリジナルファイル（例えば、幅が数千ピクセルにも及ぶファイルや、高解像度のTIFFまたはPNG画像など）のアップロードは推奨されません。これらのファイルはストレージ容量を多く消費し、サイトやメディア処理サーバーの速度を低下させる可能性があります。理想的には、テーマの最大表示幅（例えば、コンテンツエリアが1200ピクセルの場合は幅1200ピクセル）に合わせて画像をアップロードしてください。

テーマに合わせて画像のサイズをカスタマイズする方法

[設定] > [メディア]のサイズを使用しますが、テーマの要件に合わせてこれらのサイズを調整したり、新しいサイズを追加したりすることもできます。

管理画面からデフォルトの寸法を変更する

WordPressダッシュボード > 設定 > メディア へ移動してください。ここで、サムネイル、中サイズ、大サイズのピクセルサイズを変更できます。変更後は保存してください。今後のアップロードでは新しい設定が適用されます。

ただし、すでにアップロードされている既存の画像は自動的に再生成されないため、後でサイズを変更する場合はサムネイル再生成プラグインを使用する必要があります。

テーマコードにカスタム画像サイズを追加する

重要な注意:最初にバックアップを作成せずにカスタム コードを適用しないでください。

サムネイル/中/大を超える新しい画像サイズを登録するには、テーマのfunctions.phpファイルまたはカスタムプラグインにコードを追加してください。例：

add_image_size( 'カスタム機能', 800, 600, true ); 

これにより、幅 800 ピクセル、高さ 600 ピクセル、切り取りが有効になっている、「custom-feature」という名前の新しいサイズが登録されます。

次に、テーマ ファイル内でこれを呼び出すことができます。

the_post_thumbnail( 'カスタム機能' ); 

または、Gutenberg では、テーマがサポートしていれば、画像ブロックのドロップダウンに新しいサイズが表示されることがあります。

複数のカスタムサイズを追加できます。登録後、既存の画像のサムネイルを再生成すると、WordPressが新しいバージョンを作成します。

カスタムサイズを選択する際のベストプラクティス

• テーマのレイアウトに合わせて寸法を調整します。例えば、ヘッダーバナーのサイズ、ブログ投稿のおすすめサイズ、記事内画像の幅などです。
• コンテナよりもはるかに大きなサイズに画像のサイズを変更することは避けてください。ディスク領域が浪費され、読み込みが遅くなります。
• 16:9や4:3など、一貫したアスペクト比の画像が必要な場合は、クロッピングを使用します。クロッピングと比例スケーリングのどちらを優先するかに応じて、croppingをtrueまたはfalseに設定します。
• カスタム サイズを追加した後、挿入した画像をテストして、デスクトップとモバイルで正しく表示されることを確認します。

サムネイルの再生成

デフォルトのサイズを変更したり、新しいサイズを追加したりしても、古い画像には新しいサイズが自動的に作成されません。「Regenerate Thumbnails」などのプラグインを使用して、過去にアップロードした画像のサイズをすべて再生成してください。これにより、WordPressが様々な状況で提供できる適切なサイズがメディアライブラリに確実に保存されます。

ベストプラクティスの概要

• テーマの最大表示幅（例：幅1200ピクセル）に近いサイズの画像をアップロードしてください。WordPressがそれよりも小さいサイズを自動的に生成します。
• テーマによって異なる値が必要な場合を除き、デフォルトのサイズは150ピクセル（サムネイル）、300ピクセル（中）、1024ピクセル（大）のままにしておいてください。設定 > メディアで変更してください。
• 独自の表示領域 (ヒーローバナー、注目のブロックなど) のテーマまたはプラグイン コードで add_image_size() を使用してカスタム サイズを追加します。
• サイズを調整したり、新しいサイズを追加したりした後は、サムネイルを再生成して、WordPress が古いアップロードに対してそれらのサイズを作成するようにします。
• 一貫したアスペクト比が必要な場合はトリミングを使用し、元の比率を維持したい場合は比例スケーリングを使用します。

追加のヒント: WP Media Folderに注意してください フォルダベースの整理、メディア検索／フィルター機能の向上、ギャラリー作成の簡素化、メディアの置き換え、その他のワークフロー強化が必要な場合に最適です。画像サイズ設定とシームレスに連携します。

まとめ: WordPressの画像サイズをマスターして、高速で美しいサイトを実現

WordPressの画像サイズを理解することで、適切な画像を適切な場所に配置できるようになります。サムネイル、中サイズ、大サイズは、画質とパフォーマンスのバランスを考慮して設計されています。これらのサイズをカスタマイズしたり、テーマのレイアウトに合わせて新しいサイズを追加したりできます。WP WP Media Folder、WordPressのデフォルトのメディアシステムに加えて、フォルダ構造、高度な管理機能、置換ツール、透かし、ギャラリーツールなどを提供します。

技術に詳しくない方でも、これらの手順は簡単です。「メディア」の設定を調整し、変更後に再生成プラグインをインストールし、オプションでテーマにカスタムサイズを登録し、 WP Media Folder を使ってメディアライブラリを効率的に整理します。こうすることで、画像は見栄えがよく、読み込みが速く、管理も簡単になります。