ウェブサイトを遅くしたり、コードを書いたりせずに、WordPressでライトボックスを作成したいですか？
ライトボックスを使用すると、訪問者は画像や動画をクリックして、新しいタブではなく、気を散らすことのないポップアップで表示できます。これにより、ギャラリーがよりプロフェッショナルに見え、ユーザーエクスペリエンスが向上し、人々がサイトに長く滞在するようになります。
このガイドでは、WordPressにライトボックスを追加する簡単な2つの方法をステップバイステップで紹介します。これにより、サイトに最適な方法を選択できます。
WordPressでライトボックスを作成する簡単な手順：
WordPressのライトボックスとは？
ライトボックスは、訪問者が画像、動画、またはリンクをクリックしたときにページの上に表示されるポップアップウィンドウです。ページの残りの部分は背景で暗くなり、ライトボックス内のコンテンツが主な焦点となります。
この機能は、次の理由で人気があります：
- ユーザーがページを離れることなく、画像の大きなバージョンを表示できる
- 背景をグレーアウトして、気を散らすものを減らす
- よりプロフェッショナルで洗練されたギャラリー体験を作成する
ライトボックスは、画像ギャラリー、製品写真、動画、さらにはオプトインフォームによく使用されます。訪問者が完了したら、閉じるボタンをクリックするだけでメインページに戻ります。
WordPressでライトボックスを使用するタイミングは？
ライトボックスは、訪問者にページを離れることなく1つのコンテンツに集中させたい場合に適しています。これは、人々を惹きつけ、追加のページロードを減らしたい場合に特に役立ちます。
WordPressライトボックスの一般的な用途は次のとおりです：
- 写真やクリエイティブなポートフォリオの紹介
- より詳細な製品画像を表示する
- スクリーンショット、デザインモックアップ、または作業例を強調する
- YouTubeまたはVimeoの動画を気を散らすことなく再生する
ライトボックスをサインアップフォームや重要なアナウンスに使用することもできます。背景が暗くなるため、訪問者はメッセージに気づき、やり取りする可能性が高くなります。
SeedProdを使用してWordPressでライトボックスを作成する方法
まず、WordPressで画像ライトボックスを作成する方法を、最高のWordPressウェブサイトビルダーであるSeedProdを使用して紹介します。
| ツール： WordPressページビルダー |
| 価格： 異なります（無料および有料オプションあり） |
| 無料バージョン： はい |
| 注目の機能： 🔹ビジュアルドラッグ＆ドロップエディター 🔹簡単な画像ライトボックストグル 🔹高速で初心者向け |
| 最適なユーザー： WordPressライトボックスをコードなしで追加したい初心者 |
SeedProdには、数回のクリックでWordPressウェブサイトデザインを作成できる、既製のウェブサイトキットとランディングページテンプレートが付属しています。その後、ドラッグ＆ドロップページビルダーとカスタマイズ可能なWordPressブロックとセクションを使用してウェブサイトをカスタマイズできます。
SeedProdの画像ブロックを使用すると、WordPressギャラリー画像の大きなバージョンを表示するライトボックスを有効にでき、次のチュートリアルでこれらの機能を紹介します。
先に進む前に、SeedProdで他にできることをご紹介します。
- コンバージョンにつながるランディングページを作成する（404、セール、スqueeze、ウェビナー、サンキュー、ログインページを含む）
- オンラインストア用のカスタムWooCommerceサイトを構築する
- 近日公開またはメンテナンスモードページをバイパスできるユーザーを制御する
- ダイナミックテキストでランディングページをパーソナライズする
- メールマーケティング統合と購読者管理ダッシュボードでメールリストを増やす
- その他多数。
ステップ1. SeedProdのインストールと有効化
まず、SeedProdの料金ページにアクセスし、ライセンスプランを選択してSeedProdアカウントを作成します。アカウントダッシュボードに入ったら、ダウンロードタブに移動し、SeedProdプラグインファイルをコンピューターにダウンロードします。
その際にライセンスキーをコピーしておきます。後で必要になります。
プラグインをダウンロードしたら、WordPressウェブサイトにインストールして有効化します。以前にこれを行ったことがない場合は、WordPressプラグインのインストール方法に関するこのチュートリアルに従ってください。
サイトでSeedProdプラグインが有効になったら、SeedProd » 設定に移動し、先ほどコピーしたライセンスキーを該当するフィールドに貼り付けます。次に、キーの検証ボタンをクリックし、次のステップに進みます。
ステップ2. WordPressテーマまたはランディングページの作成
次のステップは、WordPressテーマまたはランディングページの構築を開始することです。SeedProdプラグインではどちらも可能ですが、どちらを使用すればよいかわからない場合は、次の説明をご覧ください。
- テーマビルダー – テーマビルダーを使用すると、現在のWordPressテーマを新しいカスタムテーマに置き換えることができます。多くの既製のウェブサイトキットから選択し、1クリックでデザインをインストールできます。SeedProdはテーマのすべての部分を作成し、ページビルダーで視覚的にカスタマイズできるようにします。
- ランディングページビルダー – ランディングページビルダーを使用すると、現在のWordPressテーマと連携するスタンドアロンのランディングページを作成できます。さまざまなレスポンシブランディングページテンプレートから選択し、ドラッグアンドドロップページビルダーでカスタマイズできます。
どちらのソリューションでもデザインに画像ライトボックスを追加できるため、ニーズに最適なものを選んでください。開始にあたってヘルプが必要な場合は、SeedProdを使用したカスタムWordPressテーマの作成とランディングページの構築に関するチュートリアルをご覧ください。
テンプレートを選択し、ランディングページまたはテーマのフレームワークを構築したら、以下のステップ3に従ってデザインに画像ライトボックスを追加できます。
ステップ3.画像ライトボックスを追加する場所を決める
次に、WordPress画像ライトボックスを追加したい場所を決定します。
このガイドでは、テーマビルダーを使用してカスタムポートフォリオページを備えたインテリアデザインウェブサイトを作成しているため、SeedProdでページを編集してドラッグアンドドロップビルダーを開きます。
デザインを開くと、左側にブロックやセクション、右側にデザインプレビューが表示される2列レイアウトが表示されます。クリック、ドラッグ、ドロップでプレビュー上の要素を移動できます。
まず、ポートフォリオ画像用の新しい列を追加しましょう。サイドバーから、Columnsブロックをページにドラッグし、レイアウトデザインを選択します。
次に、ページセクションの各列にImageブロックをドラッグします。
そこから、各画像ブロックをクリックして、コンピューターまたはWordPressメディアライブラリから画像をアップロードできます。
これで、ギャラリーの各画像にライトボックスを追加できます。これを行うには、いずれかの画像ブロックをクリックし、「Link Type」という見出しを見つけて、ドロップダウンメニューからMedia – Lightboxオプションを選択します。
ギャラリー内のすべての画像リンクに対してこれを繰り返し、右上隅にあるSaveボタンをクリックして変更を保存します。
ステップ4.変更を公開する
最後のステップは、レスポンシブライトボックスギャラリーをWordPressサイトに公開することです。カスタムWordPressテーマの場合は、WordPress管理画面からSeedProd » Theme Builderに移動し、「Enable SeedProd Theme」トグルを「Yes」の位置に切り替えます。
ランディングページを公開する場合は、ページビルダーで開き、Saveボタンのドロップダウン矢印をクリックしてPublishを選択します。
これで、新しいデザインを表示して、どのように見えるかを確認できます。
そして、ギャラリーのいずれかの画像をクリックすると、レスポンシブなフルスクリーン画像ライトボックスが開きます。
ギャラリープラグインを使用して画像ライトボックスを作成する方法
WordPressサイトに画像ライトボックスを追加するもう1つの方法は、WordPress画像ギャラリープラグインを使用することです。この方法では、WordPressで最も人気のあるギャラリープラグインの1つであるEnvira Galleryを使用します。
| ツール： Envira Gallery Plugin |
| 価格： $26/年から |
| 無料バージョン： はい |
| 注目の機能： 🔹ドラッグ＆ドロップギャラリービルダー 🔹組み込みライトボックス設定 🔹モバイル対応テンプレート |
| 最適なユーザー：高度なギャラリーカスタマイズが必要なユーザー |
この軽量なドラッグ＆ドロップ画像ギャラリープラグインを使用すると、投稿、ページ、ウィジェットエリア、サイドバー用の最適化された画像ギャラリーを作成できます。プラグインは使いやすく、速度も最適化されているため、ウェブサイト訪問者にとって画像がすばやく読み込まれます。
WordPressウェブサイトにEnvira Galleryプラグインをインストールして有効化することから始めます。次に、Envira Gallery » Add Newに移動して、新しい画像ギャラリーを作成します。
Select Files from Your Computerボタンをクリックしてギャラリーに画像を追加できます。ただし、メディアライブラリから画像を使用したい場合は、Select Files from Other Sourcesボタンをクリックします。
ギャラリーに画像を追加した後、サムネイルをドラッグ＆ドロップして並べ替えることができます。
次に、Configurationタブをクリックして、ギャラリー設定を構成します。
この画面では、次のことができます。
- ギャラリーの列数を変更する
- 画像の遅延読み込みを有効にする
- ギャラリーの説明を表示する
- タイトルとキャプションを表示する
- 画像のサイズと切り抜き位置を設定する
- ギャラリーのテーマを変更する
- マージンとパディングを調整する
次に、ライトボックスの設定をカスタマイズするための「ライトボックス」タブをクリックします。
まず、「ライトボックスを有効にする」オプションがチェックされていることを確認し、設定を調整してライトボックスのテーマを変更したり、キャプションを表示したり、トランジション効果を追加したりします。
ギャラリーの設定に満足したら、右上隅にある「公開」ボタンをクリックします。
ギャラリーをウェブサイトの訪問者に表示するには、投稿またはページを作成または編集し、WordPressブロックエディター内のプラス（+）アイコンをクリックして、新しいWordPressブロックを追加します。
「Envira Galleryブロック」が表示されるまで検索またはスクロールし、クリックしてページに追加します。
次に、ドロップダウンメニューからギャラリーを選択して、ライトボックスギャラリーをプレビューします。
その後、「更新」または「公開」ボタンをクリックして変更を保存できます。
ページをプレビューすると、ギャラリーはこの例のように表示されるはずです。
その後、いずれかの画像をクリックすると、このようレスポンシブライトボックスギャラリーで表示されます。
ボーナス：SeedProdページにEnvira Galleryを追加する
SeedProdでWordPressページを構築している場合、Envira Galleryのライトボックスギャラリーを任意のページまたはテンプレートに直接簡単に追加できます。これにより、ショートコードや追加の手順を使用せずに、画像をプロフェッショナルな方法で簡単に表示できます。
- SeedProdページまたはテンプレートをドラッグアンドドロップエディターで開きます。
- サイドバーで「Envira Gallery」ブロックを検索し、ページにドラッグします。
- ドロップダウンメニューからギャラリーを選択し、表示設定を調整します。
この統合により、SeedProdの柔軟なページビルダーとEnvira Galleryの強力なライトボックス機能を組み合わせることができ、サイトの任意のページに美しくコンバージョン率の高い画像ギャラリーを作成できます。
WordPressでライトボックスを作成することに関するFAQ
WordPressサイトにライトボックスを追加することは、画像、動画、またはギャラリーをよりプロフェッショナルに見せるための最も簡単な方法の1つです。訪問者はコンテンツに集中し、不必要にページを離れるのを防ぎます。
ページビルダーまたはギャラリープラグインのいずれを使用しても、セットアップは数分で完了します。サイトに最適な方法を選択し、手順に従えば、すぐに使用できるWordPressライトボックスが準備できます。
その他、役立つ可能性のあるチュートリアルはこちらです。
- WordPressの投稿とページにギャラリーを追加する方法
- WordPressでタブを作成して見栄えの良いタブ付きコンテンツを作成する方法
- WordPressにツイートボタンを追加する方法（3つの方法）
- WooCommerceでカスタムカート追加ボタンを追加する方法
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
