WordPressサイトで写真コレクションを公開しようとすると、すぐに扱いにくく感じることがあります。それらを一つずつ追加すると、訪問者は延々とスクロールしなければならず、ページが散らかってプロフェッショナルに見えなくなります。
画像ギャラリーは完璧なソリューションです。写真を美しいグリッドにきれいに整理し、少ないスペースでより多くの写真を表示できます。
WPBeginnerでは、うまく作成されたギャラリーがウェブサイトを訪問者にとってより魅力的なものにできることを直接見てきました。ポートフォリオ、製品、またはブログ投稿を洗練されたプロフェッショナルに見せる簡単な変更です。
このガイドでは、プラグインありとなしで、WordPressで簡単に画像ギャラリーを作成する方法を説明します。
WordPress で画像ギャラリーを作成する理由
WordPressでは、ブログの投稿やページに画像を簡単に追加できます。画像ブロックを追加して画像をアップロードするだけです。
ただし、WordPressウェブサイトに複数の画像を追加すると、それらは次々と表示されます。これは見栄えが悪く、ユーザーはすべてを表示するためにたくさんスクロールする必要があります。
ギャラリーを作成すると、画像を行と列のグリッドレイアウトで表示できます。画像のサムネイルを表示でき、ユーザーはクリックしてフル画像を表示できます。
この方法なら、より少ないスペースでより多くの写真を表示でき、はるかにプロフェッショナルに見えます。
例えば、画像を展示するために写真ウェブサイトを作成している場合、フォトギャラリーを追加することで、作品を美しく見せることができます。
WordPressでは、Gutenbergブロックエディターのギャラリーブロックを使用して、簡単に画像ギャラリーを作成できます。
WordPressギャラリープラグインを使用して、さらに多くの機能を持つ、より優れたギャラリーを作成することもできます。
とはいえ、WordPressで画像ギャラリーを簡単に作成する方法を見ていきましょう。
このチュートリアルでは、ギャラリーを作成するための2つの方法を紹介します。お好みの方法にジャンプするには、以下のリンクを使用してください。
- WordPressブロックエディターで画像ギャラリーを作成する
- Envira Galleryを使用して画像ギャラリーを作成する（推奨）
- ボーナス：ギャラリー画像を検索エンジン向けに最適化する
- 動画チュートリアル
- 画像ギャラリーに関するよくある質問
- 追加リソース
方法1：WordPressブロックエディターで画像ギャラリーを作成する
この方法は、WordPressブロックエディターを使用して画像ギャラリーを作成するためのものです。ただし、この機能は非常に基本的であり、多くのカスタマイズオプションを提供していないことに注意してください。
まず、WordPress管理画面のサイドバーから、ギャラリーを作成したい既存または新規の投稿/固定ページを開く必要があります。
そこに着いたら、画面左上の「+」ボタンをクリックするだけです。ここから、ギャラリーブロックを見つけてページまたは投稿に追加します。
それが完了したら、「アップロード」ボタンをクリックして、コンピューターから新しい画像ファイルをアップロードしてください。
ただし、メディアライブラリから画像をアップロードしたい場合は、代わりに「メディアライブラリ」ボタンをクリックする必要があります。
コンピューターからアップロードすることを選択した場合、Ctrlキー（Macの場合はCmdキー）を押しながら複数の画像ファイルをクリックすることで、一度に複数の画像ファイルを選択できます。
ただし、キーボードのCtrlキーを押しながら複数の画像を選択して開くことができます。
すべての画像をアップロードした後、個々の画像の上のブロックツールバーにある「キャプションを追加」アイコンをクリックしてキャプションを追加できます。
右側のブロックパネルから、画像に代替テキストを追加することもできます。
「メディアライブラリ」ボタンを選択すると、一度に複数の画像をギャラリー用に選択できます。
画像を選択する際に、右側の添付ファイル詳細パネルから画像の代替テキスト、タイトル、キャプションを入力することもできます。
すべての画像を追加したら、「新しいギャラリーを作成」ボタンをクリックするだけです。
これにより、メディアライブラリのプロンプトで「ギャラリーの編集」ページに移動します。
ここから、個々の画像を選択して、キャプション、タイトル、説明、または代替テキストを追加できます。
完了したら、右下隅にある「ギャラリーを挿入」ボタンをクリックするだけです。
作成した画像ギャラリーがWordPressエディターに追加されます。
右側のブロックパネルからギャラリーブロックを選択し、その設定を構成することで、さらにカスタマイズすることもできます。
例えば、「カラム」スライダーを使用して、ギャラリーのカラム数と行数を決定できます。
「画像のトリミング」スイッチを切り替えて、サムネイルをトリミングし、配置を改善することもできます。
「リンク先」オプションでは、ユーザーが写真のみを表示したい場合は「なし」を選択できます。このオプションは、画像のクリック機能を無効にします。
ただし、「メディアファイル」オプションを選択した場合、画像はクリック可能になり、クリックすると画像ファイルが開きます。「添付ファイルページ」オプションを選択した場合は、同様に添付ファイルページが開きます。
設定に満足したら、上部にある「公開」または「更新」ボタンをクリックして設定を保存します。
最後に、WordPress ブログにアクセスして、画像ギャラリーが実際にどのように機能するかを確認できます。
これで、ウェブサイトの画像ギャラリーを簡単に作成できました。しかし、すぐにいくつかの重要な機能が欠けていることに気づくでしょう。
例えば、ギャラリー画像をメディアファイルまたは添付ファイルページにリンクすると、ユーザーエクスペリエンスが悪化します。「メディアファイル」にリンクすると、画像が同じブラウザタブで開かれ、訪問者はページから離れてしまいます。一方、「添付ファイルページ」にリンクすると、その画像用の別のページが開きます。どちらの場合も、ユーザーはギャラリーに戻るために戻るボタンを使用する必要があります。
これはユーザーフレンドリーではなく、ユーザーがウェブサイトをさらに探索することを思いとどまらせる可能性があります。
同様に、ギャラリーの外観も、使用しているWordPressテーマによって異なります。
さらに、ギャラリーをアルバム、トピック、タグなどに整理することもできません。ギャラリーはどこにも保存されないため、同じギャラリーを再度追加する必要がある場合は、再作成する必要があります。
よりプロフェッショナルなギャラリーを追加したい場合は、次の方法を使用してください。
方法2：Envira Gallery を使用して画像ギャラリーを作成する（推奨）
WordPressサイトにもっと機能的で見た目の良い画像ギャラリーを作成したい場合は、この方法が最適です。
市場で最高のWordPress画像ギャラリーであるEnvira Galleryプラグインを使用します。
Enviraを使用すると、WordPressでレスポンシブで美しくモダンな画像ギャラリーを簡単に作成できます。非常に高速で、ライトボックスポップアップ、簡単な画像ナビゲーション、ドラッグ＆ドロップビルダー、プロフェッショナルなギャラリーテンプレートなど、多くの機能を備えています。
プラグインを推奨する前に、デモサイトで徹底的にテストし、優れた結果を得ました。Envira Gallery は初心者にも使いやすく、レスポンシブなので、素晴らしい選択肢です。詳細については、Envira Gallery のレビューをご覧ください。
まず、Envira Gallery プラグインをインストールして有効化する必要があります。詳細については、WordPress プラグインのインストール方法に関するステップバイステップガイドをご覧ください。
有効化したら、WordPressダッシュボードからEnvira Gallery » Settingsページに移動して、ライセンスキーを入力してください。
このキーは、Envira Galleryのウェブサイトのアカウントから取得できます。
注意: Envira Galleryには、無料プラグインもあります。ただし、このチュートリアルでは、より多くの機能をアンロックするためにプロバージョンを使用します。
ライセンスキーを確認したら、WordPressサイドバーからEnvira Gallery » Add Newページに移動して、最初のギャラリーの作成を開始できます。
そこに着いたら、ギャラリーのタイトルを入力し、「コンピューターからファイルを選択」ボタンをクリックして画像をアップロードします。
「他のソースからファイルを選択」ボタンをクリックして、WordPressメディアライブラリから画像をアップロードすることもできます。
画像をアップロードしたら、「ギャラリー」セクションまでスクロールすると、すべての写真が表示されます。
次に、各画像の右上にある鉛筆アイコンをクリックすると、画面に「メタデータを編集」プロンプトが表示されます。
ここから、個々の画像のキャプション、ステータス、タイトル、代替テキストを追加できます。
完了したら、「メタデータを保存」ボタンをクリックして、画像のキャプションを保存することを忘れないでください。
次に、左側のサイドバーにある「設定」タブをクリックする必要があります。
ここから、列数、画像の遅延読み込み、画像サイズ、タイトルとキャプションの位置、マージン、高さ、サムネイルサイズ、画像寸法などを変更できます。
その後、左側のサイドバーから「ライトボックス」タブに切り替え、「ライトボックスを有効にする」オプションを確認します。
このオプションにより、ユーザーはページを離れることなく画像を拡大表示して閲覧できます。
ほとんどのウェブサイトで非常にうまく機能するため、他のデフォルト設定はそのままにしておくことができますが、必要に応じてオプションを確認して変更することもできます。
次に、「モバイル」タブをクリックして、モバイルデバイス用のギャラリー設定を構成します。
ここから、モバイルデバイス用の画像寸法を選択したり、ライトボックスを有効/無効にしたり、画像キャプションを有効/無効にしたりできます。
その後、「その他」セクションからギャラリーのスラッグやカスタムCSSの追加などのオプションを確認できます。
設定に満足したら、上部にある「公開」ボタンをクリックして変更を保存してください。
次に、ギャラリーを埋め込みたい投稿またはページを開く必要があります。
そこに着いたら、画面左上の「+」ボタンをクリックしてブロックメニューを開きます。
次に、Envira Galleryブロックをページまたは投稿に追加するだけです。
それが完了したら、Envira Galleryブロックのドロップダウンメニューから画像ギャラリーを追加する必要があります。
最後に、上部にある「更新」または「公開」ボタンをクリックして変更を保存します。
これで、WordPressウェブサイトで画像ギャラリーを表示できます。
ここでは、ギャラリー内のいずれかの画像をクリックすると、ライトボックス効果でフルサイズで開かれることに気づくでしょう。
画面またはキーボードの左右矢印キーを押すことで、このポップアップで画像を閲覧することもできます。
ボーナス：ギャラリー画像を検索エンジン向けに最適化する
新しいギャラリーを最大限に活用するには、画像を検索エンジン向けに最適化する必要があります。これにより、Googleなどの検索エンジンが適切なキーワードでビジュアルコンテンツを見つけてランク付けするのに役立ちます。
適切に最適化された画像は、サイトの速度を向上させ、ユーザーエクスペリエンスを改善できます。これにより、トラフィックが増加し、ページでのエンゲージメントが向上することがよくあります。
これを行う最も簡単な方法は、すべての画像に説明的な代替テキストを追加することです。このテキストは、検索エンジンのクローラーに画像が何についてのものであるかを伝え、画像検索結果でのランク付けに役立ちます。
より強力なアプローチについては、All in One SEO (AIOSEO)の使用をお勧めします。これは利用可能な最高のWordPress SEOプラグインであり、画像最適化の推測作業をなくします。
WPBeginnerでは、サイト全体でAIOSEOを使用しています。その画像SEOモジュールは、タイトルから代替テキストを自動生成し、専用の画像サイトマップを作成してくれるため、非常に多くの時間を節約できます。
これらの機能により、すべての画像が検索エンジンに最適化されていることを確認できます。詳細については、当社の完全なAIOSEOレビューをご覧ください。
代替テキスト以外にも、説明的なファイル名と関連キーワードを使用することを忘れないでください。詳細については、検索エンジンのために画像を最適化する方法に関する初心者向けガイドをご覧ください。
動画チュートリアル
視覚的な補助で学習する方が良い場合は、ビデオチュートリアルを確認することをお勧めします。
画像ギャラリーに関するよくある質問
何千ものユーザーのWordPressサイトを支援してきた経験から、画像ギャラリーに関する質問にも数多く答えてきました。ここでは、最もよくある質問をいくつかご紹介します。
大量の画像ギャラリーはウェブサイトを遅くしますか？
サイズの大きい圧縮されていない画像を多数含むギャラリーは、サイトの速度を低下させる可能性があります。ページの読み込みを速く保つには、アップロードする前に画像をウェブ用に最適化することが非常に重要です。
また、Envira Galleryのような遅延読み込み機能を備えたプラグインの使用をお勧めします。この機能は、ユーザーの画面に表示されるようになったときにのみ画像を読み込むため、パフォーマンスが大幅に向上します。
WordPressギャラリーに動画を追加できますか？
はい、ビデオギャラリーを簡単に作成できます。デフォルトのWordPressブロックは画像に限定されていますが、Envira Galleryのようなプラグインを使用すると、YouTubeやVimeoなどのソースから直接ギャラリーに動画を追加できます。
ギャラリーをアルバムに整理するにはどうすればよいですか？
複数のギャラリーをアルバムに整理するには、専用のギャラリープラグインが必要です。デフォルトのWordPressギャラリーにはこの機能はありません。
Envira Galleryには、ギャラリーを簡単にグループ化できる「アルバム」アドオンがあります。これは、さまざまなポートフォリオや製品カテゴリを表示したい写真家やビジネスに最適です。
追加リソース
画像ギャラリーの作成方法がわかったので、WordPressサイトでの画像の扱いをさらに改善するために、これらの他のガイドも確認したいかもしれません。
- 画像 SEO の初心者ガイド – 検索エンジンのための画像を最適化する
- WebP vs. PNG vs. JPEG：WordPressに最適な画像フォーマット
- 画像管理に最適なWordPressプラグイン
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
Seba
こんにちは
私としては、最後の写真の後に無限ループではなくギャラリーを終了する設定オプションが欲しいです。解決策をご存知ですか？
よろしくお願いします。セバ
WPBeginnerサポート
そのような質問については、プラグインのサポートに問い合わせることをお勧めします。オプションがあるかどうか、またはカスタムソリューションが必要かどうかを教えてくれるはずです。
管理者
Olaf
ブロックエディターとそのギャラリーは、通常多くのウェブサイトで十分です。しかし、クライアントがギャラリーに特定の「すごい」効果を期待していることが多いため、エフェクトの不足に苦労することがあります。彼らの視点は理解できますが、ブロックエディターだけではそれを達成するのは難しいです。Envira Galleryは、説明に基づくと多くのことができるしっかりしたプラグインのようです。記事にはライセンスキーについて言及されているので、有料プラグインです。このプラグインにはライト版もありますか？もし本当に良いのであれば、それを使用する機会があり、プロバージョンを喜んで支払うことになるので、まずその機能を試してみたいです。しかし、たとえ機能が限定的であっても、常に最初にプラグインをテストするオプションが欲しいのです。
イジー・ヴァネック
Elementor Proで作成したギャラリーを置き換えるプラグインを長い間探していました。悪くはないのですが、完璧でもありませんでした。Envira Galleryプラグインは、その機能、特にエフェクトで私を完全に感銘させました。このプラグインのおかげで、ついにWooCommerceにホバーズーム効果のあるギャラリーを追加することができました。このプラグインは無敵であり、あなたの記事シリーズを通じてこれに出会えたことを嬉しく思います。元のElementorギャラリーを徐々に置き換えており、素晴らしい見た目になっています。
kzain
この組み込みのWordPressギャラリーとEnvira Galleryプラグインの使用方法の解説は、美しい画像プレゼンテーションを作成するための貴重な選択肢を提供します。最適な効果のために高品質の画像を使用するという点はよく述べられていますが、簡単な質問があります。組み込みのWordPressギャラリーにライトボックス機能を追加できますか？
WPBeginnerサポート
それを行うには、サイトにプラグインが必要になります。現時点ではその機能のみに特化したプラグインはありませんが、変更があった場合は必ず共有します！今のところ、その機能をコンテンツに追加するためにEnviraをお勧めします。
管理者
Chris
標準のWordPressの画像ギャラリーを使い始めたばかりです。ギャラリーに画像を追加すると、1行全体を埋めるのに十分な画像がない場合、最後の行の画像は、画像がコンテナの全幅を埋めることができるサイズで表示されます。そのため、デフォルトの1行あたりの画像3枚が適用され、行に画像がなくなるまで、最後の行に巨大な画像が表示されます。行が満杯かどうかに関係なく、すべての画像を同じサイズに強制する方法はありますか？
WPBeginnerサポート
そのためには、アップロードするすべての画像を同じサイズにし、画像のトリミングを強制するチェックボックスのチェックを外して、画像を整列させる必要があります。
管理者
Roger Novak
ギャラリーの各画像に、閲覧者を別のウェブサイトに移動させるクリック可能なリンクを個別に添付/埋め込むことはできますか？