Amazonのような画像拡大表示「WP Image Zoom」

Amazonのような画像拡大表示「WP Image Zoom」

Amazonで買い物をされる方も多いと思います。Amazonの商品ページで商品画像にマウスカーソルを移動するとその部分が拡大表示されますね。

Amazon商品ページ

上の画像のような感じです。見たことあると思います。

このような画像拡大表示の機能をWordPressで実現できるプラグイン、それが「WP Image Zoom」です。

目次

「WP Image Zoom」のインストール

「WP Image Zoom」のインストール
  1. WordPress管理画面(ダッシュボード)左側のメニュー「プラグイン」→「新規追加」をクリック。
  2. 「WP Image Zoom」を検索。
  3. 「今すぐインストール」をクリック。
  4. インストール完了後「有効化」をクリック。

「WP Image Zoom」の設定

ダッシュボード左側のメニューの「WP Image Zoom」をクリック。

レンズの形状を選択しよう

「WP Image Zoom」の設定

①「Zoom Setting」タブを選択します(最初は「Zoom Setting」になっているると思います)

②「Choose the Lens Shape」でレンズの形、表示の仕方を設定します。左から「レンズなし」「円形レンズ」「四角形レンズ」「ウィンドウ表示レンズ」です。

レンズのズーム表示を確認しよう

「WP Image Zoom」の表示チェック

「Check your configuration changes on the image」で選択してレンズでの表示のされ方をチェックします。上のふぁぞうは「ウィンドウ表示レンズ」を選択したときの例です。

レンズのズーム詳細設定

「General」タブ(一般設定)

ズームの詳細設定

①「General」タブをクリック。
②マウスカーソルのタイプを選択
③ズーム表示のアニメーション効果を設定。数字が大きいほど緩やかな表示になります。

最後に「Save changes」をクリックして設定を保存します。

「Lens」タブ(レンズ設定)

「Lens」タブ(レンズ設定)

①レンズサイズ
②レンズ周囲のボーダー(枠線)の太さ
③レンズ周囲のボーダー(枠線)の色
④レンズのフェード時間
⑤レンズ周囲の画像に色合いをつけるかどうか
⑥レンズ周囲の色合い
⑦レンズ周囲の色合いの不透明度

最後に「Save changes」をクリックして設定を保存します。

WP Image Zoom設定例

ちょっと変ですが、わかりやすいように設定してみました。上の画像では

  1. レンズ周囲のボーダーの太さ10ピクセル
  2. ボーダーの色は緑
  3. レンズ周囲の色合いは赤
  4. レンズ周囲の不透明度は0.5

で設定しています。

「Zoom Window」タブ(ズームウィンドウ設定)

①ズーム表示されるウィンドウの幅
②ズーム表示されるウィンドウの高さ
③画像とズームウィンドウの距離
④ズームウィンドウのボーダーの太さ
⑤ズームウィンドウのボーダーの色
⑥ズームウィンドウの影の太さ
⑦ズームウィンドウの角丸
⑧ズームウィンドウのフェードタイム

最後に「Save changes」をクリックして設定を保存します。

Zoom Window設定例

ちょっと変ですが、わかりやすいように設定してみました。上の画像では

  1. ウィンドウの幅は360ピクセル
  2. ウィンドウの高さは360ピクセル
  3. 画像とズームウィンドウの距離は30ピクセル
  4. ズームウィンドウのボーダーの太さは10ピクセル
  5. ズームウィンドウのボーダーの色は緑
  6. ズームウィンドウの影の太さは10ピクセル
  7. ズームウィンドウの角丸は30ピクセル

で設定しています。

よかったらシェアしてね!

この記事を書いた人

目次
閉じる