Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

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

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

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

How to add magnifying zoom for images in WordPress

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

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

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

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

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

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

動画チュートリアル

Subscribe to WPBeginner

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

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

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

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

注: Envira Galleryには無料版があります。しかし、ズームアドオンにアクセスするには、プレミアムプラグインの’Plus’プランにアップグレードする必要があります。

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

Add the Envira Gallery license key

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

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

Install the Zoom Addon for Envira Gallery

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

Activate the Zoom Addon

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

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

Add a new gallery

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

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

Edit image gallery in Envira

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

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

画像のズーム設定

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

Enable Zoom in Envira

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

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

Configure zoom settings

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

Publish your image gallery

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

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

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

Add Envira Gallery block

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

Publish image gallery in WordPress page or post

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

Envira Gallery magnifying zoom example

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ページにアクセスしてください。

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

Choose a lens shape

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

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

Check the preview of the lens in step two

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

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

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

Configure General tab settings in step 3

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

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

Lens Settings

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

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

Zoom window settings

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

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

Clcik the Save Changes for the last step

プラグイン全般の設定

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

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

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

Go to the General Settings tab and check the boxes beside the options you want to activate

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

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

Remove the lightbox option by checking the box

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

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

Check enable inside lightbox option

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

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

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

Zoom feature enabled on the WooCommerce store

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

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

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

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

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

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

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

Click on the Zoom button

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

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

Zoom feature preview

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

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

この問題を解決するには、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.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

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

Reader Interactions

14件のコメント返信を残す

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Sofie

    Thanks for this article. Can you help me understand how I can use this for a page/blog when I use the divi builder? Where can I then add something so this function works?

    • WPBeginner Support

      You would want to reach out to the plugin’s support for the current method to use the plugin with a page builder.

      管理者

  3. Kenny

    Any chance that there is a zoom plugin that will work with LayerSlider images? I want the background of my LayerSlider slide to zoom in with a magnifying glass so that people can see the image larger on screen.

    • WPBeginner Support

      We would first recommend reaching out to LayerSlider’s support to see if they have a recommended plugin for adding zoom

      管理者

  4. michel hissi

    can you please tell me about image size. if image size of website is low then can we use this plugin.

    • WPBeginner Support

      Yes, you can still use this plugin if you are optimizing your images :)

      管理者

  5. santhosh muralidhar

    please show the steps by using the new Wordpress editor. I think in the new editor there is no option to add a zoom magnify feature for the image. I searched and tried a lot but could not find that option.

    • WPBeginner Support

      We will certainly look to update our articles as we are able, for this, the option to add the CSS class that the plugin needs for an image would be in the block’s settings.

      管理者

  6. Tony

    Please could you tell me how to add image zoom to product images in woocommerce? the article instruct how to add zoom to post and pages only.

    • WPBeginner Support

      The plugin should still work for WooCommerce, if it is not applying to WooCommerce then you would need to reach out to the plugin’s support for them to take a look.

      管理者

  7. Eliezer Braun

    I keep getting this message when I press on the magnifying glass after I have selected the image for zoom.

    First you have to select the image to which you want to add the zoom feature

  8. Eileen Bednarz

    I’d love to get this to work on my site, but I have a Pinterest plug-in that I can’t deactivate. I suspect that plug-in interferes with this plug-in. Any suggestions on removing to odious Pinterest plug-in are welcome.

    • Eileen Bednarz

      P.S. I’m not a programmer and don’t dare go into the FTP or whatever it’s called.

返信を残す

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