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

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

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

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

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

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

「WP Image Zoom」の設定

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

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

1. 「Zoom Setting」タブを選択します（最初は「Zoom Setting」になっているると思います）
2. 「Choose the Lens Shape」でレンズの形、表示の仕方を設定します。左から「レンズなし」「円形レンズ」「四角形レンズ」「ウィンドウ表示レンズ」です。

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

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

レンズのズーム詳細設定

「General」タブ（一般設定）

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

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

「Lens」タブ（レンズ設定）

1. レンズサイズ
2. レンズ周囲のボーダー（枠線）の太さ
3. レンズ周囲のボーダー（枠線）の色
4. レンズのフェード時間
5. レンズ周囲の画像に色合いをつけるかどうか
6. レンズ周囲の色合い
7. レンズ周囲の色合いの不透明度

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

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

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

で設定しています。

「Zoom Window」タブ（ズームウィンドウ設定）

1. ズーム表示されるウィンドウの幅
2. ズーム表示されるウィンドウの高さ
3. 画像とズームウィンドウの距離
4. ズームウィンドウのボーダーの太さ
5. ズームウィンドウのボーダーの色
6. ズームウィンドウの影の太さ
7. ズームウィンドウの角丸
8. ズームウィンドウのフェードタイム

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

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

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

で設定しています。