WordPressで画像の拡大表示を追加する方法

WordPressにAmazonのような画像の拡大表示を追加したいですか？

ズーム機能を追加することで、ユーザーは通常サイズの画像では見えない細部を見ることができます。

この投稿では、WordPressで画像の拡大表示を簡単に追加する方法を紹介します。

なぜ画像の拡大表示を追加するのか？

WordPressサイトに拡大表示機能を追加することで、訪問者は画像の複雑なディテールをはっきりと表示することができます。

写真サイトを運営しているのであれば、拡大表示機能を追加することで、ユーザーは写真を拡大して細部まで表示することができます。

同様に、オンラインストアを運営している場合、カスタマイザーは商品画像を拡大表示することができます。

多くの大手eコマースサイトでは、すでに商品画像の拡大表示を採用しています。これにより、カスタマイザーは商品を吟味することができ、ショップでのより良いショッピング体験が生まれます。

ということで、WordPressで画像の拡大表示を簡単に追加する方法を2つご紹介します。以下のリンクからお好きな方法にジャンプできます。

動画チュートリアル

Subscribe to WPBeginner

文章での説明がお望みなら、このまま読み進めてほしい。

方法1：Enviraギャラリーを使用してWordPressで画像の拡大表示を追加する方法（推奨）

Envira Galleryは WordPressのための最高のギャラリープラグインです。WordPressサイト用の美しい画像ギャラリーを簡単に作成することができます。また、ギャラリー画像にズーム機能を追加できるズームアドオンも付属しています。

その他の強力なEnvira画像機能には、ドラッグ＆ドロップビルダー、既製ギャラリーテーマ、ライトボックスポップアップ、画像圧縮、画像保護などがあります。

開始するには、Envira Galleryプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するチュートリアルを参照してください。

有効化した場合、Envira Gallery ” 設定ページに行き、ライセンスキーを入力する必要があります。ライセンスキーはEnvira Galleryのアカウントエリアにあります。

その後、「Verify Key」ボタンをクリックする。

次に、Envira Gallery“ Addonsに移動する必要があります。ここから下にスクロールしてZoomアドオンを見つけ、’インストール’ボタンをクリックしてください。

ズームアドオンをインストールしたら、スイッチを切り替えて有効化する必要があります。

次のステップは、新規ギャラリーを追加することです。これを行うには、WordPressダッシュボードからEnvira Gallery ” Add Newに進みます。

ここから、ギャラリーの名前を入力し、「コンピューターからファイルを選択」ボタンをクリックして、ギャラリーに画像をアップロードすることができます。

また、「他のソースからファイルを選択」ボタンをクリックすると、WordPressメディアライブラリからギャラリーに画像を追加することができます。

ギャラリーに画像をアップロードしたら、サムネイルをドラッグ＆ドロップして並べ替えることができます。

あなたのイメージギャラリーをカスタマイズするための他のオプションもあります。例えば、ギャラリーレイアウトの選択、画像タイトルとaltテキストの追加、ギャラリーライトボックスの有効化、画像キャプションの表示、画像寸法の編集などが可能です。

詳しくは、Enviraでレスポンシブ画像ギャラリーを作成する方法をご覧ください。

画像のズーム設定

ギャラリー画像に拡大ズームを追加するには、「ズーム」タブをクリックします。そして、ズーム機能を有効化するボックスにチェックを入れます。

ズーム機能が有効化されると、画像にズームを追加するための設定が表示されます。

マウスオーバー時のズーム、ズーム効果、ズームタイプ、ズームウィンドウ位置、ズームウィンドウサイズ、色合いなどの設定が可能です。

ズーム設定に満足したら、’公開する’ボタンをクリックして変更を保存し、このギャラリーを利用できるようにします。

画像ギャラリーを拡大表示で埋め込む

これでギャラリーの準備ができましたので、WordPressの任意のページや投稿に直接追加することができます。

WordPressのコンテンツエディターから、’+’ボタンをクリックしてEnvira Galleryブロックを追加します。次に、Envira Galleryブロック内のドロップダウンメニューをクリックして、表示するギャラリーを選択します。

次に、WordPressブロックエディターに画像ギャラリーのプレビューが表示されます。見た目がよければ、投稿やページを公開することができます。

これで、サイトにアクセスして、拡大ズーム機能を実際に見ることができます。

Envira Galleryは写真サイトにズーム機能を追加するのに最適なプラグインです。また、オンラインショップにも最適です。

さらに詳しく知りたい方は、WooCommerce商品画像ギャラリーの作成方法をご覧ください。

方法2：WP Image Zoomを使ってWordPressに画像の拡大表示を追加する方法

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

このチュートリアルでは無料版を使用しますが、より多くのカスタマイズオプションをご希望の場合は、WP Image Zoom Proをチェックアウトすることをお勧めします。プラグインについては、WP Image Zoomのレビューでさらに詳しく説明しています。

有効化した後、WordPressの管理サイドバーからWP Image Zoom ” Zoom Settingsページにアクセスしてください。

次に、「ズーム設定」タブに切り替え、使用するレンズシェイプを選択して、ズーム効果の設定を行う必要があります。

レンズの形状は、丸、四角、ズームウィンドウから選択できます。拡大効果のために形状を使用したくない場合は、「レンズなし」(⨯)オプションを選択することもできます。

お好みのレンズを選択したら、次のステップにスクロールダウンし、選択したレンズで画像をプレビューして動作を確認する必要があります。プラグインには、変更をテストするために使用できるプレビュー画像があります。

次に、「全般」タブに切り替える必要がある。

ここから、カーソルタイプの選択、アニメーション効果の設定、マウスオーバーまたはマウスクリック時のズームの有効化、ズームレベルの定義ができます。

さらに多くのオプションをご希望の場合は、いくつかの機能は、WP Image Zoomプラグインのプロバージョンでのみ利用可能です。

それに従って選択したら、上から「レンズ」タブに進むだけだ。

ステップ1で「円形」または「正方形」レンズを選択した場合は、レンズサイズ、レンズカラー、レンズ枠線オプションなどを設定できます。

ズームウィンドウレンズを選択した場合は、「ズームウィンドウ」設定タブに切り替える必要があります。

ここから、ズームウィンドウの幅と高さ、位置、メイン画像からの距離、枠線の色などを変更できます。

次に、「変更を保存」をクリックして設定を保存します。

あとは、一般的な設定をいくつか行うだけだ。

プラグイン全般の設定

次に、プラグイン設定の一般設定タブに切り替える必要があります。

ここから、WooCommerceの商品画像、サムネイル、モバイル端末、添付ファイルページ、商品カテゴリーページなどのズームなどの機能を有効化できるようになりました。

必要なのは、これらのオプションの横にあるボックスにチェックを入れるだけだ。

また、ライトボックス効果を取り除くこともできるので、ユーザーはスムーズに画像をズームすることができる。

ただし、この機能を利用するにはプラグインのProバージョンが必要です。

画像のライトボックスを削除しない場合は、「ライトボックス内で有効化」オプションまでスクロールダウンし、その横にあるチェックボックスをオンにする必要があります。

注：あなたのサイトのライトボックス内でズームが正常に動作することを確認するために、サポートされているライトボックスを見ることができます。

設定の調整が終わったら、「変更を保存」ボタンをクリックして設定を保存することをお忘れなく。

WooCommerce商品で拡大ズームが有効化されました。

オンラインショップでズーム機能をチェックしてみてください。

しかし、WordPressの投稿日やページで画像のズームを有効化したい場合は、以下の手順を実行する必要があります。

ブロックエディターで画像の拡大表示を有効化

初期設定では、投稿日やページの画像に対して拡大ズームは有効化されていません。コンテンツに画像を追加した後、手動で行う必要があります。

まず、編集したい投稿をブロックエディターで開きます。

次の投稿では、メディアライブラリまたはコンピューターから画像をアップロードする必要があります。

そうしたら、画像をクリックするだけで、画面右隅にあるブロック設定パネルが開きます。

ここから「スタイル」タブに移動し、「ズームあり」ボタンをクリックするだけで、画像に拡大ズームが適用されます。

その後、上部にある「更新」または「公開」ボタンをクリックするだけで、設定が保存されます。

あなたのサイトでは、ズーム機能はこのように表示されます：

注：個々の画像にズーム効果を加えたい場合は、毎回この手順を繰り返す必要があります。

ズーム機能を美しく見せるためには、高品質の画像を使用することをお勧めします。高品質の画像は通常ファイルサイズが大きく、読み込みに時間がかかるため、サイトのスピードやパフォーマンスに影響します。

この問題を解決するには、WordPressにアップロードする前に画像をウェブ用に最適化する必要があります。

WordPressで画像を拡大表示する方法について、この投稿がお役に立てば幸いです。また、検索エンジン向けに画像を最適化する方法や、おすすめの画像圧縮プラグインも合わせてご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.