Amazonで買い物をされる方も多いと思います。Amazonの商品ページで商品画像にマウスカーソルを移動するとその部分が拡大表示されますね。
上の画像のような感じです。見たことあると思います。
このような画像拡大表示の機能をWordPressで実現できるプラグイン、それが「WP Image Zoom」です。
「WP Image Zoom」のインストール
- WordPress管理画面（ダッシュボード）左側のメニュー「プラグイン」→「新規追加」をクリック。
- 「WP Image Zoom」を検索。
- 「今すぐインストール」をクリック。
- インストール完了後「有効化」をクリック。
「WP Image Zoom」の設定
ダッシュボード左側のメニューの「WP Image Zoom」をクリック。
レンズの形状を選択しよう
①「Zoom Setting」タブを選択します（最初は「Zoom Setting」になっているると思います）
②「Choose the Lens Shape」でレンズの形、表示の仕方を設定します。左から「レンズなし」「円形レンズ」「四角形レンズ」「ウィンドウ表示レンズ」です。
レンズのズーム表示を確認しよう
「Check your configuration changes on the image」で選択してレンズでの表示のされ方をチェックします。上のふぁぞうは「ウィンドウ表示レンズ」を選択したときの例です。
レンズのズーム詳細設定
「General」タブ（一般設定）
①「General」タブをクリック。
②マウスカーソルのタイプを選択
③ズーム表示のアニメーション効果を設定。数字が大きいほど緩やかな表示になります。
最後に「Save changes」をクリックして設定を保存します。
「Lens」タブ（レンズ設定）
①レンズサイズ
②レンズ周囲のボーダー（枠線）の太さ
③レンズ周囲のボーダー（枠線）の色
④レンズのフェード時間
⑤レンズ周囲の画像に色合いをつけるかどうか
⑥レンズ周囲の色合い
⑦レンズ周囲の色合いの不透明度
最後に「Save changes」をクリックして設定を保存します。
ちょっと変ですが、わかりやすいように設定してみました。上の画像では
- レンズ周囲のボーダーの太さ10ピクセル
- ボーダーの色は緑
- レンズ周囲の色合いは赤
- レンズ周囲の不透明度は0.5
で設定しています。
「Zoom Window」タブ（ズームウィンドウ設定）
①ズーム表示されるウィンドウの幅
②ズーム表示されるウィンドウの高さ
③画像とズームウィンドウの距離
④ズームウィンドウのボーダーの太さ
⑤ズームウィンドウのボーダーの色
⑥ズームウィンドウの影の太さ
⑦ズームウィンドウの角丸
⑧ズームウィンドウのフェードタイム
最後に「Save changes」をクリックして設定を保存します。
ちょっと変ですが、わかりやすいように設定してみました。上の画像では
- ウィンドウの幅は360ピクセル
- ウィンドウの高さは360ピクセル
- 画像とズームウィンドウの距離は30ピクセル
- ズームウィンドウのボーダーの太さは10ピクセル
- ズームウィンドウのボーダーの色は緑
- ズームウィンドウの影の太さは10ピクセル
- ズームウィンドウの角丸は30ピクセル
で設定しています。
