WordPressでフルサイズの画像を表示する方法（簡単な4つの方法）

WordPressサイトに鮮やかな高解像度の写真をアップロードしたのに、残念ながら小さくぼやけて表示されてしまった経験はありませんか？特に写真、アート、製品画像のような詳細な作品を展示する必要がある場合、これは非常に残念な経験です。

バージョン5.3以降、WordPressはサイトの速度を向上させるために大きな画像を自動的に縮小しますが、これは素晴らしい機能です。しかし、ポートフォリオやオンラインストアで画像の品質が不可欠な場合、これは障害のように感じられることがあります。

WPBeginner では、私たち自身のプロジェクトでこの正確な問題に直面してきました。美しい画像と高速なウェブサイトのどちらかを選択する必要はないことを学びました。

このガイドでは、サイトの速度を低下させることなく、WordPressでフルサイズの画像を表示する4つの簡単な方法を説明します。

WordPressでフルサイズの画像を表示すべき時はいつですか？

WordPressでフルサイズの画像を表示する必要がある例としては、写真ポートフォリオやグラフィックデザインストアを運営している場合が挙げられます。作品をデジタルダウンロードとして販売している場合は、潜在的な顧客にその真の品質を示すために、大きな画像を表示したい場合があります。

物理的なeコマース製品のWooCommerceストアを運営している場合でも、一部のフルサイズの画像を表示する必要がある場合があります。製品のサムネイル画像を使用でき、ユーザーはそれをクリックして画像の元のサイズを表示し、商品の詳細をズームインできます。

とはいえ、大きな画像は多くの問題を引き起こす可能性があります。ウェブサイトの速度が低下し、その結果、検索エンジン最適化（SEO）に悪影響を与える可能性があります。

このため、WordPress はアップロード時に大きな画像を自動的にリサイズします。画像が 2560 ピクセル以上の高さまたは幅の場合、WordPress は元の画像の寸法を維持しながら、比例して小さいサイズに縮小します。

ほとんどのWordPressホスティングプロバイダーは、メディアライブラリにアップロードできるファイルサイズにも制限があります。これは、表示したい大きな画像がたくさんある場合に障害となる可能性があります。

ファイルサイズの制限を変更したい場合は、WordPressで最大ファイルアップロードサイズを増やす方法に関するガイドをお読みください。

さて、WordPressウェブサイトにフルサイズの画像を表示する方法を見ていきましょう。4つの方法があります。単一の画像に適しているものもあれば、複数の画像に適しているものもあります。以下のリンクを使用して、お好みの方法に直接ジャンプしてください。

• 方法1：フルサイズ画像URLを使用する（単一画像に最適）
• 方法2：WordPressで画像スケーリングを無効にする（複数ファイルに推奨）
• 方法3：プラグインで画像のスケーリングを無効にする（完全初心者向け）
• 方法4：WordPressの全幅画像をライトボックスで開く（ギャラリーに最適）
• フルサイズの画像に関するよくある質問
• ボーナス：速度とSEOを向上させるために画像を最適化する

方法1：フルサイズ画像URLを使用する（単一画像に最適）

ウェブサイトに 1 つまたは 2 つの大きな画像のみを表示したい場合は、元の画像 URLを使用して簡単に追加できます。

最大寸法を超える画像をアップロードすると、WordPressはその画像をスケーリングして小さいバージョンを作成します。ただし、元の大きな画像はそのまま残ります。

まず、WordPressダッシュボードから メディア » ライブラリ に移動します。「リスト」表示に変更されていることを確認してください。

その後、大きな画像の上にマウスカーソルを合わせます。末尾に「-scaled」が付くファイル名を持つものを探してください。

「URLをコピー」ボタンが表示されたら、それをクリックします。

これが完了したら、ブラウザのアドレスバーに画像URLを貼り付け、画像URLの末尾から「-scaled....」を削除します。画像形式（.png、.jpg、.gifなど）を削除しないように注意してください。

したがって、スケーリングされた画像URLが http://example-website.local/wp-content/uploads/2024/03/example-image-scaled.jpg の場合、元の画像URLは http://example-website.local/wp-content/uploads/2024/03/example-image.jpg になります。

そのURLにアクセスすると、画像が元のサイズで表示されます。

これで、ウェブサイトのどこにでも 画像を挿入 できます。リンクを使用して画像を追加するため、メディアライブラリから選択するのではなく、埋め込む必要があります。

これを行うには、画像を使用したい投稿またはページのGutenbergブロックエディターを開きます。次に、「+ブロックを追加」アイコンをクリックして新しいブロックを追加します。ここで、画像ブロックを選択できます。

それが終わったら、「URLから挿入」をクリックします。

次に、フルサイズの画像または大きな画像のURLをフィールドに貼り付け、キーボードの「Enter」キーを押すだけです。

公開する準備ができたら、「公開」または「更新」をクリックします。これで、このページまたは投稿にアクセスして、フルサイズの画像が実際に表示されていることを確認できます。

より多くのフルサイズの画像を追加するには、上記で説明したのと同じプロセスを繰り返すだけです。

方法2：WordPressで画像スケーリングを無効にする（複数ファイルに推奨）

複数の大きな画像を表示する予定がある場合は、自動スケーリング機能を無効にするのが最善の方法です。テーマのfunctions.phpファイルを編集することでこれを行うことができますが、この方法はリスクがあり、間違いを犯すとサイトが壊れる可能性があります。

そのため、代わりに無料のWPCodeプラグインを使用することをお勧めします。完全なWPCodeレビューで説明しているように、コードスニペットを追加する最も安全な方法であり、テーマを更新しても消去されません。

まず、プラグインをインストールして有効化する必要があります。この方法では、WPCodeの無料バージョンがあれば十分です。

有効化したら、コードスニペット » スニペットを追加に移動します。ここで、「カスタムコードを追加（新規スニペット）」を選択し、「スニペットを使用」をクリックします。

次に、カスタムコードスニペットのタイトルを入力します。これは参照用です。その後、「コードタイプ」ドロップダウンを開き、「PHPスニペット」を選択します。

コードエディターで、次のコードスニペットを追加します:

add_filter( 'big_image_size_threshold', '__return_false' );

次に、「挿入」セクションまで下にスクロールします。コードがウェブサイト全体で機能するように、場所が「すべてで実行」に設定されていることを確認してください。

準備ができたら、画面の上部までスクロールし、「非アクティブ」トグルをクリックして「アクティブ」に変更します。最後に、「スニペットを保存」をクリックしてコードをライブにします。

これ以降、WordPressはアップロードした大きな画像に対して元の寸法を使用し、フルサイズの画像にアクセスできるようになります。

方法3：プラグインで画像のスケーリングを無効にする（完全初心者向け）

コードの方法が難しすぎると感じる場合は、Perfect Images を使用して画像のスケーリングを無効にすることができます。この無料プラグインを使用すると、WordPressで追加の画像サイズを作成したり、メディアメタデータを更新したりできます。

まず、Perfect Imagesプラグインをインストールして有効化する必要があります。プラグインのインストールに関する詳細については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

アクティベートしたら、Meow Apps » Perfect Imagesに移動し、「Image Threshold」の横にある「Disable」チェックボックスを確認します。

WordPressは、これ以降、どの画像にも「-scaled」属性を追加しなくなります。そのため、大きなメディアファイルをアップロードしても、WordPressはデフォルトでそれらをフルサイズで表示します。

方法4：WordPressの全幅画像をライトボックスで開く（ギャラリーに最適）

最終的な選択肢は、サイトにフルサイズの画像ライトボックスを追加することです。これは、画像ギャラリー、スライダー、またはフォトポートフォリオを作成する場合に最適です。

この方法では、ページが最初に読み込まれるときに小さなサムネイル画像を表示できます。その後、訪問者はサムネイルをクリックしてポップアップでフルサイズの画像を表示できます。

ただし、上記の方法のいずれかを使用して、事前に画像のスケーリングを無効にする必要があることに注意してください。そうしないと、ライトボックスには画像の縮小バージョンのみが表示されます。

スケーリングを無効にしたら、ギャラリーを作成します。 Envira Gallery の使用をお勧めします。当社の完全な Envira Gallery レビュー で説明しているように、その強力さと使いやすさから、WordPressで最高の画像ギャラリープラグインです。

Envira をインストールして有効化した後、WordPress でライトボックス効果のあるギャラリーを追加する方法に関するステップバイステップのチュートリアルに従ってください。

もう1つの優れたオプションは、NextGEN Galleryです。このプラグインは、プロの写真家やアーティストが作品をプロフェッショナルに表示および販売するために高度な機能が必要な場合に最適であることがわかりました。

フルサイズの画像に関するよくある質問

WPBeginnerでは、WordPressでの画像管理に関する質問を頻繁に受け取ります。ここでは、フルサイズで表示することに関する最も一般的な質問をいくつか紹介します。

フルサイズの画像を表示すると、ウェブサイトは遅くなりますか？

はい、大きな画像ファイルはページの読み込み時間を増加させる可能性があり、ユーザーエクスペリエンスやSEOに悪影響を与える可能性があります。そのため、画像をフルサイズで表示する場合でも、アップロードする前にウェブ用に画像を最適化することが非常に重要です。

単一のフルサイズ画像を表示する最も簡単な方法は？

最も簡単な方法は、元の画像の直接URLを使用することです。WordPressは縮小バージョンを作成する際に元のファイルを保持するため、それを画像ブロックを使用して埋め込むことができます。

画像の拡大縮小を無効にするには、プラグインとコードのどちらを使用する方が良いですか？

ほとんどのユーザー、特に初心者にとっては、WPCodeのようなプラグインを使用するのが最も安全な方法です。テーマファイルに直接コードを追加すると、正しく行われない場合にサイトが破損する可能性がありますが、プラグインは安全な環境で処理します。

クリックするとフルサイズの画像が開くサムネイルを表示できますか？

もちろんです。lightboxギャラリープラグインであるEnvira Galleryを使用するのが最善の方法です。訪問者は小さくて読み込みの速いサムネイルを表示し、クリックするとポップアップで高解像度バージョンを表示できます。

ボーナス：速度とSEOを向上させるために画像を最適化する

フルサイズの画像を表示することは、あなたの作品を見せるのに最適ですが、大きなグラフィックはウェブサイトの読み込み時間を遅くし、SEOに悪影響を与える可能性があります。

このため、パフォーマンスのために画像を最適化することを強くお勧めします。EWWW Image Optimizerのようなプラグインは、ファイルを圧縮してサイズを小さくし、読み込みを速くすることで役立ちます。

この記事が、WordPressでフルサイズの画像を表示する方法を学ぶのに役立ったことを願っています。メディアファイルを管理し、サイトを改善するためのその他のヒントについては、他のガイドをご覧ください。

• 品質を損なわずにウェブ用の画像ファイルを簡単に最適化する方法
• 画像 SEO の初心者ガイド – 検索エンジンのための画像を最適化する
• WordPressで画像を簡単に遅延読み込みする方法
• WordPressで画像の盗難を防ぐ方法
• WordPressで画像の上にテキストを追加する方法
• 画像管理に最適なWordPressプラグイン（更新済み）

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。