WordPressのページや投稿にギャラリーをほんの数分で追加することができます。写真、アートワーク、製品のいずれを共有する場合でも、ギャラリーはあなたのサイトをよりプロフェッショナルに見せ、訪問者を惹きつけます。
私は、ブロック、プラグイン、ページビルダーを使用してWordPressでギャラリーを構築してきました。このガイドでは、ギャラリーの読み込みを速くし、見栄えを良くするためのヒントを交えながら、ベストな3つの選択肢を順を追って説明します。
なぜWordPressにギャラリーを追加するのか？
WordPressのギャラリーは、写真をすっきりとしたクリックしやすいレイアウトで整理し、ページに積み重ねられた単一の画像よりも閲覧しやすくします。
画像を1枚ずつ挿入するのではなく、ギャラリーを追加する主な理由は以下の通りです：
- より良いユーザー体験：訪問者は無限にスクロールすることなく、複数の画像をすばやくスキャンすることができます。
- プロフェッショナルな外観：ギャラリーは、ポートフォリオ、ブログ、製品ページを構成し、洗練されたものにします。
- SEOの利点：最適化されたギャラリーは、Googleイメージからのトラフィックを促進し、エンゲージメントシグナルを向上させます。
- インタラクティブ機能：適切なツールを使えば、ライトボックスのポップアップ、フィルター、カルーセルを追加できます。
1つのページで複数のビジュアルを紹介する必要があるときは、ギャラリーを使います。デザインをすっきりさせ、コンテンツをより魅力的なものにします。
WordPressにギャラリーを追加するオプション
WordPressのページや投稿にギャラリーを追加する方法はいくつかあります。最も簡単なのは、WordPressに組み込まれているギャラリーブロックを使用することです。
使い方が簡単なので、初心者には良いソリューションだ。しかし、画像サイズやキャプション以外の外観のコントロールはほとんどできない。そのため、より多くのカスタマイズオプションが必要なサイトにはお勧めできない。
WordPressの画像ギャラリープラグインを使用することもできます。これらのプラグインは、より多くのカスタマイズオプションと高度な機能を備えています。例えば、最も人気のあるギャラリー・プラグインは以下のものを提供しています：
- ライトボックスポップアップ
- ユニークなレイアウト
- アニメーションとホバー効果
- 画像保護（電子透かし）
- そしてもっと。
あるいは、多くのWordPressページビルダーはユニークな画像ギャラリーモジュールを備えています。これらのモジュールを使えば、余計なプラグインをインストールすることなく、簡単にランディングページにギャラリーを追加することができます。
まだ選べなくても心配しないでください。以下のチュートリアルで3つのオプションすべてを紹介するので、自分のニーズに合ったものを見つけてほしい。
ヒント:1つのページ（ポートフォリオや製品ショーケースなど）で最もデザインをコントロールしたい場合は、SeedProdを使用してください。多くの投稿にわたってギャラリーが必要な場合は、ギャラリープラグインを使用してください。手軽でシンプルなものであれば、組み込みのギャラリーブロックを使いましょう。
まずは私のお気に入りの方法、ページビルダーを使ってWordPressにギャラリーを追加する方法から。
| 方法 | ページ内の作品 | 投稿作品 | カスタマイズ | 最適 | 備考 |
|---|---|---|---|---|---|
| SeedProdページビルダー | ✅ | ❌ | 高い（グリッド、フィルター、カルーセル） | ポートフォリオ、ランディングページ | コンバージョンの高いレイアウト内にギャラリーを追加。 |
| Envira Gallery プラグイン | ✅ | ✅ | 高（ライトボックス、ウォーターマーク、キャプション） | ブロガー、ショップ、ギャラリー | 機能豊富で、ページビルダーなしでサイト全体に対応。 |
| WordPressギャラリーブロック | ✅ | ✅ | 基本（コラム、キャプション、シンプルなスタイル） | シンプルなニーズ、最小限のプラグイン | 高速なビルトインオプション。 |
ページビルダーでWordPressにギャラリーを追加する方法
ポートフォリオのようなコンバージョンの高いギャラリーページを作成する場合、リードとコンバージョンを簡単に生成できるツールが必要です。
WordPressエディターでランディングページを作成し、ギャラリーブロックを使用することができます。しかし、それはあなたが必要とする他の機能を持っていない可能性が高いです：
- カウントダウン・タイマー
- お客様の声
- オプトインフォーム
- 価格表
- 星の評価
このような場合、WordPressページビルダーを使えば、必要なものすべてを1つのWordPressプラグインにまとめることができ、より理にかなっている。
私の一番のお気に入りはSeedProdで、最高のドラッグ＆ドロップWordPressページビルダーの一つです。これを使えば、コンバージョンにつながるランディングページを作成したり、 高度なギャラリーブロックを使ってあなたの作品を展示したりすることができます。
まず、WordPressサイトにSeedProdプラグインをインストールし、有効化する必要があります。これに関してヘルプが必要な場合は、SeedProd Proのインストール方法に関するガイドをご覧ください。
プラグインを有効化した後、WordPressのダッシュボードからSeedProd " Landing Pagesに行き、"Add New Landing Page "ボタンをクリックします。
ランディングページのテンプレートを見て、あなたのニーズに合ったデザインを見つけましょう。空白のページテンプレートでゼロから始めることもできます。
テンプレートにカーソルを合わせてチェックマークアイコンをクリックするだけで、SeedProdのドラッグ＆ドロップビルダーが起動します。その後、ページを視覚的にカスタマイズして、あなただけのページにすることができます。
より詳細な手順については、WordPressでランディングページを作成する方法についての私のステップバイステップガイドをご覧ください。
注： SeedProdでは、WordPressのページにのみギャラリーを追加することができます。
WordPressのランディングページにギャラリーを追加する
ランディングページを設定した後、WordPressのフォトギャラリーでカスタマイズしたいと思うでしょう。SeedProdには3つの方法があります：
- ギャラリーブロック：シンプルなマルチカラムギャラリー。
- 高度なギャラリーブロック：フィルター、オーバーレイ、テキスト説明を備えた単一または複数のギャラリー。
- 画像カルーセルブロック：自動再生オプション付きの1列スライド画像ギャラリー。
ギャラリー・ブロックの使用
ギャラリーブロックを追加するには、左側のブロックサイドバーでギャラリーブロックを見つけ、ページ上の所定の位置にドラッグします。
次に、ブロック設定の「ギャラリー画像を追加」オプションをクリックします。
コンピュータから新しい画像をアップロードするか、WordPressメディアライブラリから画像を選択することができます。ギャラリーに追加したい画像をすべて選択し、"ギャラリーを作成 "をクリックします。
各画像にキャプションを付けて、"ギャラリーを挿入 "ボタンをクリックします。
これでランディングページにギャラリーが表示されます。そこから、ブロックオプションの "設定 "タブをクリックし、ギャラリーのカラム、リンク、画像サイズ、順番を調整してください。
高度なギャラリーブロックを使う
Advanced Galleryブロックも同様に機能します。ただし、単一のギャラリーではなく、複数のギャラリーを追加し、ユーザーが見たいものを簡単に選択できるようにフィルタを表示することができます。
前回と同様に、左側のサイドバーでAdvanced Galleryブロックを見つけ、ページにドラッグします。
今回は、ドロップダウンメニューで "シングル "か "マルチプル "を選ぶことができる。どのように機能するかをお見せするために、複数を選択してみます。
ご覧のように、これを選ぶと「タブ」オプションが表示されます。これが最初のギャラリーです。
タブをクリックして展開し、ギャラリーの設定をご覧ください。
ここで、"ギャラリー画像を追加 "オプションをクリックし、メディアを追加して写真を挿入する前のような手順に従ってください。
次に、"ギャラリーを追加 "ボタンをクリックして、別の画像ギャラリーを追加します。
ギャラリーのプレビューでは、いくつかの見出しが表示されます。私の例では、"すべて"、"赤い車"、"黒い車 "です。
つまり、ユーザーは一度にすべての画像を表示することも、一度に1つのギャラリーを表示することもできます。
このブロックの中に「オーバーレイ」という追加設定があります。これを展開すると、オーバーレイ効果を有効にすることができます。このエフェクトを使用すると、ギャラリー画像のサムネイルにカーソルを合わせたときに表示されるオーバーレイに色を追加することができます。
また、画像のキャプション、タイトル、または説明を表示することで、訪問者にさらにコンテキストを与えることができます。
画像カルーセルブロックを使う
画像をページ上でより小さく表示したい場合は、画像カルーセルブロックを使用してください。
ブロック設定では、画像を個別にアップロードできますが、グリッドではなく、ページネーション付きのスライドショーとして表示されます。
ユーザーは手動でクリックして各画像をスライドさせることもできますし、設定エリアでカルーセルを自動再生に設定することもできます。
自分に合った方法を選んでください。保存 "と "公開 "をクリックして、変更をウェブサイトに反映させることをお忘れなく。
プラグインで画像ギャラリーを作成する方法
それでは、WordPressのギャラリー・プラグインという選択肢をご紹介しましょう。この方法は、ページや 投稿に追加する機能が豊富な画像ギャラリーが欲しい場合に最適です。
そこでお勧めしたいのが、WordPress用のフォトギャラリー・プラグインの1つであるEnvira Galleryです。
ドラッグ＆ドロップ機能で簡単に使用でき、レスポンシブでユーザーフレンドリーなギャラリーレイアウトを構築するために必要なすべての機能を備えています。
まず、Envira Galleryプラグインをインストールし、有効化する必要があります。この例では無料版を使用していますが、Pro版では透かし、パスワード保護、ソーシャルメディアアイコン、eコマースサイト用のWooCommerceギャラリーなど、さらに多くのアドオンがアンロックされます。
WordPressプラグインのインストール方法については、こちらの便利なガイドをご覧ください。
WordPressページにEnviraギャラリーを追加する
有効化したら、新しいページを作成するか、既存のページを編集します。次に、プラスアイコンをクリックして新しいWordPressブロックを追加し、「Envira」を検索してクリックしてページに追加します。
次に、"メディアライブラリ "ボタンをクリックして、ライブラリからギャラリーに追加する画像を選択します。
ギャラリーを編集するには、ツールバーまたは右側のサイドバーにある "ギャラリーを編集 "オプションをクリックしてください。
様々なカスタマイズオプションがある新しいタブが開きます。
例えば、"Config "タブでは、列数の設定、遅延読み込みのオン・オフ、自動行の高さと余白の設定、画像サイズと寸法の選択ができます。
また、"Lightbox "タブをクリックすると、ユーザーが画像をクリックしたときにフルサイズで開くギャラリーライトボックス効果を有効にすることができます。
設定に満足したら、右上の "更新 "をクリックし、ページを戻します。そこから、ギャラリーをあなたのウェブサイトにライブで表示するために、ページを保存して公開します。
この方法はWordPressの投稿にギャラリーを追加するのにも使えます。
WordPressにプラグインなしでギャラリーを追加する方法
WordPressのプラグインを最小限に抑えたウェブサイトをお望みなら、あるいは飾り気のないシンプルなものがお望みなら、WordPress内蔵のギャラリーブロックは堅実な選択です。
使用するには、ページまたは投稿を編集または新規作成し、ブロックエディタ（Gutenberg）でブロックを追加するプラスアイコンをクリックし、ギャラリーブロックを探します。
次に、画像をアップロードするか、WordPressのメディアライブラリから選択し、"新しいギャラリーを作成 "ボタンをクリックします。
次に、キャプションを追加したり、ギャラリーを並べ替えたりして、"ギャラリーを挿入 "ボタンを選択します。
投稿やページにギャラリーが表示されたら、右側のサイドバーでオプションを選択してギャラリーをカスタマイズできます。
例えば、列数や解像度の設定、メディアファイルや添付ファイルページへのリンク、画像のトリミングなどが可能です。
スタイル」設定に切り替えると、カスタム背景色を設定したり、画像間の間隔を調整したりできます。
変更に満足したら、更新または公開をクリックしてライブにします。
WordPressギャラリーの画像最適化
ギャラリー画像を最適化することは、画像を追加することと同じくらい重要です。大きくて圧縮されていないファイルは、サイトの速度を低下させ、SEOにも悪影響を及ぼします。私はいつもアップロードする前に最適化し、ページスピードを低下させることなくギャラリーをシャープに見せています。
以下は、私が推奨する主なステップである：
- 画像のサイズを変更します：サイトに必要なサイズに合わせましょう。幅800pxでしか表示されない場合は、3000pxの画像をアップロードしないでください。
- ファイルを圧縮する：TinyPNG、ShortPixel、Imagifyなどのツールを使って、品質を落とさずにファイルサイズを小さくする。
- 適切なフォーマットを使いましょう：写真にはJPEG、透過性にはPNG、モダンなパフォーマンスとSEO効果にはWebP。
- 説明的なaltテキストを追加する：これは、アクセシビリティに役立ち、Google画像からのトラフィックを促進することができます。
- ギャラリーの遅延ロード：WordPressは現在、これを内蔵しています。訪問者がスクロールするたびに画像が読み込まれ、スピードが向上します。
私は、最初に画像のサイズを変更し圧縮するだけで、ギャラリーが遅くて不格好なものから高速ロードになるのを見てきました。訪問者とランキングに大きな違いをもたらします。
WordPressにギャラリーを追加する際のFAQ
次の画像ギャラリーを作成する
このガイドの方法が、WordPressにギャラリーを追加する方法を学ぶ助けになったことを願っています。あなたに合った方法を選んで、魅力的なビジュアルコンテンツであなたのウェブサイトに命を吹き込んでください。
画像の使い方については、以下のWordPressチュートリアルもお勧めです：
- ワードプレスサイトの画像生成にAIを使う方法
- WordPressに注目画像を追加する方法
- WordPressにホットスポット画像を追加する方法
- WordPressで画像にテキストを追加する方法
- CSSを使わずにWordPressの背景画像を薄暗くする方法
お読みいただきありがとうございました！ご質問やご意見がありましたら、お気軽にコメントをお寄せください。
また、YouTube、X（旧Twitter）、Facebookでも、ビジネスの発展に役立つコンテンツを配信しています。
