ウェブサイトを遅くしたり、コードを書いたりすることなく、WordPressでライトボックスを作成したいですか？
ライトボックスを使用すると、訪問者が画像やビデオをクリックすると、新しいタブの代わりに、邪魔にならないポップアップで表示することができます。これにより、ギャラリーがよりプロフェッショナルに感じられ、ユーザーエクスペリエンスが向上し、サイトへの滞在時間が長くなります。
このガイドでは、WordPressのライトボックスを追加する2つの簡単な方法を順を追って紹介するので、あなたのサイトに最適な方法を選んでください。
WordPressでライトボックスを作成する簡単な手順：
- ステップ1.SeedProdのインストールとアクティベート
- ステップ2.WordPressテーマまたはランディングページを作成する
- ステップ3.画像ライトボックスを追加する場所を決める
- ステップ 4.変更を公開する
WordPressのライトボックスとは？
ライトボックスは、訪問者が画像、ビデオ、リンクをクリックするとページの上部に表示されるポップアップウィンドウです。ページの他の部分は背景が薄暗くなり、ライトボックス内のコンテンツがメインになります。
この機能は人気がある：
- ユーザーがページを離れることなく、画像の拡大版を見ることができます。
- 背景をグレーアウトすることで、気が散るのを軽減します。
- よりプロフェッショナルで洗練されたギャラリー体験を実現
ライトボックスは、イメージギャラリー、商品写真、ビデオ、そしてオプトインフォームによく使われます。訪問者はページが終わると、閉じるボタンをクリックするだけで、メインページに戻ることができます。
WordPressでライトボックスはいつ使うべきか？
ライトボックスは、訪問者がページを離れることなく1つのコンテンツに集中できるようにしたい場合に適しています。これは、人々の関心を引きつけ、余分なページの読み込みを減らしたい場合に特に役立ちます。
WordPressライトボックスの一般的な用途は以下の通りです：
- 写真やクリエイティブなポートフォリオの展示
- 商品画像をより詳細に表示
- スクリーンショット、デザインモックアップ、作品例を強調する。
- YouTubeやVimeoのビデオを、邪魔にならない方法で再生する。
また、申し込みフォームや重要なお知らせにライトボックスを使うこともできます。ページの他の部分が背景で暗くなるため、訪問者はメッセージに気づきやすく、対話しやすくなります。
SeedProdを使用してWordPressでライトボックスを作成する方法
まず、最高のWordPressウェブサイトビルダーであるSeedProdを使って、WordPressで画像ライトボックスを作成する方法を紹介します。
| ツールWordPressページビルダー |
| 価格さまざま（無料および有料オプションあり） |
| 無料版はい |
| 主な特徴: 🔹 ビジュアルなドラッグ＆ドロップエディター 🔹 簡単な画像ライトボックストグル 🔹 速くて初心者にもやさしい |
| 最適な人コードなしでWordPressのライトボックスを追加したい初心者 |
SeedProdには、数回のクリックでWordPressウェブサイトのデザインを作成できる、既製のウェブサイトキットとランディングページテンプレートが付属しています。その後、ドラッグアンドドロップのページビルダーとカスタマイズ可能なWordPressブロックとセクションを使ってウェブサイトをカスタマイズすることができます。
SeedProdのイメージブロックを使用すると、WordPressのギャラリー画像を大きく表示するライトボックスを有効にすることができます。
次に進む前に、SeedProdで他に何ができるかを紹介しよう：
- コンバージョンにつながるランディングページの作成（404、セールス、スクイーズ、ウェビナー、サンキュー、ログインなど）
- オンラインストア用のカスタムWooCommerceサイト構築
- 誰が近日公開やメンテナンスモードのページをバイパスできるかを管理する。
- ダイナミックテキストでランディングページをパーソナライズ
- メールマーケティング統合と購読者管理ダッシュボードでメールリストを増やす
- その他にもいろいろある。
ステップ1.SeedProdのインストールとアクティベート
まず、SeedProdの価格ページを開き、ライセンスプランを選択し、SeedProdアカウントを作成します。アカウントダッシュボードに入ったら、ダウンロードタブに行き、SeedProdプラグインファイルをコンピュータにダウンロードします。
その間にライセンスキーをコピーしておく。
プラグインをダウンロードしたら、WordPressウェブサイトにインストールして有効化します。WordPressのプラグインをインストールしたことがない方は、こちらのチュートリアルを参考にしてください。
SeedProdプラグインがあなたのサイトでアクティブになったら、SeedProd " Settingsに移動し、関連するフィールドに先ほどコピーしたライセンスキーを貼り付けます。ここでVerify Keyボタンをクリックし、次のステップに進みます。
ステップ2.WordPressテーマまたはランディングページを作成する
次のステップは、WordPressテーマまたはランディングページの構築を開始することです。SeedProdプラグインを使用すると、両方を行うことができますが、どちらのオプションを使用するかわからない場合は、ここで説明します：
- テーマビルダー-テーマビルダーを使用すると、現在のWordPressテーマを新しいカスタムテーマに置き換えることができます。多くの既成のウェブサイトキットから選択し、1クリックでデザインをインストールできます。その後、SeedProdがテーマのすべてのパーツを作成し、ページビルダーで視覚的にカスタマイズすることができます。
- ランディングページビルダー -ランディングページビルダーを使えば、現在のWordPressテーマと連動するスタンドアロンのランディングページを作ることができます。様々なレスポンシブなランディングページテンプレートから選択し、ドラッグ＆ドロップのページビルダーでカスタマイズすることができます。
どちらのソリューションも、デザインに画像ライトボックスを追加することができますので、ニーズに合ったものをお選びください。もし始める際に助けが必要であれば、カスタムWordPressテーマの作成とSeedProdを使ったランディングページの作成に関するチュートリアルをご覧ください。
テンプレートを選択し、ランディングページやテーマのフレームワークを構築したら、以下のステップ3に従ってデザインに画像ライトボックスを追加することができます。
ステップ3.画像ライトボックスを追加する場所を決める
次に、WordPressの画像ライトボックスをどこに追加するかを決めます。
このガイドでは、テーマビルダーを使用してカスタムポートフォリオページを持つインテリアデザインウェブサイトを作成します。
デザインを開くと、左側にブロックとセクション、右側にデザインのプレビューがある2カラムのレイアウトが表示されます。プレビュー上では、クリック、ドラッグ、ドロップで要素を移動できます。
まずはポートフォリオ画像用に新しいカラムを追加してみましょう。サイドバーからカラムブロックをページにドラッグし、レイアウトデザインを選択します。
次に、画像ブロックをページセクションの各列にドラッグします。
そこから各画像ブロックをクリックし、パソコンやワードプレスのメディアライブラリから画像をアップロードすることができます。
ギャラリーの各画像にライトボックスを追加できるようになりました。これを行うには、任意の画像ブロックをクリックし、"リンクタイプ "見出しを見つけ、ドロップダウンメニューからメディア - ライトボックスオプションを選択するだけです。
ギャラリー内のすべての画像リンクに対してこれを繰り返し、右上の「保存」ボタンをクリックして変更を保存します。
ステップ 4.変更を公開する
最後のステップは、WordPressウェブサイト上でレスポンシブライトボックスギャラリーを公開することです。カスタムWordPressテーマでこれを行うには、WordPress管理画面からSeedProd " Theme Builderに移動し、"Enable SeedProd Theme "トグルを "Yes "にします。
ランディングページを公開する場合は、ページビルダーでページを開き、保存ボタンのドロップダウン矢印をクリックして、公開を選択します。
これで、新しいデザインがどのように見えるかを確認することができます。
また、ギャラリー内の画像をクリックすると、レスポンシブなフルスクリーン画像ライトボックスが開きます。
ギャラリープラグインを使って画像ライトボックスを作成する方法
WordPressサイトに画像ライトボックスを追加するもう一つの方法は、WordPress画像ギャラリープラグインを使用することです。この方法では、WordPressで最も人気のあるギャラリープラグインの1つであるEnvira Galleryを使用します。
| ツールEnvira Galleryプラグイン |
| 価格年間26ドルから |
| 無料版はい |
| 主な機能: 🔹 ドラッグ＆ドロップギャラリービルダー 🔹 内蔵ライトボックス設定 🔹 モバイル対応テンプレート |
| 最適高度なギャラリーのカスタマイズを必要とするユーザー |
この軽量なドラッグ＆ドロップ画像ギャラリープラグインを使えば、投稿、ページ、ウィジェットエリア、サイドバー用に最適化された画像ギャラリーを作成することができます。このプラグインは使いやすく、スピードも最適化されているので、あなたの画像はウェブサイトの訪問者に素早く読み込まれます。
あなたのWordPressウェブサイトにEnvira Galleryプラグインをインストールし、有効化することから始めましょう。次に、Envira Gallery " 新規追加に移動して、新しい画像ギャラリーを作成します。
コンピュータからファイルを選択]ボタンをクリックすると、ギャラリーに画像を追加できます。しかし、メディアライブラリから画像を使用したい場合は、[他のソースからファイルを選択]ボタンをクリックします。
ギャラリーに画像を追加した後、サムネイルをドラッグ＆ドロップして並べ替えることができます。
ここで、ギャラリー設定を構成するために、構成タブをクリックします。
この画面では、以下のことができる：
- ギャラリーの列数を変更する
- 画像の遅延読み込みを有効にする
- ギャラリーの説明を表示する
- タイトルとキャプションを有効にする
- 画像サイズと切り抜き位置を設定する
- ギャラリーのテーマを変更する
- マージンとパディングを調整する
次に、ライトボックスの設定をカスタマイズするための「ライトボックス」タブをクリックします。
まず、ライトボックスを有効にするオプションがチェックされていることを確認し、ライトボックスのテーマの変更、キャプションの表示、トランジション効果の追加などの設定を調整する。
ギャラリーの設定に満足したら、右上のPublishボタンをクリックします。
ウェブサイトの訪問者にギャラリーを表示するには、投稿またはページを作成または編集し、WordPressブロックエディタ内のプラス（+）アイコンをクリックして新しいWordPressブロックを追加します。
検索するか、Envira Galleryブロックが表示されるまでスクロールし、それをクリックしてページに追加します。
次に、ドロップダウンメニューからギャラリーを選択し、ライトボックスギャラリーをプレビューします。
その後、[更新]または[公開]ボタンをクリックして変更を保存できます。
あなたのページをプレビューすると、ギャラリーはこの例のように見えるはずです：
画像をクリックすると、このようにレスポンシブ・ライトボックス・ギャラリーに表示されます：
ボーナス：EnviraギャラリーをSeedProdページに追加する
SeedProdを使用してWordPressページを構築している場合、Envira Galleryライトボックスギャラリーをページやテンプレートに直接簡単に追加することができます。これにより、ショートコードや余分なステップを使用することなく、プロフェッショナルな方法で画像を簡単に紹介することができます。
- ドラッグアンドドロップエディタでSeedProdページまたはテンプレートを開きます。
- サイドバーでEnvira Galleryブロックを検索し、ページにドラッグします。
- ドロップダウンメニューからギャラリーを選択し、表示設定を調整します。
この統合により、SeedProdの柔軟なページビルダーとEnvira Galleryの強力なライトボックス機能を組み合わせることができ、サイトのどのページでも美しく、コンバージョンの高いイメージギャラリーを作成することができます。
WordPressのライトボックス作成に関するFAQ
WordPressサイトにライトボックスを追加することは、画像、動画、ギャラリーをよりプロフェッショナルに見せる最も簡単な方法のひとつです。訪問者をコンテンツに集中させ、不必要にページを離れるのを防ぎます。
ページビルダーを使おうが、ギャラリーのプラグインを使おうが、セットアップには数分しかかかりません。あなたのサイトに最適な方法を選び、ステップに従えば、WordPressライトボックスがすぐに使えるようになります。
その他、参考になるチュートリアルをいくつかご紹介しよう：
- WordPressの投稿とページにギャラリーを追加する方法
- WordPressでタブを作成する方法
- WordPressにツイートボタンを追加する方法（3つの方法）
- WooCommerceでカスタムカート追加ボタンを追加する方法
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
