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

高解像度の写真をアップロードしたのに、ライブサイトでは縮小されて表示されるのはフラストレーションが溜まります。詳細な写真やアートを展示したいのに、WordPressは自動的に細かいディテールをぼかしてしまいます。

私たちWPBeginnerでも、自身の画像ギャラリーで全く同じ問題に直面しました。幸いなことに、サイトの速度と美しく高品質なビジュアルのどちらか一方を選択する必要はありません。

このガイドでは、WordPressでフルサイズの画像を表示する簡単な方法を4つご紹介します。

WordPressでフルサイズの画像を表示する方法

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

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

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

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

このため、WordPressは現在、大きな画像をアップロード時に自動的にリサイズします。これは、巨大なファイルを処理する際にサーバーがタイムアウトするのを防ぐために導入されました。

画像の高さまたは幅が2560ピクセルを超える場合、WordPressは元の画像のアスペクト比を維持したまま、より小さなサイズに比例して縮小します。

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

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

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

方法1:フルサイズ画像URLを使用する(単一画像に最適)

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

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

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

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

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

WordPressで自動的にスケーリングされた画像のURLをコピーする

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

したがって、リサイズされた画像のURLがhttp://example-website.local/wp-content/uploads/2026/01/example-image-scaled.jpgの場合、元の画像URLはhttp://example-website.local/wp-content/uploads/2026/01/example-image.jpgとなります。

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

これで、ウェブサイトのどこにでも画像を追加できます。この元の高品質ファイルは標準のメディアライブラリセレクターからは隠されているため、ウェブアドレス(URL)を使用して手動で挿入する必要があります。

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

ブロックエディターで画像ブロックを選択する

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

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

ブロックエディターに画像URLを挿入する

注意: URL経由で挿入したため、WordPressはメディアライブラリから自動的に取得しないため、右側のブロック設定で手動で代替テキストを追加してください。

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

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

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

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

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

当社の利用方法: WPBeginnerでは、WPCodeを使用してウェブサイト全体のカスタムスニペットを管理しています。これにより、テーマファイルのタイポによるサイトの破損のリスクなしに、新しい機能を迅速かつ安全に追加できます。これは、このようなタスクに使用する正確なツールです。

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

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

WPCodeにカスタムコードを追加する

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

WPCodeでWordPressの画像しきい値を無効にするカスタムコードの挿入

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

add_filter( 'big_image_size_threshold', '__return_false' );

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

WPCode で新しいスニペットを保存する

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

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

この変更は、スニペットをアクティブにした後にアップロードした画像にのみ適用されることに注意してください。メディアライブラリに既に存在する画像は自動的に修正されません。フルサイズのバージョンが必要な場合は、それらを再アップロードする必要があります。

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

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

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

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

WordPressのプラグインで画像しきい値を無効にする

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

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

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

4 CommentsLeave a Reply

  1. 大きな画像を表示することの欠点は明らかです。特にモバイルデバイスのユーザーにとっては多くのデータを消費し、いずれにしても画像は表示に合わせてリサイズされます。私は代わりにギャラリーを使用することに慣れました。画像をフルサイズで表示したい場合は、たとえ画像が1枚だけでも、投稿にギャラリーを挿入します。これにより、記事内にサムネイルが表示され、誰でもクリックしてフルサイズの画像を表示できます。これは便利だと思いますし、ユーザーはフルサイズの画像を表示するかどうかを選択できます。私の意見では、これに最適なツールはElementorまたはEnvira Galleryです。

  2. ブログ記事に画像ブロックとして挿入すると、すべての角が自動的に少なくとも15%トリミングされる画像も目にしました。これを停止する方法はありますか?

  3. ウェブサイトに10〜14MBのサイズの画像をアップロードしました。
    WordPressは画像を最大3〜4MBのサイズで取り込みました。
    そのため、ユーザーは10MBのような実際のサイズの画像をダウンロードできます。
    お知らせください。

    ありがとうございます

返信する

コメントを残していただきありがとうございます。すべてのコメントは、当社のコメントポリシーに従ってモデレーションされますので、ご了承ください。メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。