Amazonのような画像拡大表示「WP Image Zoom」
カテゴリー：WordPressプラグインガイド
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ピクセル
で設定しています。
こちらもおススメ！！
リビジョンがどんどん保存されるのを制御しよう「WP Revisions Control」
リビジョンってなあに？WordPressには「リビジョン（Revision）」という機能があります。「Revision」を翻訳すると「改訂、改版、訂正、改正、加筆…」というような意味です。WordP... もっと見る
アイキャッチ画像を自動設定してくれる「Easy Add Thumbnail」
結構な確率で設定し忘れるアイキャッチ画像投稿や固定ページの記事内容を分かりやすく表すためのアイキャッチ画像ですが、記事を投稿したときに結構な確率で設定し忘れたりします。記事を公開後、内容を確認するた... もっと見る
画像の拡大表示をカッコよく「Fancybox for WordPress」
「FancyboxforWordPress」はWordpressに貼り付けた画像、写真を拡大させるときにカッコよく表示させるためのプラグインです。どんな風に画像を拡大するのか？例えば以下のよう... もっと見る
XMLサイトマップ作成＆通知「Google XML Sitemaps」
SEO（検索エンジン最適化）の第一歩Webサイトを運営していてアクセスを獲得するには検索エンジンでの上位表示は必須です。SEO（検索エンジン最適化）の方法はいくつもありますが何といってもまずは検索エ... もっと見る
日本語のWebサイト作成に必須「WP Multibyte Patch」
WPMultibytePatchはWordPressで日本語のWebサイトを作成する際には必須のプラグインです。WordPressをインストールした際に最初からインストールされている場合も多いです... もっと見る
リビジョンがどんどん保存されるのを制御しよう「Revisions Control」
リビジョンを制御してくれるプラグインもいくつかあるリビジョンを制御するプラグインとして「WPRevisionsControl」を紹介しましたが、同じような動作をするプラグインに「Revision... もっと見る
画像のサイズを一括で再生成してくれる「Regenerate Thumbnails」
過去の投稿で利用した画像サイズを一括で変換WordPressで固定ページや投稿に貼り付ける際に、画像をアップロードしますが、アップロード時に自動的にいくつかのサイズの画像を作成してくれます。作成され... もっと見る
ブロックエディターで部分的に文字色を変更したい時「Advanced Rich Text Tools for Gutenberg」
WordPress5から登場した新しいエディターのブロックエディターですが、それ以前のエディターのクラシックエディターを使っていた人だと「どうすりゃいいんだよ！」って思うのが、部分的に文字色を変更した... もっと見る
SNSのシェアボタン、フォローボタンを簡単に設置「AddToAny Share Buttons」
多くの種類のSNSの共有ボタンに対応したプラグイン現在実に多くのSNSがあります。これらのSNSと共有するにはそれぞれのSNSの提供する共有ボタンのコードなどを記述する必要があります。WordPre... もっと見る
アイキャッチ画像を自動設定してくれる「XO Featured Image Tools」
設定画面が日本語の自動アイキャッチ設定プラグイン投稿や固定ページで記事の内容を分かりやすく表すためのアイキャッチ画像を自動的に設定してくれるプラグインとして「EasyAddThumbnail」を... もっと見る
こんな記事が良く読まれています
Amazonプライムの自動更新設定を解除いたしましたというメール
ポータルサイトを作成するためのテーマ「EVERY」
スマホの普及により多くの方が常にインターネットにアクセスし様々な情報やコンテンツにアクセスするようになってきました。この流れは今後もますます加速すると思われますが、これらのユーザーに満足してもらえる情... もっと見る
WordPressを簡単にインストールできるレンタルサーバー【１】
WordPressでWebサイトを制作する方が増えてきましたね。以前はWordPressをインストるする場合、サーバーにデータベースを作成し、インストールに必要な情報を入力したうえでWordPress... もっと見る
メディアと文章ブロック（WordPress5.5）
画像ブロックで画像の配置を設定できますが、「メディアと文章」ブロックではより豊富なレイアウトが可能になります。メディアと文章ブロックを追加上のスクリーンショットのように左上の「ブロックの追加」アイ... もっと見る
見出しブロック（WordPress5.5）
「見出し」はページの文章をわかりやすくするために段落などの前に配置します。書かれている文章を的確に表す「見出し」をつけることはサイトを閲覧しているユーザーのためにもSEOの観点からもとても重要です。「... もっと見る
引用ブロック（WordPress5.5）
ホームページやブログを運営していて他のサイトや文献から引用することもあるでしょう。「コピペはいかん！」とは言っても、ホームページを見ている人に分かりやすくするために引用文を載せたほうがいいこともありま... もっと見る
アイキャッチ画像を自動設定してくれる「XO Featured Image Tools」
設定画面が日本語の自動アイキャッチ設定プラグイン投稿や固定ページで記事の内容を分かりやすく表すためのアイキャッチ画像を自動的に設定してくれるプラグインとして「EasyAddThumbnail」を... もっと見る
画像の拡大表示をカッコよく「Fancybox for WordPress」
「FancyboxforWordPress」はWordpressに貼り付けた画像、写真を拡大させるときにカッコよく表示させるためのプラグインです。どんな風に画像を拡大するのか？例えば以下のよう... もっと見る
このブロックには、想定されていないか無効なコンテンツが含まれています。
WordPressのブロックエディターでは時々「このブロックには、想定されていないか無効なコンテンツが含まれています。」という表示が出ることがあります。これは初めて見るとびっくりしてしまいますが、落... もっと見る
wp_list_categories( パラメータ )
カテゴリーのリストをリンク付で表示させます。リンクをクリックするとそのカテゴリーに属する投稿を表示させることが出来ます。サイドバーで使うことが多いです。その他トップページや固定ページのテンプレートでも... もっと見る
