最も必要とされている時に、信頼できるWordPressチュートリアルを。
WordPress入門ガイド
WPBカップ
2500万人以上
当社のプラグインを使用しているウェブサイト
16+
WordPress経験年数
3000+
専門家によるWordPressチュートリアル

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でライトボックス効果のあるギャラリーを追加する方法に関するステップバイステップのチュートリアルに従うことができます。

もう一つの優れた選択肢はNextGEN Galleryです。このプラグインは、プロの写真家やアーティストが作品を専門的に表示および販売するための高度な機能が必要な場合に最適であることを見出しました。

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

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

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

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

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

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

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

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

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

もちろんです。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のような実際のサイズの画像をダウンロードできます。
    お知らせください。

    ありがとうございます

Leave A Reply

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