要約：WordPressにライトボックスを追加する方法
ライトボックスを追加する実際の方法は3つあり、最適な方法は、プラグインなし、ビジュアルビルダー、高度なギャラリーコントロールのいずれを望むかによって異なります。
- 組み込み方法：コアの画像ブロックまたはギャラリーブロックの「クリックで拡大」トグルをオンにすると、プラグインなしでネイティブライトボックスが有効になります。
- SeedProd方法：ページをビジュアルで構築しながら、画像ブロックのリンクタイプを「メディア – ライトボックス」に設定します。
- Envira Gallery方法：ギャラリーを作成し、「ライトボックスを有効にする」にチェックを入れてから、ギャラリーブロックを任意のページにドロップします。
- ニーズに合わせて選択：簡単なギャラリーには組み込み機能、ページ全体のデザインにはSeedProd、キャプションやエフェクトの制御にはEnviraを使用します。
- 問題が発生した場合：各画像をメディアファイル（添付ファイルページではない）にリンクし、モバイルでテストしてください。
ページに画像をいくつか配置しても、クリックしても何も起こらないか、訪問者が醜い添付ファイルページに飛ばされてしまいます。実際には、画像がクリーンなポップアップで開き、背後のページが暗くなるライトボックスが必要です。
私は長年インテリアデザインブログを運営していたので、ポートフォリオがいかに画像表示にかかっているかを知っています。このガイドでは、WordPressにライトボックスを作成する3つの方法を紹介します。まず、ほとんどのガイドで省略されている無料の組み込みオプションから始めます。
ライトボックスとは何か（そしていつ使うべきか）？
WordPressのライトボックスは、訪問者がクリックしたときに画像、動画、またはコンテンツを拡大するポップアップオーバーレイであり、コンテンツに焦点を当てるために他のページを暗くします。
訪問者にページを離れることなく1つのコンテンツに集中させたい場合は、いつでもライトボックスを使用してください。これにより、ユーザーのエンゲージメントを維持し、余分なページ読み込みを節約できます。
WordPressライトボックスの一般的な用途は次のとおりです：
- 写真やクリエイティブなポートフォリオの紹介
- より詳細な製品画像を表示する
- スクリーンショット、デザインモックアップ、または作業例を強調する
- YouTubeまたはVimeoの動画を気を散らすことなく再生する
ライトボックスをサインアップフォームや重要な通知に使用することもできます。背景が暗くなるため、訪問者はメッセージに気づき、行動を起こす可能性が高くなります。
どのライトボックス方法を使用すべきか？
単一のギャラリーにライトボックスが必要なだけであれば、無料の組み込みオプションで十分な場合が多いです。ページやテーマをビジュアルで構築している場合はSeedProdを、キャプションやトランジションエフェクトなどの高度なギャラリーコントロールが必要な場合はEnviraを選択してください。
| 方法 | 最適な対象 | プラグインが必要ですか？ |
|---|---|---|
| WordPressの組み込みライトボックス | 単一の画像またはギャラリーにすばやくライトボックスを追加 | いいえ |
| SeedProd | ページまたはテーマ全体をビジュアルで構築する | はい（SeedProd） |
| Envira Gallery | 高度なギャラリーコントロールとカスタマイズ | はい（Envira） |
方法1：WordPressの組み込みライトボックスを使用する（プラグイン不要）
ライトボックスを追加する最も簡単な方法は、WordPressに組み込まれているものです。バージョン6.4以降、画像ブロックには組み込みのクリックで拡大オプションがあり、プラグインなしでネイティブライトボックスで画像を開くことができます。
WordPress 6.4以降とブロックエディターが必要です。クラシックエディターにはこのオプションはありません。
ここが人々を混乱させる部分です。サイドバーのトグルではなく、リンクオプションなのです。画像ブロックを追加し、画像を選択してから、ブロックツールバーのリンク（チェーン）アイコンをクリックします。
開いたポップオーバーで、クリックで拡大をオンにします。
ページを保存すると、その画像は拡大されたライトボックスで開くようになります。
正直なところ、これは単一の画像には有効ですが、ギャラリーブロックには有効ではありません。WordPressは最初に画像ブロックにオプションを追加しましたが、多くのバージョンではギャラリーにはまだありません。
したがって、ギャラリー全体にライトボックスが必要な場合は、組み込みオプションと格闘しないでください。以下のいずれかのプラグイン方法を使用してください。これらはギャラリーを適切に処理します。
単一の画像が拡大されればよい場合に、これをよく使います。インストール、更新、またはページを遅くするものが何もないからです。制限は、どれだけの制御ができるかです。
すっきりとしたポップアップが表示されますが、キャプション、テーマ、トランジション効果はなく、実際のギャラリーサポートもありません。それらが必要な場合は、次の2つの方法のいずれかを使用してください。
方法2：SeedProdを使用してWordPressでライトボックスを作成する
ページまたはテーマ全体をデザインしている場合、SeedProdを使用すると、構築中にライトボックスをオンにできるため、コードに触れることなくライブで動作を確認できます。SeedProdはドラッグアンドドロップのWordPressウェブサイトビルダーであり、その画像ブロックにはライトボックスオプションが組み込まれています。
| ツール | WordPressウェブサイトビルダー |
| 料金 | 無料および有料オプションが利用可能です |
| 無料版 | はい |
| 際立った機能 | ビジュアルドラッグアンドドロップエディター、組み込み画像ライトボックストグル、初心者向け |
| 最適な対象 | WordPressライトボックスを追加するためのノーコードの方法を求めている初心者 |
SeedProdには、あらかじめ作成されたウェブサイトキットとランディングページテンプレートが付属しているため、数回のクリックでデザインを構築し、ドラッグアンドドロップビルダーでカスタマイズできます。
SeedProdの画像ブロックを使用すると、ギャラリー画像の大きなバージョンを表示するライトボックスを有効にできます。これは、次に設定する機能です。
ステップ1: SeedProdのインストールと有効化
まず、SeedProdの価格ページにアクセスし、ライセンスプランを選択して、SeedProdアカウントを作成します。アカウントダッシュボードに入ったら、ダウンロードタブに移動し、SeedProdプラグインファイルをコンピューターにダウンロードします。
その間に、ライセンスキーをコピーしておきます。すぐに必要になります。
プラグインをダウンロードしたら、WordPressウェブサイトにインストールしてアクティブ化します。以前にこれを行ったことがない場合は、WordPressプラグインのインストールに関するこのチュートリアルに従ってください。
SeedProdがアクティブになったら、SeedProd » 設定に移動し、以前にコピーしたライセンスキーを貼り付けます。キーを確認ボタンをクリックして、次のステップに進みます。
ステップ2：テーマまたはランディングページを作成する
次のステップは、WordPressテーマまたはランディングページの構築を開始することです。SeedProdを使用すると、両方を行うことができます。違いは次のとおりです。
- テーマビルダー：テーマビルダーは、現在のWordPressテーマをカスタムテーマに置き換えます。多くのウェブサイトキットから選択し、デザインをワンクリックでインストールしてから、すべての部分を視覚的にカスタマイズします。
- ランディングページビルダー：ランディングページビルダーは、現在のテーマと連携して機能するスタンドアロンページを作成します。 レスポンシブテンプレートを選択し、ドラッグアンドドロップビルダーでカスタマイズしてください。
どちらも画像ライトボックスを追加できるため、ニーズに合ったものを選択してください。開始のヘルプが必要な場合は、カスタムWordPressテーマの作成とSeedProdを使用したランディングページの構築に関するチュートリアルをご覧ください。
ステップ3：ライトボックスを追加する場所を決定する
次に、画像ライトボックスをどこに配置したいかを決定します。このガイドでは、テーマビルダーを使用してインテリアデザインポートフォリオページを作成しているので、SeedProdでページを編集してドラッグアンドドロップビルダーを開きます。
デザインが開くと、左側にブロックとセクション、右側にライブプレビューが表示されます。クリック、ドラッグ、ドロップで要素を移動できます。
まず、ポートフォリオ画像の新しい列を追加します。サイドバーから、ページにカラムブロックをドラッグし、レイアウトを選択します。
次に、各列に画像ブロックをドラッグします。
各画像ブロックをクリックし、コンピューターまたはメディアライブラリから画像をアップロードします。
次に、各画像にライトボックスを追加します。画像ブロックをクリックし、リンクタイプの見出しを見つけて、ドロップダウンからメディア – ライトボックスを選択します。
ギャラリーのすべての画像に対してこれを繰り返し、右上隅にある保存ボタンをクリックします。
ステップ4：変更を公開する
最後のステップは、ライトボックスギャラリーを公開することです。カスタムテーマの場合は、SeedProd » テーマビルダーに移動し、「SeedProdテーマを有効にする」トグルを「はい」に切り替えます。
ランディングページを公開している場合は、ページビルダーで開き、保存ボタンのドロップダウン矢印をクリックして、公開を選択します。
これで、新しいデザインを表示して、どのように見えるかを確認してください。
ギャラリーのいずれかの画像をクリックすると、レスポンシブなフルスクリーンライトボックスで開きます。
あなたも作成しませんか？
コードなしでサイトにライトボックスギャラリーを追加
SeedProdのドラッグアンドドロップビルダーを使用すると、ライトボックスをオンにして、ページのデザイン中にライブで動作を確認できます。ショートコードやテーマの編集は不要です。
ギャラリーを作成したい方法3：ギャラリープラグインを使用してライトボックスを作成する
ギャラリーの外観と動作をより細かく制御するには、WordPressギャラリープラグインを使用します。ここでは、WordPressエコシステムでよく知っているツールであり、最も人気のあるWordPressギャラリープラグインの1つであるEnvira Galleryを使用します。
| ツール | Envira Galleryプラグイン |
| 料金 | 39.50ドル/年から（通常79ドル） |
| 無料版 | はい、Envira Gallery Lite |
| 際立った機能 | ドラッグアンドドロップギャラリービルダー、組み込みライトボックス設定、モバイル対応テンプレート |
| 最適な対象 | 高度なギャラリーカスタマイズが必要なユーザー |
この軽量な画像ギャラリープラグインを使用すると、投稿、ページ、ウィジェットエリア、サイドバー用の最適化されたギャラリーを作成できます。スピードも最適化されているため、訪問者にとって画像がすばやく読み込まれます。
まず、Envira Galleryプラグインをインストールして有効化します。次に、Envira Gallery » 新規追加に移動して、新しいギャラリーを作成します。
コンピューターからファイルを選択をクリックして画像を追加します。すでにメディアライブラリにある画像を使用するには、代わりに他のソースからファイルを選択をクリックします。
画像を追加したら、サムネイルをドラッグアンドドロップして並べ替えることができます。次に、設定タブをクリックしてギャラリーをセットアップします。
この画面では、次のことができます。
- ギャラリーの列数を変更する
- 画像の遅延読み込みを有効にする
- ギャラリーの説明を表示する
- タイトルとキャプションを表示する
- 画像のサイズと切り抜き位置を設定する
- ギャラリーのテーマを変更する
- マージンとパディングを調整します
次に、ライトボックスタブをクリックしてライトボックス自体をセットアップします。
ライトボックスを有効にするオプションがオンになっていることを確認します。そこから、ライトボックスのテーマを変更したり、キャプションを表示したり、トランジション効果を追加したりできます。
設定に満足したら、右上隅にある公開ボタンをクリックします。
訪問者にギャラリーを表示するには、投稿またはページを編集し、ブロックエディターでプラス（+）アイコンをクリックし、Envira Galleryブロックを検索して追加します。
ドロップダウンからギャラリーを選択してプレビューします。
更新または公開をクリックして変更を保存します。ページをプレビューすると、ギャラリーは次のようになります。
画像をクリックすると、次のようなレスポンシブライトボックスギャラリーで表示されます。
ボーナス：SeedProdページにEnvira Galleryを追加する
SeedProdでページを作成している場合、Envira Galleryのライトボックスを任意のページやテンプレートに直接ドロップできます。つまり、ショートコードや追加の手順は不要です。
- SeedProdページまたはテンプレートをドラッグアンドドロップエディターで開きます。
- サイドバーで「Envira Gallery」ブロックを検索し、ページにドラッグします。
- ドロップダウンからギャラリーを選択し、表示設定を調整します。
これにより、SeedProdの柔軟なページビルダーとEnviraのライトボックス機能が組み合わされ、サイトの任意のページに洗練された画像ギャラリーを作成できます。
ライトボックスが機能しないのはなぜですか？
画像をクリックしてもライトボックスが開かない場合、原因は通常、いくつかの一般的な問題のいずれかです。これらのチェックを実行してください。
- 間違ったリンクターゲット：各画像は、添付ファイルページではなく、メディアファイルにリンクする必要があります。添付ファイルページへのリンクは、ポップアップを開く代わりに訪問者を別のページに送信します。
- テーマまたはプラグインの競合：テーマまたは別のギャラリープラグインもライトボックスを追加している場合、2つのスクリプトが競合する可能性があります。一方を無効にして、再度テストしてください。
- キャッシュ：キャッシュプラグインまたはCDNは、ページの古いバージョンを提供する可能性があります。キャッシュをクリアしてから、再読み込みしてください。
- モバイルでの動作：タッチ操作はデスクトップクリックとは異なる場合があるため、常に電話またはタブレットでライトボックスをテストしてください。
WordPressでライトボックスを作成することに関するFAQ
WordPressには組み込みのライトボックスがありますか？
はい。WordPress 6.4以降、コアの画像ブロックとギャラリーブロックには、設定パネルに「クリック時に展開」トグルが含まれています。オンにすると、プラグインなしでネイティブライトボックスで画像が開きます。
プラグインなしでWordPressギャラリーにライトボックスを追加するにはどうすればよいですか？
コアのギャラリーブロックを投稿またはページに追加し、画像をアップロードします。ブロックを選択し、設定パネルを開き、「クリック時に展開」をオンにします。ページを保存すると、画像をクリックするとフルスクリーンのライトボックスで開きます。
WordPressのライトボックスが機能しないのはなぜですか？
最も一般的な原因は、画像がメディアファイルではなく、その添付ファイルページにリンクしていることです。各画像をメディアファイルにリンクするように設定してください。テーマやプラグインの競合、またはキャッシュされた古いページも原因となる可能性があるため、競合するライトボックススクリプトを無効にし、キャッシュをクリアしてください。
ライトボックスは画像だけでなく動画にも使用できますか？
はい。多くのライトボックスツールは、画像と同様にYouTubeやVimeoの動画をポップアップで開きます。訪問者をサイトから離れさせることなく、製品デモやチュートリアルを表示するのに良い方法です。
最高の無料WordPressライトボックスプラグインは何ですか？
人気の無料オプションには、Envira Gallery Lite、Simple Lightbox、WP Featherlightなどがあります。これらは使いやすく、基本的なライトボックス設定をカバーしています。後で高度な機能のために有料バージョンにアップグレードできます。
WordPressのライトボックスを今日追加しましょう
あの醜い添付ファイルページは、訪問者をコンテンツに留めるクリーンなポップアップに変わりました。無料の組み込みトグル、SeedProd、またはEnviraのいずれであっても、あなたのサイトに合った方法を選べば、数分でライトボックスが機能するようになります。
その他、役立つ可能性のあるチュートリアルはこちらです。
- WordPressの投稿とページにギャラリーを追加する方法
- WordPressでタブを作成して見栄えの良いタブ付きコンテンツを作成する方法
- WordPressにツイートボタンを追加する方法（3つの方法）
- WooCommerceでカスタムカート追加ボタンを追加する方法
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
