\ WordPressテーマ1410サイトの利用例を紹介 (2021/9/17更新)/

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ピクセル

で設定しています。

WordPressのテーマはやっぱり国産テーマが安心!

WordPressのインストールは最近ではレンタルサーバー会社の「簡単インストール機能」などでだれでも簡単にできるようになりましたが、そこからのデザインがやっぱり悩みどころ。プラグインも何を使ったらよいのかわかんないし、解説サイトが英語表記というのもよくあるケースです。そして、

WordPressなんてムリだ…

なんていう残念な結論を出して、挫折してしまう方がとても多いです。
せっかく独自ドメイン取得したのに…
せっかくレンタルサーバー契約したのに…
せっかくWordPressインストールしたのに…
です。

WordPressのデザインを決めるものが「テーマ」であることは理解したと思いますが、どのテーマを選べばよいのかわからない…ダッシュボードのテーマの新規追加を試みても種類が多すぎるし、解説は英語だし、有効化してもよくわかんないし…

国産(日本語)のWordPressテーマを導入しよう

WordPressのダッシュボードからテーマを新規追加しようと探しても日本語のものはまず見つかりません。世界中のユーザーから見れば日本語なんて希少言語なので仕方ありません。日本語サイト向けのWordPressテーマはいくつもあります。それらの日本語サイト向けWordPressテーマはそれぞれのテーマ開発者のサイトなどで公開、販売されています。

日本語サイト向けWordPressテーマは有料のものも多いですが、有料であるからこそサポート体制も充実しています。多くの有料の日本語サイト向けWordPressテーマでは日本語での丁寧なサポートに対応しています。何をインストールすればよいかよくわからない「プラグイン」も不要だったり最小限の利用で済んだりします。以下に挙げる日本語サイト向けWordPressテーマは当サイトがおススメするWordPressテーマです。

日本語サイト向けWordPressテーマをもっと見る

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

この記事を書いた人

初めてホームページを作成したのは1996年。
2000年よりフリーランスで主に中小企業、学校、各種公的団体、個人事業主のホームページ制作を行っています。
近年はほとんどがWordPress案件となっています。
ビール、料理、カメラ、アウトドア好き!

目次
閉じる