WordPressのページや投稿に数分でギャラリーを追加できます。写真、アートワーク、商品を共有する場合でも、ギャラリーを使用するとサイトがよりプロフェッショナルに見え、訪問者のエンゲージメントを維持できます。
私はブロック、プラグイン、ページビルダーを使用してWordPressでギャラリーを構築してきました。各方法は少しずつ異なりますので、このガイドでは、ギャラリーを高速に読み込み、見栄えを良くするためのヒントとともに、3つの最適なオプションをステップバイステップでご紹介します。
WordPressにギャラリーを追加する理由
WordPressギャラリーは、ページに積み重ねられた個々の画像よりも閲覧しやすい、クリーンでクリック可能なレイアウトで写真を整理します。
画像を1つずつ挿入する代わりにギャラリーを追加する主な理由は次のとおりです。
- 優れたユーザーエクスペリエンス：訪問者は無限にスクロールすることなく、複数の画像をすばやくスキャンできます。
- プロフェッショナルな外観：ギャラリーは、ポートフォリオ、ブログ、商品ページに構造と洗練さをもたらします。
- SEOのメリット：最適化されたギャラリーは、Google画像検索からのトラフィックを促進し、エンゲージメントシグナルを改善できます。
- インタラクティブ機能：適切なツールを使用すると、ライトボックスポップアップ、フィルター、カルーセルを追加できます。
1ページに複数のビジュアルを表示する必要がある場合は、常にギャラリーを使用しています。デザインがすっきりし、コンテンツがより魅力的になります。
WordPressにギャラリーを追加する方法
WordPressのページや投稿にギャラリーを追加するには、いくつかの方法があります。最も簡単なのは、組み込みのWordPressギャラリーブロックを使用することです。
使いやすいので初心者には良いソリューションですが、画像サイズとキャプション以外の外観の制御はほとんどできません。そのため、より多くのカスタマイズオプションが必要なサイトにはお勧めしません。
また、WordPressの画像ギャラリープラグインを使用することもできます。これらは、はるかに多くのカスタマイズオプションと高度な機能を提供します。たとえば、最も人気のあるギャラリープラグインは次のものを提供します。
- ライトボックスポップアップ
- ユニークなレイアウト
- アニメーションとホバーエフェクト
- 画像保護（透かし）
- その他多数。
または、多くのWordPressページビルダーには独自の画像ギャラリーモジュールがあります。これにより、追加のプラグインをインストールせずに、ランディングページに簡単にギャラリーを追加できます。
まだ選べなくても心配しないでください。チュートリアルで3つのオプションすべてをカバーしますので、ニーズに最適なものを見つけることができます。
ヒント：単一のページ（ポートフォリオや商品ショーケースなど）で最もデザインコントロールを行いたい場合は、SeedProdを使用してください。多くの投稿にギャラリーが必要な場合は、ギャラリープラグインを使用してください。すばやく簡単なものには、組み込みのギャラリーブロックを使用してください。
まずは、ページビルダーを使用してWordPressにギャラリーを追加するという、私のお気に入りの方法から始めましょう。
| 方法 | ページで使用可能 | 投稿で使用可能 | カスタマイズ | 最適 | 注記 |
|---|---|---|---|---|---|
| SeedProdページビルダー | ✅ | ❌ | 高（グリッド、フィルター、カルーセル） | ポートフォリオ、ランディングページ | 高コンバージョンレイアウト内にギャラリーを追加; ビジュアルコントロール。 |
| Envira Gallery プラグイン | ✅ | ✅ | 高機能（ライトボックス、ウォーターマーク、キャプション） | ブロガー、ショップ、投稿全体のギャラリー | 機能豊富; ページビルダーなしでサイト全体で機能します。 |
| WordPress ギャラリーブロック | ✅ | ✅ | 基本（カラム、キャプション、シンプルなスタイル） | シンプルなニーズ、最小限のプラグイン | 高速、組み込みオプション; レイアウト効果は少なめ。 |
ページビルダーで WordPress にギャラリーを追加する方法
ポートフォリオのようなコンバージョン率の高いギャラリーページを作成する場合、リードの生成とコンバージョンを容易にするツールが必要になります。
WordPress エディターでランディングページを作成し、ギャラリーブロックを使用することもできます。ただし、次のような、他に必要となる機能はほとんどないでしょう。
- カウントダウンタイマー
- お客様の声
- オプトインフォーム
- 料金表
- 星評価
この場合、必要なものがすべて揃った WordPress ページビルダーを単一のWordPress プラグインで使用する方が理にかなっています。
私のお気に入りはSeedProdです。これは最高のドラッグ＆ドロップ WordPress ページビルダーの 1 つです。これを使用すると、コンバージョンするランディングページを作成し、高度なギャラリーブロックで作品を表示できます。
まず、WordPress サイトにSeedProd プラグインをインストールして有効化する必要があります。これに役立つ情報が必要な場合は、SeedProd Pro のインストール方法に関するガイドを参照してください。
プラグインを有効化した後、WordPress ダッシュボードから SeedProd » ランディングページ に移動し、「新しいランディングページを追加」ボタンをクリックします。
次に、ランディングページテンプレートを閲覧して、ニーズに合った既製のデザインを見つけます。空白のページテンプレートから始めることもできます。
テンプレートの上にカーソルを合わせ、チェックマークアイコンをクリックして SeedProd のドラッグ＆ドロップビルダーで起動します。その後、ページを視覚的にカスタマイズして、独自のページにすることができます。
より詳細な手順については、WordPress でランディングページを作成する方法に関するステップバイステップガイドを参照してください。
注意: SeedProd では、ギャラリーは WordPress ページにのみ追加でき、投稿には追加できません。
WordPress ランディングページにギャラリーを追加する
ランディングページの設定後、WordPress フォトギャラリーでカスタマイズしたくなります。SeedProd でこれを行うには 3 つの方法があります。
- ギャラリーブロック: シンプルなマルチカラムギャラリー。
- 高度なギャラリーブロック: フィルター、オーバーレイ、テキスト説明付きの単一または複数のギャラリー。
- 画像カルーセルブロック: 自動再生オプション付きの単一カラムのスライド画像ギャラリー。
ギャラリーブロックの使用
ギャラリーブロックを追加するには、左側のブロックサイドバーでそれを見つけ、ページ上の所定の位置にドラッグします。
次に、ブロック設定の「ギャラリー画像の追加」オプションをクリックします。
次に、コンピューターから新しい画像をアップロードするか、WordPress メディアライブラリから画像を選択します。ギャラリーに追加したいすべての画像を選択し、「ギャラリーを作成」をクリックします。
その後、各画像にキャプションを付け、「ギャラリーを挿入」ボタンをクリックできます。
ギャラリーがランディングページに表示されるようになります。そこから、ブロックオプションの「設定」タブをクリックして、ギャラリーの列、リンク、画像サイズ、順序を調整します。
高度なギャラリーブロックの使用
高度なギャラリーブロックも同様に機能します。ただし、単一のギャラリーの代わりに、複数のギャラリーを追加し、ユーザーが簡単に見たいものを選択できるように表示フィルターを設定できます。
以前と同様に、左側のサイドバーで高度なギャラリーブロックを見つけて、ページにドラッグします。
今回は、「単一」または「複数」を選択するドロップダウンメニューがあります。動作を示すために「複数」を選択します。
ご覧のとおり、これを選択すると「タブ」オプションが表示されます。これが最初のギャラリーです。
タブをクリックして展開し、ギャラリーの設定を表示します。
ここで、「ギャラリー画像の追加」オプションをクリックし、以前と同様の手順に従ってメディアを追加し、写真を挿入します。
次に、「ギャラリーを追加」ボタンをクリックして、別の画像ギャラリーを追加します。
ギャラリーのプレビューには、いくつかの見出しが表示されます。私の例では、「すべて」、「赤い車」、「黒い車」となっています。
これは、ユーザーがすべての画像を一度に見ることも、一度に1つのギャラリーを見ることもできることを意味します。
このブロックには、「オーバーレイ」という追加の設定があります。展開すると、オーバーレイ効果を有効にできます。この効果により、ギャラリー画像のサムネイルに、ホバーしたときに表示されるカラーオーバーレイを追加できます。
画像キャプション、タイトル、または説明を表示して、訪問者にさらに多くのコンテキストを提供することもできます。
画像カルーセルブロックの使用
画像をページ上のスペースを少なくしたい場合は、画像カルーセルブロックを使用してください。
ブロック設定では、画像を個別にアップロードできますが、グリッドの代わりにスライドショーとしてページネーションと共に表示されます。
ユーザーは手動でクリックして各画像をスライドできます。または、設定エリアでカルーセルを自動再生するように設定することもできます。
最適な方法を選択してください。変更をウェブサイトで公開するには、「保存」と「公開」をクリックすることを忘れないでください。
プラグインで画像ギャラリーを作成する方法
次に、代替案としてWordPressギャラリープラグインを紹介します。この方法は、ページと投稿に追加する豊富な機能を持つ画像ギャラリーが必要な場合に最適です。
このために、WordPressで最高の写真ギャラリープラグインの1つであるEnvira Galleryをお勧めします。
ドラッグアンドドロップ機能により使いやすく、レスポンシブでユーザーフレンドリーなギャラリーレイアウトを構築するために必要なすべての機能が備わっています。
まず、Envira Galleryプラグインをインストールして有効化する必要があります。この例では無料バージョンを使用していますが、Proバージョンでは、ウォーターマーキング、パスワード保護、ソーシャルメディアアイコン、eコマースサイト向けのWooCommerceギャラリーなど、さらに多くの追加機能が利用可能になります。
ヘルプについては、WordPressプラグインのインストール方法に関する便利なガイドを参照してください。
WordPressページにEnvira Galleryを追加する
有効化したら、新しいページを作成するか、既存のページを編集します。次に、プラスアイコンをクリックして新しいWordPressブロックを追加し、「Envira」を検索してクリックし、ページに追加します。
次に、「メディアライブラリ」ボタンをクリックして、ライブラリから画像を選択し、ギャラリーに追加します。
ギャラリーを編集するには、ツールバーまたは右側のサイドバーにある「ギャラリーを編集」オプションをクリックします。
これにより、さまざまなカスタマイズオプションが表示される新しいタブが開きます。
たとえば、「設定」タブでは、列数を設定したり、遅延読み込みをオン/オフにしたり、自動行の高さと余白を設定したり、画像サイズと寸法を選択したりできます。
また、「ライトボックス」タブをクリックして、ユーザーが画像をクリックしたときに画像をフルサイズで開くギャラリーライトボックス効果を有効にすることもできます。
設定が完了したら、右上隅の「更新」をクリックしてからページに戻ります。そこから、ページを保存して公開し、ギャラリーをウェブサイトでライブ表示します。
この方法を使用して、WordPressの投稿にギャラリーを追加することもできます。
プラグインなしでWordPressにギャラリーを追加する方法
プラグインを最小限に抑えたウェブサイトを好む場合や、特別な機能なしでシンプルなものを必要とする場合は、WordPressの組み込みギャラリーブロックが確実な選択肢です。
使用するには、新しいページまたは投稿を編集または作成し、プラスアイコンをクリックしてブロックエディター（Gutenberg）でブロックを追加し、ギャラリーブロックを探します。
次に、画像をアップロードするか、WordPressメディアライブラリから選択し、「新規ギャラリーを作成」ボタンをクリックします。
次に、キャプションを追加するか、ギャラリーを並べ替え、「ギャラリーを挿入」ボタンを選択します。
投稿またはページに挿入したら、右側のサイドバーのオプションを選択してギャラリーをカスタマイズできます。
たとえば、列数と解像度を設定したり、メディアファイルまたは添付ファイルページにリンクしたり、画像をトリミングしてフィットさせたりできます。
「スタイル」設定に切り替えると、カスタム背景色を設定したり、画像間の間隔を調整したりできます。
変更が完了したら、更新または公開をクリックしてライブにします。
WordPressギャラリーの画像最適化
ギャラリー画像の最適化は、追加するのと同じくらい重要です。大きくて圧縮されていないファイルは、サイトを遅くし、SEOに悪影響を与える可能性があります。私は常にアップロード前に最適化しているので、ギャラリーはページ速度を低下させることなくシャープに見えます。
私が推奨する主な手順は次のとおりです。
- 画像のサイズ変更：サイトで必要なサイズに合わせます。3000pxの画像が800px幅でしか表示されない場合は、アップロードしないでください。
- ファイルの圧縮：TinyPNG、ShortPixel、またはImagifyなどのツールを使用して、品質を損なうことなくファイルサイズを縮小します。
- 適切な形式を使用：写真にはJPEG、透明度にはPNG、最新のパフォーマンスとSEOのメリットにはWebPを使用します。
- 説明的な代替テキストを追加：これはアクセシビリティに役立ち、Google画像検索からのトラフィックを促進できます。
- ギャラリーの遅延読み込み：WordPressには現在これが組み込まれています。訪問者がスクロールするにつれて画像が読み込まれるようにし、速度を向上させます。
画像のリサイズと圧縮を最初に行っただけで、遅くてぎこちないギャラリーが高速読み込みになったのを見たことがあります。訪問者とランキングに大きな違いをもたらします。
WordPressにギャラリーを追加することに関するFAQ
次の画像ギャラリーを作成する
このガイドの方法が、WordPressにギャラリーを追加する方法を学ぶのに役立ったことを願っています。あなたに合った方法を選び、魅力的なビジュアルコンテンツであなたのウェブサイトを生き生きとさせましょう。
以下のWordPress画像チュートリアルも役立つかもしれません。
- WordPressウェブサイトでAIを使って画像を生成する方法
- WordPressにアイキャッチ画像を追加する方法
- WordPressにホットスポット画像を簡単に追加する方法
- WordPressで画像にテキストを追加する方法
- CSSなしでWordPressの背景画像を暗くする方法
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
