WordPress画像サイズの初心者ガイド（+ベストプラクティス）

この初心者向けガイドで、WordPressの画像サイズの基本を学びましょう。WordPressが自動的にサムネイル、中、大きな画像バージョンを作成する方法、それらのサイズがサイトの外観とパフォーマンスに重要な理由、 WP Media Folder が整理整頓に役立つ方法を学びます。.

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

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

WordPressに画像をアップロードすると、サイト上のさまざまな場所で使用するために、その画像の複数のバージョンが自動的に作成されます。デフォルトでは、WordPressは以下を生成します：

• サムネイル: 150 × 150 ピクセルの正方形バージョン。ブログのプレビュー一覧、ウィジェット、ギャラリーなどでよく使用されます。
• 中：長い辺が300ピクセルになるようにスケーリングされたバージョン。画像が幅よりも高さが高い場合、300の高さとより小さい幅、またはその逆になる可能性があります。
• 大
• フル: アップロードしたファイルそのままの状態です。

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

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

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

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

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

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

サムネイル

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

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

中

ブログ投稿内や小さなバナー内のインライン画像に最適です。これらは、明瞭さとファイルサイズのバランスが良いです。.

大きなサイズ

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

非常に大きな元のファイル（たとえば、幅が数千ピクセル、または高解像度のTIFFまたはPNG画像）をアップロードすることは推奨されません。これらはより多くのストレージスペースを占有し、サイトまたはメディア処理サーバーの速度を低下させる可能性があります。理想的には、テーマの最大表示幅にほぼ一致するようにサイズ変更した画像をアップロードします（たとえば、コンテンツ領域が1200pxの場合、幅1200px）。.

テーマの画像寸法をカスタマイズする方法

デフォルトでは、WordPressは設定 > メディアのサイズを使用しますが、テーマの要件に応じてこれらのサイズを調整したり、新しいサイズを追加したりすることができます。

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

WordPressダッシュボード > 設定 > メディアに移動します。ここで、サムネイル、中、および大のピクセル寸法を変更できます。変更を加えた後、保存します。将来のアップロードでは新しい設定が使用されます。.

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

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

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

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

add_image_size( 'custom-feature', 800, 600, true ); 

これは、幅800px、高さ600pxで、トリミングが有効な、新しいサイズ 'custom-feature' を登録します。.

その後、テーマファイルで呼び出すことができます:

the_post_thumbnail( 'custom-feature' ); 

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

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

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

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

サムネイルの再生成

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

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

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

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

まとめ：高速で美しいサイトのためのWordPress画像サイズのマスター

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

自分自身をテクニカルだと考えていなくても、これらの手順は簡単です。メディアの設定を調整し、変更後にリジェネレーションプラグインをインストールし、必要に応じてテーマにカスタムサイズを登録し、 WP Media Folder を使用してメディアライブラリをより効率的に整理します。そうすることで、画像が素晴らしく見え、高速に読み込まれ、管理が容易になります。.