WordPressギャラリーをレスポンシブにする方法（2つの方法） 

WordPressサイトにギャラリーを追加した当初、デスクトップでは問題なく表示されていましたが、モバイルでは完全に崩れていました。そこで、WordPressギャラリーをレスポンシブにすることの重要性を学びました。

このガイドでは、サイトの速度を低下させることなく、あらゆる画面サイズに自動的に調整されるモバイルフレンドリーなギャラリーを作成するために私が使用する、最も簡単な2つの方法を紹介します。

商品写真、ポートフォリオ画像、ブログのビジュアルなど、これらの手順により、どこにでも見栄えの良いギャラリーができ、SEOにも役立ちます。

WordPressギャラリーをレスポンシブにする理由

現在、インターネットアクセスの約60％はスマートフォン経由です。そのため、ウェブサイトに新しい機能や機能を追加する際には、モバイルデバイスで正しく機能することを確認する必要があります。

タブレット、スマートフォン、ラップトップ、デスクトップのいずれであっても、新しいフォトギャラリーレイアウトは、各画面サイズに適応できる柔軟性が必要です。そうすることで、ウェブサイトの訪問者はより良いユーザーエクスペリエンスを得ることができます。

さらに重要なのは、レスポンシブデザインは検索エンジン最適化（SEO）にとって非常に重要であるということです。

Googleのような検索エンジンは、検索結果でのサイトのランキング要因としてモバイルのユーザビリティを考慮しています。サイトにレスポンシブギャラリー画像を追加することで、ランキングが向上し、結果として中小企業へのオーガニックトラフィックが増加する可能性があります。

結局のところ、WordPressギャラリーをレスポンシブにする方法を学ぶことは、ビジネスを成長させる上で大きな助けとなります。それを念頭に置いて、ここではあなたが従うことができる2つの簡単な方法を紹介します。

WordPressはギャラリー画像を自動的にレスポンシブにしますか？

はい。WordPressは複数の画像サイズを自動的に生成し、アップロードするすべてのギャラリー画像にsrcsetおよびsizes属性を追加するため、デフォルトでレスポンシブになります。

ほとんどの最新テーマはこれをネイティブに処理します。しかし、プラグインベースのギャラリーは、デフォルトのギャラリーブロックにはないレイアウトコントロール、列のカスタマイズ、モバイル固有の表示設定を提供します。

WordPressギャラリーをモバイルフレンドリーにする最も簡単な方法は？

以下に、WordPressサイトにレスポンシブ画像ギャラリーを追加する2つの方法を紹介します。まず、ギャラリーツールが組み込まれたドラッグ＆ドロップのウェブサイトビルダーであるSeedProdを使用します。次に、市場で最高のレスポンシブWordPress画像ギャラリープラグインの1つを使用します。

新しいギャラリーを追加する手順を表示するには、以下のいずれかの方法をクリックしてください。

方法1. SeedProd高度なギャラリーWordPressブロックを使用する

最初のソリューションでは、最高のWordPressウェブサイトビルダーである SeedProdを使用します。ドラッグ＆ドロップビルダー、レスポンシブテンプレート、カスタマイズ可能なWordPressブロックにより、HTML、PHP、カスタムCSSコードなしでウェブサイトをカスタマイズする最も簡単な方法です。

SeedProdの WordPressブロック を使用して、WordPressテーマ、ページ、ウィジェット対応エリアにギャラリーを追加できます。ドラッグ、ドロップ、クリックするだけで、あらゆる画面サイズに対応するギャラリーを作成できます。

SeedProdの使いやすい機能には以下が含まれます：

• WordPressテーマビルダー
• 既製のウェブサイトキット
• ランディングページビルダー
• レスポンシブなランディングページテンプレート
• 4つのページモード：近日公開、メンテナンス、404、ログイン
• Eメールマーケティング連携
• 購読者管理
• WooCommerceサポート
• アクセス制御
• 動的テキスト
• ドメインマッピング
• その他多数。

以下の手順に従って、SeedProdでレスポンシブなWordPressギャラリーを作成してください。

ステップ1. SeedProdのインストールと有効化

まず、 SeedProdウェブサイト にアクセスしてプラグインをダウンロードしてください。このチュートリアルでは、SeedProdのProバージョンを使用することをお勧めします。競争力のある価格で最高の機能を提供します。

次に、SeedProdアカウントにログインし、**ダウンロード**タブをクリックして、プラグインファイルをコンピューターにダウンロードします。同時にライセンスキーをコピーすることもできます。これはすぐに必要になります。

次に、WordPressウェブサイトにプラグインをアップロードしてアクティブ化します。この手順に役立つ場合は、WordPressプラグインのインストール（新しいタブで開きます）のガイドに従ってください。

SeedProdのインストールとアクティブ化の後、WordPress管理画面から**SeedProd » 設定**に移動し、以前にコピーしたライセンスキーを貼り付けます。必ず**キーを確認**ボタンをクリックしてから、次のステップに進んでください。

ステップ2. WordPressテーマまたはランディングページの作成

このプラグインはドラッグ＆ドロップビルダーを使用するための2つの方法を提供しているため、次のステップはWordPressテーマまたはランディングページのいずれかを作成することです。

テーマビルダーは、開発者を雇うことなくカスタムWordPressテーマを作成する最も簡単な方法です。現在のテーマを、ウェブサイトのすべての部分に対応する完全にカスタマイズ可能なテンプレートに置き換えます。

または、ランディングページビルダーは、WordPressテーマを変更せずに個々のページを視覚的に構築するための優れた方法です。

その後、テンプレートを選択して最初のページを作成したら、このガイドのステップ3に従って、サイトに応答性の高いギャラリーを追加できます。SeedProd を使用した「WordPress テーマの作成」と「ランディング ページの構築」のステップバイステップのチュートリアルに従ってください。

注：このガイドでは、テーマビルダーの方法を使用します。

ステップ3. 高度なギャラリーWordPressブロックを追加する

このステップでは、SeedProd で任意のページを開き、ドラッグアンドドロップビルダーでカスタマイズします。たとえば、テーマビルダーダッシュボードからホームページ テンプレートを開いて、フロントページに応答性の高いギャラリーを追加できます。

ランディング ページを構築している場合は、SeedProd » ランディング ページ に移動し、選択したデザインの [編集] をクリックします。

デザインを開くと、以下のようなレイアウトが表示されます。

左側にはデザインにコンテンツを追加するためのブロックとセクションがあり、右側にはライブ プレビューがあります。プレビューのいずれかの要素をクリックすると、左側にその設定が開かれ、行った変更はすべてリアルタイムで自動的に反映されます。

使用できるブロックの一部を次に示します。

• ソーシャル共有ボタン
• ソーシャル メディア プロフィール アイコン
• 動画ブロック (YouTube または Vimeo 動画 へのリンク)
• お客様の声カルーセル
• お問い合わせフォーム
• その他多数

このガイドでは、高度なギャラリーブロックを使用します。

単一の応答性の高い WordPress ギャラリーを作成する

ポートフォリオの最高の例を表示するために、単一の応答性の高いギャラリーを追加したいとしましょう。これを行うには、左側のパネルから [高度なギャラリー] ブロックを選択し、ページ デザインにドラッグします。

そこから、ギャラリー オプションを開き、ギャラリーが希望どおりの外観になるまで設定を調整できます。列数と間隔を変更したり、ギャラリーを画像ファイル、カスタムリンク、またはなしにリンクしたりできます。

たとえば、[メディア ファイル] オプションを選択すると、訪問者がクリックしたときに、ギャラリーが応答性の高いフルサイズの画像ライトボックスに表示されます。

画像サムネイルのアスペクト比を変更したり、画像サイズをサムネイル、中、または大に設定したりすることもできます。

各ギャラリー画像に情報を追加したいですか？次に、[オーバーレイ] タブをクリックして、各画像に背景オーバーレイの色のホバー効果、タイトル、説明を追加できます。

ウェブサイトの訪問者が画像にカーソルを合わせると、画像が暗くなり、選択した説明が表示されます。

複数の動的な WordPress ギャラリーを作成する

Advanced Gallery ブロックは、ウェブサイトの他のページでも使用できます。たとえば、ポートフォリオ ページを作成し、特定のパラメーターでフィルターできる複数の画像ギャラリーを追加できます。

これを行うには、[タイプ] ドロップダウン メニューをクリックし、[複数] オプションを選択します。次に、好きなだけギャラリーを追加できます。

さらにカスタマイズ オプションが必要な場合は、[高度] タブをクリックできます。そこから、フィルター タブの色、タイポグラフィ、影、画像の境界線などを変更できます。

WordPress ギャラリーを応答性にする

SeedProdで作成したギャラリーはすべてデフォルトでレスポンシブです。ただし、モバイルプレビューオプションを使用して、ギャラリーのモバイルフレンドリーさを確認できます。

下部ツールバーのモバイルプレビューアイコンをクリックすると、ギャラリーがモバイルデバイスでどのように表示されるかを確認できます。

その後、デザインを編集して、あらゆるデバイスで見栄えを良くすることができます。

「デバイスの表示」タブでは、モバイルエクスペリエンスを向上させるために、特定の要素をモバイルまたはデスクトップで非表示にすることもできます。

画像ギャラリーに満足したら、ページ右上隅にある「保存」ボタンをクリックします。

ステップ4. レスポンシブ画像ギャラリーを公開する

これでギャラリーを公開する準備ができました。これを行うには、テーマビルダーダッシュボードに戻り、「SeedProdテーマを有効にする」トグルを「はい」の位置に切り替えます。

または、ランディングページの場合は、「保存」ボタンのドロップダウン矢印をクリックし、「公開」をクリックします。

これで、レスポンシブギャラリーをプレビューして、どのように表示されるかを確認できます。

方法2. Envira Gallery WordPressプラグインを使用する

次の方法では、Envira Galleryを使用してレスポンシブWordPressギャラリーを作成します。他のWordPressギャラリープラグインとは異なり、Envira Galleryは高速でレスポンシブで軽量でありながら、豊富な使いやすい機能を提供します。

たとえば、画像リサイズオプション、スライドショー、柔軟なレイアウト、複数の画像ソースを提供します。

まず、WordPressウェブサイトにEnvira Galleryプラグインをインストールして有効化します。次に、**Envira Gallery »新規追加**に移動して、新しい画像ギャラリーを作成します。

ギャラリーに画像を追加するには、以下のいずれかのボタンをクリックします。

最初のオプションはコンピューターから画像ファイルをアップロードできるもので、2番目のボタンはWordPressメディアライブラリから画像を選択できるものです。

画像を選択した後、ドラッグアンドドロップで並べ替えることができます。目のアイコンをクリックして特定の画像をドラフトモードにし、公開ギャラリーに表示されないようにすることもできます。

さらに、鉛筆アイコンをクリックすると画像メタデータを編集できます。たとえば、画像タイトル、代替テキスト、キャプションを変更したり、添付ファイルページのsrc URLを編集したりできます。

次に、「設定」タブをクリックして、次のことができます。

• ギャラリーの列数を変更する
• 遅延画像読み込みを有効にする
• ギャラリーの説明を表示する
• キャプションとタイトルを表示する
• ピクセルサイズ、画像トリミング位置、間隔を設定する
• ギャラリーテンプレートを変更する

「ライトボックス」タブでは、ユーザーが画像をクリックしたときにレスポンシブライトボックスを有効にできます。また、ライトボックスのテーマを変更したり、キャプションを表示したり、トランジション効果を追加したりするための設定を調整することもできます。

上記の Кроме того、Envira Galleryにはモバイルギャラリー設定タブがあります。このパネルを使用すると、モバイルデバイス用に特定の画像を自動生成できます。

カスタムのモバイル画像寸法と行の高さを設定したり、モバイルライトボックス設定を微調整したりできます。

ギャラリーのデザインに満足したら、右上隅にある「公開」ボタンをクリックします。

モバイルフレンドリーなギャラリーをウェブサイトに追加するには、投稿またはページを作成または編集し、WordPressブロックエディター内のプラス（+）アイコンをクリックして新しいブロックを追加します。

Envira Galleryブロックが表示されるまで検索し、クリックしてページに追加します。

ドロップダウンメニューから、作成したばかりのギャラリーを選択してWordPressエディターに埋め込みます。

これで、更新または公開ボタンをクリックして、ギャラリーをウェブサイトで公開できます。

注意： クラシックWordPressエディターをまだ使用している場合は、Envira Galleryのショートコードをコピーして、投稿またはページに貼り付けることができます。

次に、ページをプレビューして、新しいレスポンシブWordPressギャラリーがどのように表示されるかを確認します。

WooCommerce製品ギャラリーをレスポンシブにする方法

WooCommerceストアを実行している場合、製品画像ギャラリーもモバイルで素晴らしく見える必要があります。SeedProdの組み込みWooCommerceブロックは、製品画像ギャラリーをデフォルトでレスポンシブにするため、個別のギャラリープラグインは必要ありません。

SeedProdでWooCommerce製品ページを作成すると、画像は自動的にあらゆる画面サイズに合わせてスケーリングされます。ドラッグアンドドロップエディターで直接カラムレイアウトと画像サイズをカスタマイズできます。

ステップバイステップのウォークスルーについては、WooCommerceで製品画像ギャラリーを作成するガイドを参照してください。

WordPressギャラリーのレスポンシブに関するFAQ

WordPressで画像をレスポンシブにする方法

WordPressは自動的に画像にsrcsetおよびsizes属性を追加します。これにより、ブラウザは画面幅に基づいて読み込む画像サイズを判断します。ほとんどのサイトでは、最新のテーマを使用していれば、これはそのまま機能します。画像がコンテナからはみ出している場合は、CSSにmax-width: 100%; height: auto;を追加すると修正されます。

WordPressでギャラリーがクリックできないのはなぜですか？

ほとんどのギャラリープラグインは、リンク動作がないことをデフォルトとしているため、画像はクリックしても開きません。SeedProdでは、ギャラリーブロックの設定に移動し、[Link To]オプションを[Media File]または[Custom URL]に変更します。Envira Galleryでは、画像を clickable にするには、[Lightbox]タブでライトボックスを有効にします。

プラグインなしでデフォルトのWordPressギャラリーをレスポンシブにできますか？

はい。ネイティブのWordPressギャラリーブロックは、srcsetを使用してレスポンシブ画像を既に出力しており、ほとんどの最新のテーマはスケーリングを自動的に処理します。画像がモバイルでまだ壊れている場合は、カスタムCSSとしてmax-width: 100%; height: auto;を追加すると、通常はプラグインなしで修正できます。

レスポンシブギャラリーはサイトを遅くしますか？

ギャラリープラグインで遅延読み込みを有効にしている場合は、そうではありません。Envira Galleryでは、[Configuration]タブで遅延読み込みをオンにします。SeedProdギャラリーもデフォルトで遅延読み込みをサポートしています。画像を200KB未満に保ち、WebP形式を使用すると、読み込み時間がさらに短縮されます。

WordPressギャラリーをレスポンシブにすることで、写真はすべてのデバイスで素晴らしく見え、サイトのSEOも同時に向上します。このガイドのどちらの方法でも、数分でモバイル対応のデザインが実現します。

SeedProdで始めましょう。レスポンシブギャラリーを今日から公開しましょう。

ついでに、以下のWordPressチュートリアルも役立つかもしれません。

• WordPressのページと投稿にギャラリーを追加する方法
• ランディングページ vs マイクロサイト：あなたのブランドに最適なのはどちらか
• WordPressの投稿抜粋をカスタマイズする方法（コードなし）
• WordPressにツイートボタンを追加する方法（3つの方法）

お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。