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