初めてポートフォリオサイトを構築したとき、写真を完璧にするのに何時間も費やしたことを今でも覚えています。友人に、私の作品の詳細をクリックして見ることができないと指摘され、ユーザーエクスペリエンスを損なう大きなステップを見落としていたことに気づきました。
これは、サイトのプロフェッショナルな印象に大きな違いをもたらす小さなディテールです。訪問者が製品写真やポートフォリオ作品を拡大できないと、フラストレーションを感じる体験になります。
いくつかのウェブサイトでこの機能を設定した今、画像をクリックで拡大できるようにすることが、訪問者のエンゲージメントを向上させる最も速い方法の1つであることがわかりました。これは、どんなサイトにも洗練された高品質なタッチを加える簡単な修正です。
このガイドでは、画像をクリッカブルにするための3つの簡単な方法を説明します。コーディング不要で、簡単なデフォルト機能からより高度なギャラリープラグインまで、すべてをカバーします。
WordPress でクリック時に画像を拡大する理由
訪問者が WordPress ウェブサイトで画像を拡大クリックできるようにすると、重要な詳細を間近で見ることができます。
これは、特にポートフォリオ、不動産リスティング、写真ギャラリーに、洗練されたプロフェッショナルな雰囲気をもたらす簡単なアップグレードです。
さらに、オンラインストアでは、顧客が購入を決定する前に商品を詳しく見たい場合に便利です。
WordPressには、デフォルトで基本的な「クリック時に拡大」機能が組み込まれています。これは、背景のぼかしや視覚効果なしに、ページ上で直接画像を開きます。
これはシンプルなブログや内部ページには問題なく機能しますが、少し地味で、あまり多くの制御ができません。
よりモダンで洗練された外観のものを求めている場合は、画像ライトボックスプラグインがより良い選択肢となります。
画像を単に拡大するのではなく、背景を暗くして視聴者の焦点を維持する洗練されたオーバーレイで開きます。画像の表示方法や機能についても、より詳細な制御が可能になります。
これらのさまざまな方法を示す前に、もう1つ覚えておくべきことがあります。それは画質です。誰かが写真を拡大するためにクリックしたとき、彼らは鮮明で高解像度のバージョンを期待します。しかし、大きな画像ファイルはサイトを遅くする可能性があります。
画像最適化の出番です。画像の表示品質を低下させることなく圧縮することで、ファイルサイズを小さく保ち、サイトを高速化できます。
これは、パフォーマンスを損なうことなく、拡大時に見栄えの良い大きな寸法の画像（幅1500pxなど）を使用できることを意味します。
そのヘルプについては、ウェブ用に画像を最適化する方法に関するガイドをご覧ください。
この記事では、WordPressで画像をクリックしたときに拡大表示する3つの異なる方法、およびいくつかのライトボックスオプションを紹介します。
使用したい方法にジャンプするには、以下のクイックリンクを使用できます:
- 方法1：デフォルトのWordPress機能を使用する（シンプル）
- 方法2：ライトボックスプラグインを使用する（より多くのカスタマイズが可能）
- 方法3：ギャラリープラグインを使用する（複数の画像に最適）
- WordPressで画像を拡大することに関するよくある質問
- ボーナスリソース：WordPress画像の管理と改善
方法1：デフォルトのWordPress機能を使用する（シンプル）
画像を拡大する方法を色々試した結果、WordPress の組み込み機能がシンプルなニーズには最適だとわかりました。
ドキュメント作成や技術記事の執筆にこの方法を使用しています。特に、読者にスクリーンショットの小さな詳細を見せたり、画像の特定の部分をより詳しく調べたりする必要がある場合に便利です。
主な欠点は、実際のライトボックスではないことです。画像を拡大するだけで、見た目をカスタマイズしたり、クールなエフェクトを追加したりすることはできません。
ステップ 1: WordPressエディターに画像を挿入する
まず、クリック可能な画像を追加したい投稿を作成または開く必要があります。
次に、ブロックエディターで、(+)アイコンをクリックして新しいブロックを追加し、ブロックオプションから「画像」を選択します。すると、「アップロード」、「メディアライブラリ」、「URLから挿入」の3つの異なる方法で画像を挿入するためのボタンが表示されます。
WPBeginnerでは、常に「メディアライブラリ」オプションを使用しています。これにより、画像に追加するタイトルと代替テキストが、他の記事で再利用する場合に利用可能になります。
「URLから挿入」は避けることをお勧めします。これは、他のウェブサイトの画像にホットリンクするため、元の画像が削除された場合にサイトで画像が表示されなくなる可能性があります。
ステップ 2: 「クリックで拡大」オプションを設定する
画像を投稿またはページに追加した後、画像をクリックすると画像設定が表示されます。
画像を選択した状態で、ブロックツールバーの「リンクを挿入」アイコンをクリックします。表示される設定で、「クリック時に拡大」というラベルのオプションをオンにするだけです。
ステップ3：画像設定の構成
クリックで拡大する機能を有効にしたので、投稿またはページ内で最適な表示品質を確保するために、元の画像のカスタム設定を行いたい場合があります。
画像を選択し、画面右側のブロック設定パネルを確認します。
画像の寸法を調整することで、ページ上での画像の表示方法を制御できます。ただし、これは表示サイズにすぎません。
訪問者が画像をクリックすると、メディアライブラリにアップロードした元の高解像度画像が表示されます。そのため、少なくとも1500ピクセル幅の高画質画像をアップロードするようにしてください。ページを高速に読み込むために、前述したように、まず最適化することを忘れないでください！😉
ステップ4：画像をプレビューしてコンテンツを公開する
「クリックで拡大」画像オプションを有効にして投稿またはページを公開する前に、プレビューして正しく機能していることを確認してください。
これを行うには、エディタの右上隅にある「表示」ボタンをクリックし、「新しいタブでプレビュー」を選択します。
特に最近はスマートフォンを使用する人が多いため、「モバイル」を含むすべての表示オプションでテストすることをお勧めします。
「クリックで拡大」画像エフェクトを適用すると、下の例のように同じページで拡大されるはずです。どの程度拡大されるかは、アップロードした元の画像のサイズによって異なります。
画像をクリックするだけで、通常のサイズに戻ります。
この組み込み機能は迅速かつ簡単ですが、多くのプロフェッショナルサイトが使用しているスタイリッシュなオーバーレイが欠けています。背景を暗くして画像を際立たせる、洗練された「ライトボックス」効果を探しているなら、次の方法が最適です。
方法2：ライトボックスプラグインを使用する（より多くのカスタマイズが可能）
基本的なWordPress機能とは異なり、ライトボックスプラグインはよりプロフェッショナルなエクスペリエンスを作成します。ユーザーが画像をクリックすると、ページの残りの部分を暗くするスタイリッシュなオーバーレイで画像が開かれ、画像が際立ちます。
無料のSimple Lightboxプラグインをお勧めします。これは、画像を際立たせるスムーズなアニメーション、カスタマイズ可能なテーマ、スライドショー機能を追加できるためです。軽量で、有効化するとすべての画像で自動的に機能します。
ステップ1：Simple Lightboxプラグインのインストールと有効化
開始するには、Simple Lightboxプラグインをインストールして有効化する必要があります。
このプロセスにヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドをお読みください。
ステップ 2: シンプルライトボックスの設定を構成する
プラグインを有効化した後、外観 » ライトボックスに移動して設定を確認し、すべてが意図したとおりに設定されていることを確認することをお勧めします。
ここでは、ライトボックス機能をどこで有効にしたいかを調整できるライトボックス設定が見つかります。これは、ホームページ、個別の投稿、ページなどで有効にできます。
ほとんどのウェブサイトでうまく機能するため、通常はデフォルト設定を使用しています。
次に、「UI」設定までスクロールします。これらはライトボックスの外観と操作感を制御します。
デフォルトでは、プラグインはライトテーマを使用しますが、必要に応じてダークモードに切り替えることができます。また、画像が開かれたときに背景ページがどれだけ暗くなるかを制御する「オーバーレイ不透明度」を調整したり、画像が開く方法を変更するアニメーションを有効にしたりすることもできます。
これらの設定は自由に試してみてください。完了したら、「変更を保存」をクリックするのを忘れないでください。
ステップ3：画像を追加してライトボックスを有効にする
さて、ライトボックス機能を試してみましょう。投稿を作成または開き、画像を追加するだけです。
画像がエディタに入ったら、画像の下に表示される「キャプションを追加」フィールドに直接入力することでキャプションを追加できます。
キャプションを追加しない場合、プラグインは代わりにメディアライブラリの画像タイトルを自動的に使用します。ただし、キャプションフィールドを使用すると、より直接的な制御が可能になります。
次に、画像が選択されたまま、ツールバーの「リンク」アイコンをクリックし、「画像ファイルへのリンク」オプションを選択する必要があります。これは、Simple Lightboxプラグインを機能させるための重要なステップです。
これを行うと、プラグインはリンクを自動的に検出し、訪問者が画像をクリックしたときにライトボックス効果を適用します。
💡 注：Simple Lightboxを画像ギャラリー全体に使用することもできます。ブロックエディターを使用して画像ギャラリーを作成し、この方法で説明されている手順に従って、各画像にライトボックス機能を追加してください。
ステップ4：ライトボックスをテストする
さて、投稿をプレビューしてライトボックス機能をテストしましょう。右上隅にある「表示」オプションをクリックし、「新しいタブでプレビュー」を選択するだけです。
新しいタブが開いたら、画像をクリックしてください。背景が暗くなったライトボックスオーバーレイでスムーズに開くはずです。
デザイン設定によっては、ライトボックスがライトテーマまたはダークテーマで表示されます。ライトテーマは次のようになります。
ライトテーマは、写真を白いフレームで囲み、暗くなった背景との良いコントラストを生み出します。
さて、これがダークテーマの外観です。
ライトボックスの左下隅に画像キャプションも表示されるはずです。
また、他の画面サイズでライトボックスをプレビューして、すべてのデバイスで見栄えが良いことを確認することをお勧めします。
これは、表示オプションに戻り、「デスクトップ」、「タブレット」、または「モバイル」オプションを選択することで実行できます。その後、「新しいタブでプレビュー」をクリックします。
方法3：ギャラリープラグインを使用する（複数の画像に最適）
複数の画像をスポットライトで表示したいと思ったことがあるなら、ギャラリープラグインが間違いなく最良の解決策です。サイトを遅くすることなく、画像の拡大機能で一連の画像を整理し、表示するのに役立ちます。
これらのプラグインは、コンテンツをより魅力的で視覚的に魅力的なものにすることでユーザーインタラクションを改善し、訪問者に画像をシームレスにナビゲートする体験を提供できます。
Envira Gallery をお勧めします。なぜなら、あらゆるデバイスで見栄えの良い、カスタマイズ可能なギャラリーを作成できるからです。初心者にも非常に使いやすいです。
さらに、遅延読み込みのようなパフォーマンス機能も含まれており、ギャラリーがサイトの速度を低下させないようにします。また、そのAIツールはWordPress内でカスタム画像を直接作成するのに役立ちます。
最も重要なのは、このプラグインが多くのカスタマイズオプションを備えたライトボックス設定を提供していることです。これにより、クリックして画像を拡大する機能のすべての利点に加えて、レイアウト、ギャラリートランジションなどのクールな設定を得ることができます。
プラグインができることについてもっと知りたいですか？過去に広範にテストしており、詳細についてはEnvira Galleryの完全なレビューを確認できます。
📝 注記: Envira Gallery の無料バージョンもありますが、SuperSize ライトボックス、Envira AI、ソーシャル共有ツールなどの高度な機能については Pro バージョンをお勧めします。無料バージョンには、開始に必要なすべての基本的なライトボックス機能が含まれています！
それでは、Envira Gallery を使用してライトボックス機能を追加する手順を見ていきましょう。
ステップ1：Envira Galleryプラグインのインストールと有効化
まず、サイトにプラグインをインストールしましょう。このチュートリアルでは、無料版を使用しますが、Envira GalleryのウェブサイトからProライセンスを購入することもできます。
次に、WordPressプラグインのインストール方法のガイドに従ってインストールし、有効化してください。プラグインを有効化すると、Enviraのセットアップウィザードがすぐに起動します。
ここから、「開始する」ボタンをクリックしてプロセスを開始します。
このウィザードには5つのステップがあります。
セットアップ中に、ビジネスやウェブサイトを表すカテゴリ（写真家やビジネスオーナーなど）を選択し、追加したいギャラリー機能を選択できます。
推奨されるデフォルト設定を続行することをお勧めします。通常、必要なものがすべて揃っています。ただし、Proプランをお持ちの場合は、より高度な機能を有効にすることができます。
「ライトボックス」オプションはすでにチェックされているはずなので、この機能は自動的に有効になることに注意してください。
セットアップウィザードが完了したら、購入したプロライセンスを有効化する必要があります。これを行うには、Envira Gallery » 設定に移動し、ライセンスキーをフィールドに貼り付けます。次に、「キーの検証」をクリックします。
ステップ2：新しいギャラリーを作成する
最初のギャラリーを作成するには、ダッシュボードでEnvira Gallery » Add Newに移動します。
まず、ページの上部にタイトルを追加します。後で管理しやすくするために、明確で説明的な名前を付けることをお勧めします。
次に、画像の追加方法として3つのオプションが表示されます。「ネイティブEnviraギャラリー」、「他のソースからのギャラリー」、および「Envira AIで作成」です。
まずはNative Envira Galleryから始めることをお勧めします。これが、独自の画像を直接アップロードする最も簡単な方法です。
💡 元の画像をすぐに必要としていますか？ Envira AIを使用して独自のカスタム画像を作成することもできます。この機能により、オンデマンドでユニークな画像を簡単に生成できます。画像の説明をすばやく作成し、結果から選択して、ワンクリックでギャラリーに追加するだけです。
含めたい画像を選択してください。最大アップロードファイルサイズを256MB未満に保ちながら、好きなだけ追加できます。
ステップ 3: ギャラリーとライトボックスのオプションを構成する
ギャラリー画像の左側にあるメニューに、Enviraのギャラリー設定があります。
一般設定、ライトボックス機能、モバイル設定などのタブがあります。それらを一つずつ見ていきましょう。
「設定」セクションの上部でギャラリーレイアウトを選択できます。グリッドレイアウトはほとんどのギャラリーでうまく機能しますが、他のオプションも自由に試してみてください。
下にスクロールすると、さらにギャラリー設定オプションを見つけることができます。
例えば、遅延読み込みを有効にしたり、自動レイアウトを設定したり、ギャラリーの説明を追加したりできます。
例えば、ギャラリーが追加の労力をかけずにきれいに整理された見た目になるように、自動レイアウトを設定したい場合があります。
💡 プロのヒント: 遅延読み込みオプションを有効にすることをお勧めします。この機能は、訪問者がページを下にスクロールしたときにのみ画像を読み込むことで、ギャラリーの読み込みを高速化します。また、サイトの速度の最適化にも役立ちます。
次に、「ライトボックス」タブに切り替えます。この機能はデフォルトで有効になっているはずですが、有効になっていない場合は、「ライトボックスを有効にする？」の横にあるチェックボックスをオンにしてください。
次に、「ギャラリーライトボックステーマ」を選択します。これにより、ライトボックスの全体的な外観が決まります。
オプションは、Enviraのプランとギャラリーテーマアドオンの有無によって異なります。ただし、ダーク、ライト、またはレガシーテーマから選択できるはずです。
「ライトボックス」タブをさらに下にスクロールすると、拡大された画像が表示される方法、トランジション効果の選択、画像タイトルの表示の有無を決定できます。
次に、ページの下半分でライトボックスの設定をさらに見つけることができます。
たとえば、ナビゲーション矢印、画像の無限ループ、または拡大モードを有効にすることができます。ギャラリーを開いたり閉じたりするとき、またはクリックして進むときのクールなエフェクトを追加することもできます。
例えば、「ライトボックスのトランジション効果」では、フェード、スライド、円形、チューブ、回転など、楽しいオプションを選択できます。
次に、「モバイル」タブに移動して、一般的な設定とライトボックス設定の両方を構成することをお勧めします。
訪問者の多くはおそらく携帯電話でギャラリーを閲覧するため、小さな画面でも見栄えが良いことを確認することが重要です。
モバイルデバイスのライトボックス機能を有効にするだけでなく、ライトボックスの寸法、行の高さ、タイトルまたはキャプションの表示などのモバイル固有の設定をカスタマイズできます。
下にスクロールすると、スワイプアップで閉じる、ギャラリーナビゲーション矢印、サムネイルなどのオプションが表示されます。
最後に、「スタンドアロン」タブと「その他」タブには、役立つ可能性のある追加設定がいくつかあります。
「スタンドアロン」タブを使用すると、ギャラリーに独自のURLを付与できます。特定のポートフォリオやフォトアルバムへの直接リンクを共有したい場合に便利な機能です。
「その他」タブには、ギャラリーのインポートとエクスポート用のツールが含まれていますが、現時点では必要ないでしょう。
これらの設定の詳細については、WordPressで画像ギャラリーを作成する方法に関する詳細ガイドをご覧ください。
ステップ 4: ギャラリーのプレビューと公開
ギャラリーをプレビューするには、ギャラリー設定ページの右側にある「プレビュー」ボタンをクリックします。
プレビューページに移動したら、異なる画像をクリックしてライトボックス効果をテストしてください。
ここで、画像の名前とギャラリーの残りの部分を確認できます。
ギャラリーをテストすると、画像はスムーズに開くはずです。トランジション効果を選択した場合は、ここで表示されるはずです。
たとえば、スライドトランジション効果を設定しました。それがどのように見えるかは次のとおりです。
画像間を移動するには、画面のどちらかの側のナビゲーション矢印をクリックするか、キーボードの矢印キーを使用してください。
この時点で、ナビゲーション矢印が機能しているか、有効にした場合に画像タイトルが正しく表示されているかを確認しておくとよいでしょう。
すべてがうまく機能することに満足したら、ギャラリー設定の右側にある「公開」ボタンをクリックしてギャラリーを公開できます。
ギャラリーを公開した後、ウェブサイトに追加に進むことができます。
ステップ 5: ウェブサイトにギャラリーを追加する
ギャラリーが正常に機能するようになったので、投稿に追加しましょう。
WordPressエディターに入ったら、(+)アイコンをクリックして新しいブロックを追加し、「Envira Gallery」を検索します。次に、そのブロックを投稿にドラッグします。
次に、「ギャラリーを検索」ドロップダウンをクリックすると、作成したばかりのギャラリーが選択されます。これにより、設定したすべての設定が適用された状態で、ギャラリーが自動的に投稿に挿入されます。
または、ショートコードを使用して、ギャラリーをページ、ウィジェット、またはカスタム投稿タイプに追加することもできます。
このショートコードは、ギャラリー設定の右側のサイドバー、「公開」ボタンのすぐ下にあります。
詳細については、WordPress でショートコードを追加する方法に関するガイドをご覧ください。
「公開」ボタンをクリックする前に、ギャラリーが希望どおりに表示されることを確認するために、投稿を最終プレビューしてください。
画像は、プロフェッショナルなグリッドレイアウトで表示され、クリックするとスムーズなライトボックス効果が表示されるはずです。
WordPressで画像を拡大することに関するよくある質問
WordPressで画像を拡大することに関するよくある質問をいくつかご紹介します。
WordPress で画像を拡大するにはどうすればよいですか？
WordPressのデフォルトの「クリックで拡大」機能は、基本的な機能に使用できます。より高度な制御が必要な場合は、Simple LightboxやEnvira Galleryなどのプラグインを使用できます。
WordPressで画像を自動的にリサイズするにはどうすればよいですか？
WordPressは、画像をアップロードする際に、いくつかの小さなバージョンを自動的に作成します。画像サイズをより細かく制御したり、速度を最適化したりするには、EWWW Image Optimizerのような画像最適化プラグインの使用をお勧めします。
Envira Gallery のようなプラグインは、ギャラリー内の画像の表示サイズを正確に制御することもできます。
WordPressで画像のサイズを強制する方法
テーマ内でカスタム画像サイズを設定できます。詳細なガイドについては、WordPressで追加の画像サイズを作成する方法に関するチュートリアルをご覧ください。これは、ギャラリーやサイト全体で一貫したレイアウトを確保するのに役立ちます。
プラグインを使用したい場合は、Envira Galleryのようなオプションを検討してください。これにより、画像の正確な寸法を効率的に指定でき、ギャラリーの外観を制御できます。これにより、サイト全体で洗練された外観を維持するのに役立ちます。
ボーナスリソース：WordPress画像の管理と改善
この記事が、WordPressで「クリックで画像拡大」機能を追加するのに役立ったことを願っています。WordPressの画像を管理および改善することに興味がある場合は、以下のボーナスガイドも参照してください。
- 品質を損なわずにWebパフォーマンスのために画像を最適化する方法
- WordPress の投稿やページに複数のギャラリーを追加する方法
- WordPress画像圧縮プラグイン比較
- WordPressにヒーローイメージを追加する方法（すべてのテーマに対応）
- WordPressで追加の画像サイズを作成する方法
- WordPressで一般的な画像の問題を修正する方法（究極ガイド）
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
質問や提案はありますか？コメントを残して、議論を開始してください。