デフォルトのWordPressギャラリーオプションに制限を感じていませんか？標準のギャラリーでは、ユーザーは画像の拡大版を表示するためだけに完全に新しいページを読み込む必要があり、ブラウジング体験を妨げる可能性があります。
ライトボックス効果は、訪問者がページを離れることなく、魅力的なオーバーレイで画像を簡単に表示することでこれを解決します。
WPBeginnerでは、プロジェクトにEnvira Galleryを使用しています。なぜなら、最もスムーズで信頼性の高いライトボックス体験を提供してくれるからです。
この記事では、WordPressにライトボックス効果のあるギャラリーを簡単に追加する方法を紹介します。
このチュートリアルで学べることの簡単な概要を以下に示します。
WordPressギャラリーにライトボックス効果を追加する理由
WordPressウェブサイトのギャラリーにレスポンシブライトボックス効果を追加することで、画像をよりプロフェッショナルに表示できます。この効果により、ユーザーが画像をクリックしたときに、ウェブサイト上のポップアップウィンドウで写真を表示できます。
ライトボックスは、訪問者により没入感のある視聴体験を作成するのに役立ち、ソーシャルメディアでの画像の共有やコンピューターへのダウンロードを容易にします。
写真のウェブサイトをお持ちの場合、ライトボックス効果を追加することで、ユーザーは高解像度の画像を邪魔されないモードで表示できるようになり、エンゲージメントが高まります。
同様に、WooCommerceストアをお持ちの場合、商品ギャラリーにライトボックス効果を追加することで、顧客は商品を間近で確認し、情報に基づいた意思決定を行うことができます。
とはいえ、ライトボックス効果のある WordPress 画像ギャラリーを簡単に、ステップバイステップで追加する方法を見てみましょう。
ライトボックス効果付きWordPressギャラリーの追加方法
ライトボックスギャラリーを追加する最も簡単な方法は、Envira Galleryを使用することです。これは市場で最高のWordPressギャラリープラグインであり、私たちが自身のプロジェクトで使用しているものです。
ドラッグ＆ドロップビルダー、プロフェッショナルなテンプレート、ソーシャル共有、透かし、そしてもちろんライトボックスのような強力な機能を備えています。機能の詳細については、完全なEnvira Galleryレビューをお読みください。
まず、Envira Galleryプラグインをインストールしてアクティブ化する必要があります。詳細な手順については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
注意：Envira Galleryには、このチュートリアルで使用できる無料プラグインもあります。ただし、有料プランにアップグレードすると、より多くの機能にアクセスできるようになります。
有効化後、Proバージョンを使用している場合は、ライセンスキーを入力するために**Envira Gallery » Settings**ページにアクセスする必要があります。
Envira Galleryのウェブサイトのアカウントからこの情報を取得できます。
その後、WordPressダッシュボードからEnvira Gallery » Add Newページにアクセスして、独自の新しいギャラリーの作成を開始してください。
ここから、画像ギャラリーのタイトルを入力します。次に、「コンピューターからファイルを選択」ボタンをクリックして画像をアップロードします。ギャラリーにメディアライブラリの画像を追加したい場合は、「他のソースからファイルを選択」ボタンをクリックします。
これにより、メディアライブラリが起動し、ギャラリー画像をアップロードできます。メディアライブラリからは一度に1つの画像しかアップロードできないことに注意してください。
それが完了したら、左側の列にある「Lightbox」タブに切り替えます。「Enable Lightbox?」オプションはデフォルトでチェックされているはずですが、確認してください。
ここで、右側にギャラリーのプレビューが表示され、左側の列に設定が表示されます。
次に、各画像の上の鉛筆アイコンをクリックして、画面に「メタデータを編集」プロンプトを開きます。
ここから、個々の画像のキャプション、ステータス、タイトル、代替テキストを追加できます。
その後、「メタデータを保存」ボタンをクリックして設定を保存することを忘れないでください。
次に、左側の列にある「設定」タブに切り替えて、ギャラリーのレイアウトをお好みに合わせて変更します。ここから、レイアウト、列数、画像サイズ、寸法、テーマなどを選択できます。
詳細な手順については、WordPressで画像ギャラリーを作成する方法に関する初心者向けガイドをご覧ください。
それが完了したら、左側の列から「Lightbox」タブに切り替え、「Enable Lightbox?」オプションをオンにします。
その後、「Gallery Lightbox Theme」ドロップダウンメニューからライトボックステーマを選択します。「Legacy」オプションを選択すると、ライトボックス効果のプロンプトは古いレイアウトになります。
「ベース（ダーク）」オプションを選択すると、ライトボックスプロンプトはダークベースをレイアウトとして表示します。
次に、ライトボックスプロンプトで画像タイトルを表示するかキャプションを表示するかを選択する必要があります。お好みで両方表示したり、どちらも表示しないこともできます。
それが完了したら、ドロップダウンメニューからライトボックスの画像サイズを選択します。
その後、「ギャラリー矢印を有効にする」オプションを確認します。ライトボックスプロンプトに、視聴者がギャラリー内の異なる画像に切り替えるために使用できる2つの矢印が表示されるようになります。
トランジション効果や画像の拡大などの他の設定も構成できます。Enviraはモバイルデバイスでのスワイプジェスチャーもサポートしており、電話やタブレットの訪問者にとってより良いユーザーエクスペリエンスを提供します。
完了したら、上部にある「公開」ボタンをクリックして変更を保存することを忘れないでください。
画像ギャラリーをWordPressのページ/投稿に追加するには、ブロックエディターでページを開きます。
ここで、画面左上の追加ブロック「+」ボタンをクリックしてブロックメニューを開く必要があります。次に、Envira Gallery ブロックをページ/投稿に追加します。
その後、ブロック自体のドロップダウンメニューから、作成したばかりの画像ギャラリーを選択します。最後に、「更新」または「公開」ボタンをクリックして設定を保存します。
これで、WordPressブログにアクセスして画像ギャラリーを表示し、いずれかの画像をクリックするとライトボックス効果が表示されます。
代替案：NextGen Galleryを使用してWordPressで画像ポートフォリオとギャラリーを作成する
Envira Galleryは、WordPressウェブサイトにライトボックス画像を追加するための最良の選択肢です。あるいは、NextGEN Galleryを使用して、WordPressサイトで完全にレスポンシブで視覚的に魅力的なギャラリーやポートフォリオを作成することもできます。
NextGEN GalleryはEnvira Galleryの最良の代替品です。なぜなら、幅広いギャラリータイプをサポートし、eコマース関連の機能を備え、透かし、ライトボックス、画像コメントなどを追加できるからです。
さらに、NextGEN GalleryではStripeまたはPayPalを介してオンライン決済を受け付けることができるため、画像をオンラインで簡単に販売できます。
プロのフォトグラファー、グラフィックデザイナー、ビジュアルアーティスト向けの機能を備えた高度なギャラリープラグインであり、市場で最高のWordPressポートフォリオプラグインの1つとなっています。
詳細な手順については、WordPressサイトにポートフォリオを追加する方法に関するチュートリアルをご覧ください。
WordPressライトボックスギャラリーに関するよくある質問
WordPressギャラリーにライトボックス効果を追加することについて、よく受ける質問への回答を以下に示します。
WordPressのライトボックス効果とは何ですか？
ライトボックス効果とは、画面を埋めるオーバーレイで画像をスライド表示する機能です。ページの残りのコンテンツは背景で暗くなります。
これにより、訪問者は新しいページに移動することなく、より大きなサイズでメディアを表示でき、より集中したユーザーエクスペリエンスが生まれます。
最適なWordPressライトボックスギャラリープラグインは何ですか？
私たちの経験では、Envira Galleryはライトボックスギャラリーを作成するための最良のWordPressプラグインです。信じられないほど初心者向けで、高速で、強力な機能が満載されています。
より高度なポートフォリオおよびプルーフ機能が必要なプロの写真家にとって、NextGEN Galleryはもう1つの優れた代替手段です。
プラグインなしで、デフォルトのWordPressギャラリーにライトボックスを追加できますか？
WordPressの新しいバージョンには、画像の基本的な「クリックで展開」機能が含まれています。しかし、機能とカスタマイズに関しては非常に限定的です。
プロフェッショナルな外観を得るには、Envira Galleryのような専用プラグインが必要です。デフォルトのWordPressブロックにはない、ナビゲーション矢印、サムネイルプレビュー、ソーシャル共有ボタン、モバイル最適化トランジションを追加します。
ライトボックスギャラリーは私のウェブサイトを遅くしますか？
Envira Galleryのような最適化されたプラグインは、速度のために構築されており、ウェブサイトを遅くするべきではありません。画像の遅延読み込みのようなパフォーマンス機能を使用しています。
ただし、WordPressにアップロードする前に、常に画像をウェブ用に最適化して、可能な限り最速の読み込み時間を確保する必要があります。
追加リソース
ライトボックスギャラリーの設定が完了したので、WordPressでの画像の管理についてさらに詳しく知りたいかもしれません。役立つ記事をいくつか紹介します。
- 品質を損なわずにWebパフォーマンスのために画像を最適化する方法
- 画像SEOガイド：検索エンジンのために画像を最適化する方法
- WordPress で一般的な画像の問題を修正する方法
- 写真家向けの最高のWordPressテーマ
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
イジー・ヴァネック
Envira Galleryをお勧めいただきありがとうございます。私はElementorでウェブサイトを作成しており、Elementor以外ではNextGen galleryしか知りませんでしたが、それは私の要件を完全に満たしていませんでした。このプラグインをぜひ試してみて、現在使用しているNextGen Galleryを置き換えることになるでしょう。
ムハンマド・ダニアル・エムラン
こんにちは、ライトボックス効果がウェブサイトの速度に影響するかどうか尋ねたいのですが。
WPBeginnerサポート
サイトが遅くなる原因にはなりません。
管理者
アハメド・オマル
投稿ありがとうございます。しかし、質問があります。Envira を使用するのではなく、WordPress ブロックエディターを使用してフォトギャラリーを追加した場合、違いはありますか？
WPBeginnerサポート
Envira has more tools and customization options than the default gallery
管理者
E
この記事とこのウェブサイトを見つけられて本当に嬉しいです。今すぐみんな大好き！
リンジー
大好きです！サムネイルを小さくする方法はありますか？
編集スタッフ
はい。設定 > メディアに移動します。サムネイルサイズを編集します。次に、Regenerate thumbnailsという名前のプラグインをダウンロードします。そのプラグインを実行すれば完了です。
http://wordpress.org/extend/plugins/regenerate-thumbnails/
管理者
Sandeep Singh
ギャラリーにライトボックス効果を追加するという提案に本当に感謝しています。このようなサポートに本当に感謝しており、今後も同様であることを願っています。
マイク
こんにちは、
これは素晴らしいですね。ただ一つ質問があります。ギャラリーをスライドショーにするプラグインや何かはありますか？例えば、最初に添付された画像が大きく表示され、その下にギャラリーのすべての画像のサムネイルが表示され、ライトボックス効果ではなく、画像をクリックして大きな画像を変更できるようなものです。
ありがとう、
マイク
編集スタッフ
そのようなプラグインが存在するかどうかは不明です。
管理者
レネー
Fancyboxプラグインがそれを行うと思います。ライトボックスとサムネイルを有効または無効にできます。
エマ・ボーティ・ハウエルズ
素晴らしい解決策をありがとう。私はこの分野では初心者で、オンラインでフォトギャラリーを管理する最も簡単な方法を見つけようとしています。これはシンプルでエレガントです！もう一つ役立つと思ったのは、手間のかからない写真の透かし入れアプリです。「ImageBucket」です。
ティアン
ありがとう、うまくいきました！
マイケル
十分簡単そうです。各写真の下にキャプションを表示する方法はありますか？また、ライトボックスで開いたときに、画像と一緒にライトボックス内に説明テキストを表示する方法はありますか？
編集スタッフ
このプラグインはあなたが探しているものを行うことができるはずです：http://wordpress.org/extend/plugins/gallery-and-caption/
管理者
アレックス
ウェブサイトのトップに画像が表示されるバナーがあります。ライトボックスを開くと、バナーがその上に表示されたままになります。これを停止させるコードなどはありますか？
ありがとうございます
Alex
編集スタッフ
おそらく、バナーのz-index値が非常に高いために発生しています。CSSでその値を下げてください。ウェブ上にはz-indexに関する多くのCSSチュートリアルがあります。
管理者
ジュリーボッツァ
これは本当に素晴らしい解決策ですね、ありがとうございます！私がやっていたことよりもずっと速くてきれいです…
しかし、メインのサムネイルとして表示される画像を選択する方法はありますか？つまり、個々の投稿を開く前に「フィード」に表示されるサムネイルのことです。
事前にお礼申し上げます！
wpbeginner
@JulieBozza 投稿のサムネイルは、アイキャッチ画像機能を使用して選択されます。投稿エディタの右側、公開ボタンの下に、アイキャッチ画像と呼ばれるボックスがあるはずです。
ジュリーボッツァ
@wpbeginner こんにちは！返信ありがとうございます。残念ながら、そうしてもバナー画像は変更されますが、投稿のサムネイルには影響がありません。Twenty Eleven WordPressテーマを使用しているので、バナーを優先しているのかもしれません。
wpbeginner
@JulieBozza これらのギャラリーサムネイル画像を指していますか？
ジュリーボッツァ
@wpbeginner LOL！はい。上記の説明どおりにギャラリー投稿を作成しました。
投稿自体を見ても役立つかどうかわかりませんが、URLはこちらです。サイトはまだ制作途中であることを念頭に置いてください！
http://rupertfyoung.com/2011/09/pierrefonds-september-2011/
wpbeginner
@JulieBozza ギャラリーは期待どおりに機能しています。
http://rupertfyoung.com/category/gallery/ <<ここのサムネイル画像を指している場合、それはおそらく「注目の画像」または最初の添付ファイルによって制御されています。幅の狭い画像（サムネイルサイズなど）をアップロードしてください…そうすればヘッダー画像を占有しません。
wpbeginner
@ukdazza 問題はこのプラグインではなく、あなたのサイトにあります。このようなjQueryの問題は非常に一般的です。このプラグインが機能しない原因となっている別のjQueryがあります。他のjQueryコードの位置を変更する必要があります。
このような問題に遭遇した場合、試行錯誤のゲームです。
ukdazza
スリックラ・フリッカープラグインを使用して、ライトボックス機能付きのサムネイルギャラリーを作成していますが、問題が発生しています。ライトボックスがまったく機能しません。このプラグインに関するオンラインの情報によると、ライトボックスが複数あるか、jQueryが複数実行されている可能性が高く、それが原因で正しく動作しないと考えられます。
ライトボックスが機能しません。サムネイルをクリックするとブラウザで画像が開きますが、これはひどいです。
何かアイデアはありますか？あなたか誰かがアイデアを持っていることを願っていました。なぜなら、このプラグインをインストールしようとしたのですが、宛先がすでに使用されていると表示されたからです。
TGA
すごい。本当にありがとうございます。NextGENギャラリーを使用していましたが、クライアントにさまざまなサイズのサムネイルを持つギャラリーを持たせることが許可されていませんでした。（愚かです）。そのため、ネイティブギャラリーを使用すれば可能になると気づきましたが、HighslideはNextGENの場合のようにサムネイルビューアを作成しませんでした。要するに、これは救世主でした！完璧ではないかもしれませんが、解決策であり、プロジェクトを進めることができます！
wpbeginner
@TejSanusi✔ このプラグインには、ユーザーが同じライトボックスの一部として次の画像を表示する方法があります。
TejSanusi✔
1つのサムネイルから有効になるライトボックスギャラリーを作成する方法はありますか？ユーザーがサムネイルをクリックすると、ライトボックスが作成され、一連のギャラリー画像が表示されるようなものです。
カタ
記事で言及されているプラグインは非常に興味深いです。私もこのプラグインを試して良い結果を得ました。http://wordpress.org/extend/plugins/lightbox-gallery/
クリス
素晴らしい記事をありがとうございます。これは非常に役立ちました。ただ、質問があります。もし40〜50枚程度の大きなギャラリーがあり、投稿にそのうちの1枚だけを表示し、クリックするとギャラリー全体をスクロールできるようにしたい場合はどうすればよいでしょうか？投稿に40枚すべてを表示したくありませんし、これは役立つと思います。
ありがとうございます！
キース・デイビス
よくやった、みんな。
WordPressにギャラリー機能があるなんて知らなかったよ…君たちは何でも知ってるのかい？
いつか実際に使うかもしれません。
ジョナサン・ペロディン
これ、ありがとうございます。サイトにこれを載せたいと思っていたのですが、簡単なプラグインを探すのが面倒でした。これは完璧でした。
マイク・ロバーツ
私はアーティスト兼イラストレーターであり、WordPressで画像ギャラリーを表示するためのオプションに失望し続けています。いつか明るいコーダーが私の訴えに応えてくれることを願って生きています！
グレッチェン
ネイティブのWordPressギャラリー機能を使用するライトボックスプラグインを見つけるのがこんなに難しいとは知りませんでした！私はhttp://wordpress.org/extend/plugins/lightbox-plus/を使用することにしました。なぜなら、各投稿/ページのギャラリーで、ライトボックス設定を使用するかどうかをショートコードで指定できるからです。私は実際に添付ファイルページを時々使用したいと思っており、いつ使用するかを選択できるライトボックスプラグインが必要でした。この機能を持つ他のライトボックスプラグインを見つけた人がいたら、ぜひ聞いてみたいです。
ブロンソン
情報ありがとうございます。
手動で再作成する必要なく、ネイティブギャラリーにライトボックス効果を適用できるのは素晴らしいことです。
ソヌ
これはどのように機能しますか？また、ギャラリーのすべての画像にライトボックスクラスが必要ですか？
編集スタッフ
いいえ、ギャラリーのすべての画像にライトボックスクラスを追加する必要はありません。ギャラリー内のすべての画像に自動的に適用されます。ギャラリー以外の画像にはクラスを追加する必要があります。
管理者
ビノイ
ここでの問題は、投稿内のすべての画像がギャラリーに表示されることです。画像を選択するオプションはありますか？
編集スタッフ
いいえ、それはまだできません。
管理者
レオ
こんにちは！ギャラリーに表示する画像を選択するには、このプラグインを試してください：Multiple Galleries。こちらで見つけられます > http://goo.gl/kNFer
さようなら！
編集スタッフ
Thanks for sharing this plugin. Updating the article to add this
プレストン
各画像には、それに関連付けられたWordPress番号が必要です。このコードでギャラリー内の画像を除外しています。うまくいけば、あなたにも機能するでしょう。
[gallery link="file" exclude="Photo#, Photo#, Photo#"]