私が初めてWordPressサイトにギャラリーを追加した時、デスクトップでは問題なく表示されましたが、モバイルでは完全に混乱していました。その時、WordPressのギャラリーをレスポンシブにすることの重要性を知りました。
このガイドでは、サイトの表示速度を落とすことなく、どんな画面サイズにも自動的に調整されるモバイルフレンドリーなギャラリーを作成するために私が使っている最も簡単な2つの方法をご紹介します。商品写真、ポートフォリオ画像、ブログビジュアルなど、これらのステップを踏むことで、どこでも見栄えのするギャラリーができ、SEOにも役立ちます。
WordPressギャラリーをレスポンシブにする理由
現在、インターネットアクセスの60％近くがスマートフォンからのアクセスです。そのため、ウェブサイトに新しい機能や特徴を追加する際には、モバイルデバイスで正しく動作することを確認する必要があります。
タブレット、スマートフォン、ラップトップ、デスクトップのいずれであっても、新しいフォトギャラリーのレイアウトは、それぞれのスクリーンサイズに適応できる柔軟性が必要です。そうすることで、ウェブサイトの訪問者はより良いユーザー体験を得ることができます。
さらに重要なのは、レスポンシブデザインは検索エンジン最適化（SEO）にとって極めて重要だということだ。
Googleのような検索エンジンは、検索結果であなたのサイトをランク付けする際、モバイルユーザビリティを考慮します。したがって、あなたのサイトにレスポンシブギャラリー画像を追加することで、より良いランキングを見ることができ、ひいてはあなたのスモールビジネスにより多くのオーガニックトラフィックを誘導することができます。
結局のところ、WordPressのギャラリーをレスポンシブ対応にする方法を学ぶことは、あなたのビジネスを成長させる上で大いに役立ちます。このことを念頭に置いて、ここでは2つの簡単な方法を紹介します。
モバイルフレンドリーなWordPressギャラリーの作り方：2つの簡単な方法
WordPressサイトにレスポンシブイメージギャラリーを追加する2つの方法をご紹介します。まず、ウェブデザインを向上させるための豊富な機能を備えた強力なWordPressページビルダーを使用します。次に、市場で最高のレスポンシブWordPress画像ギャラリープラグインを使用します。
下記のどちらかの方法をクリックして、新しいギャラリーを追加する手順をご覧ください。
方法1.SeedProd Advanced Gallery WordPress Blockを使用する。
最初のソリューションでは シードプロードを使います。ドラッグ＆ドロップのページビルダー、レスポンシブテンプレート、カスタマイズ可能なWordPressブロックで、HTML、PHP、カスタムCSSコードなしでウェブサイトをカスタマイズする最も簡単な方法です。
SeedProdの ワードプレスブロックを使って、WordPressテーマ、ページ、ウィジェット対応エリアにギャラリーを追加することができます。ドラッグ、ドロップ、クリックするだけの簡単操作で、どんな画面サイズにも対応するギャラリーを作成できます。
SeedProdの使いやすい機能には次のようなものがある：
- WordPressテーマビルダー
- 既製ウェブサイト・キット
- ランディングページ・ビルダー
- レスポンシブ・ランディングページ・テンプレート
- 4つのページモード：近日公開、メンテナンス、404、ログイン
- メールマーケティング統合
- 加入者管理
- WooCommerceのサポート
- アクセス制御
- ダイナミックテキスト
- ドメインマッピング
- そしてもっと。
SeedProdを使用してレスポンシブWordPressギャラリーを作成するには、以下の手順に従ってください。
ステップ1.SeedProdのインストールとアクティベート
まず SeedProdのウェブサイトにアクセスし、プラグインをダウンロードしてください。このチュートリアルに従うには、SeedProdのプロバージョンを入手することをお勧めします。
次に、SeedProdアカウントにログインし、ダウンロードタブをクリックしてプラグインファイルをコンピュータにダウンロードします。同時にライセンスキーをコピーすることもできます。
さて、あなたのWordPressウェブサイトにプラグインをアップロードし、有効にします.このステップで助けが必要な場合は、以下のガイドに従ってください。 WordPressプラグインのインストール(新しいタブで開きます）。
SeedProdをインストールしてアクティベートした後、WordPressの管理画面からSeedProd " Settingsに移動し、先ほどコピーしたライセンスキーを貼り付けます。Verify Keyボタンをクリックし、次のステップに進んでください。
ステップ2.WordPressテーマまたはランディングページを作成する
このプラグインはドラッグ＆ドロップ・ビルダーで2通りの使い方ができるので、次のステップはWordPressテーマかランディングページのどちらかを作ることだ。
テーマビルダーは、開発者を雇うことなくカスタムWordPressテーマを作成する最も簡単な方法です。現在のテーマを、ウェブサイトのあらゆる部分に対応する完全にカスタマイズ可能なテンプレートに置き換えることができます。
また、ランディングページビルダーは、WordPressのテーマを変更することなく、個々のページを視覚的に構築する素晴らしい方法です。
以下のステップバイステップのチュートリアルに従うことができます。 WordPressテーマの作成そして ランディングページの作成をご覧ください。次に、テンプレートを選択し、初期ページを作成した後、このガイドのステップ3の手順に従って、サイトにレスポンシブギャラリーを追加することができます。
注：このガイドでは、Theme Builderの方法を使用します。
ステップ3.高度なギャラリーWordPressブロックを追加する
このステップでは、SeedProdで任意のページを開き、ドラッグアンドドロップページビルダーでカスタマイズします。例えば、Theme BuilderダッシュボードからHomepageテンプレートを開き、フロントページにレスポンシブギャラリーを追加することができます。
ランディングページを作成する場合は、SeedProd " ランディングページに 行き、選択したデザインの編集をクリックします。
デザインを開くと、下のようなレイアウトが表示されます：
左側にはデザインにコンテンツを追加するためのブロックとセクションがあり、右側にはライブプレビューがあります。プレビュー上で任意の要素をクリックすると、左側にその設定が表示され、あなたが行った変更はリアルタイムで自動的に行われます。
使用できるブロックには以下のようなものがある：
- ソーシャル共有ボタン
- ソーシャルメディアのプロフィール・アイコン
- ビデオブロック（YouTubeまたはVimeoビデオへのリンク）
- 証言カルーセル
- お問い合わせフォーム
- さらに
このガイドでは、Advanced Galleryブロックを使用します。
単一のレスポンシブWordPressギャラリーを作成する
例えば、あなたのポートフォリオから最高の例を表示するために、単一のレスポンシブギャラリーを追加したいとします。これを行うには、左側のパネルからAdvanced Galleryブロックを選択し、ページデザインにドラッグします。
そこからギャラリーのオプションを開き、ギャラリーがあなたの望むように見えるまで設定を調整することができます。あなたは、列番号と間隔を変更したり、ギャラリーを画像ファイル、カスタムリンク、またはなしにリンクすることができます。
例えば、メディアファイルオプションは、訪問者がクリックすると、ギャラリーをレスポンシブなフルサイズのimgライトボックスに表示します。
また、画像のサムネイルの縦横比を変更したり、画像サイズをサムネイル、中、大に設定することもできます。
各ギャラリー画像に情報を追加したいですか？オーバーレイ]タブをクリックして、各画像に背景オーバーレイカラー、ホバー効果、タイトル、説明を追加することができます。
ウェブサイト訪問者が画像の上にマウスを置くと、画像が暗くなり、選択した説明が表示されます。
複数のダイナミックなWordPressギャラリーを作成する
また、Advanced Galleryブロックはウェブサイト上の他のページでも使用することができます。例えば、ポートフォリオページを作成し、ユーザーが特定のパラメータでフィルタリングできる複数のイメージギャラリーを追加することができます。
そのためには、Typeドロップダウンメニューをクリックし、Multipleオプションを選択します。すると、好きなだけギャラリーを追加することができます。
より多くのカスタマイズオプションが必要な場合は、[詳細設定]タブをクリックすることができます。そこから、フィルタータブの色、タイポグラフィ、影、画像の境界線などを変更できます。
WordPressギャラリーのレスポンシブ化
SeedProdで作成したギャラリーは、デフォルトでレスポンシブに対応しています。しかし、モバイルプレビューオプションでギャラリーのモバイルフレンドリーをチェックすることができます。
下のツールバーからモバイルプレビューアイコンをクリックすると、ギャラリーがモバイルデバイスでどのように見えるかを見ることができます。
その後、デザインを編集して、どのデバイスでも美しく見えるようにすることができます。
Device Visibilityタブでは、モバイル体験を向上させるために、モバイルまたはデスクトップで特定の要素を非表示にすることもできます。
イメージギャラリーが完成したら、ページ右上の保存ボタンをクリックします。
ステップ 4.レスポンシブイメージギャラリーを公開する
これでギャラリーを公開する準備ができました。これを行うには、Theme Builderダッシュボードに戻り、"Enable SeedProd Theme "トグルを "Yes "にします。
または、ランディングページの場合は、[保存]ボタンのドロップダウン矢印をクリックし、[公開]をクリックします。
これでレスポンシブギャラリーをプレビューして、どのように見えるかを確認することができます。
方法2.Envira GalleryWordPressPluginを使用する。
次の方法では、Envira Galleryを使ってレスポンシブなWordPressギャラリーを作ります。他のWordPressギャラリープラグインとは異なり、Envira Galleryは高速で、レスポンシブで、軽量でありながら、幅広い使いやすい機能を提供しています。
例えば、画像のリサイズオプション、スライドショー、柔軟なレイアウト、複数の画像ソースを提供します。
まず、WordPressウェブサイトにEnvira Galleryプラグインをインストールし、有効化します。次に、Envira Gallery " Add Newにアクセスして、新しい画像ギャラリーを作成します。
ギャラリーに画像を追加するには、以下のいずれかのボタンをクリックしてください：
最初のオプションでは、コンピューターから画像ファイルをアップロードすることができ、2番目のボタンでは、WordPressのメディアライブラリから画像を選択することができます。
画像を選んだら、ドラッグ＆ドロップで並び替えができます。また、目のアイコンをクリックすると、特定の画像を下書きモードにし、公開ギャラリーから非表示にすることができます。
さらに、鉛筆アイコンをクリックすると、画像のメタデータを編集できます。例えば、画像のタイトル、altテキスト、キャプションを変更したり、添付ページのsrc URLを編集することができます。
次に、Configurationタブをクリックします：
- ギャラリーの列番号を変更する
- 画像の遅延読み込みを有効にする
- ギャラリーの説明を表示
- キャプションとタイトルの表示
- ピクセルサイズ、画像の切り抜き位置、間隔を設定する。
- ギャラリーテンプレートの変更
ライトボックスタブでは、ユーザーが画像をクリックしたときに、レスポンシブなライトボックスを有効にすることができます。また、ライトボックスのテーマの変更、キャプションの表示、トランジションエフェクトの追加などの設定を調整することもできます。
上記の設定の他に、Envira Galleryにはモバイルギャラリー設定タブがあります。このパネルにより、モバイルデバイス用に特定の画像を自動的に生成することができます。
モバイル画像のサイズや行の高さをカスタム設定したり、モバイルライトボックスの設定を微調整することもできる。
ギャラリーのデザインに満足したら、右上の「公開」ボタンをクリックします。
モバイルフレンドリーギャラリーをウェブサイトに追加するには、投稿またはページを作成または編集し、WordPressブロックエディタ内のプラス（+）アイコンをクリックして新しいブロックを追加します。
Envira Galleryブロックが表示されるまで検索し、それをクリックしてページに追加します。
ドロップダウンメニューから、WordPressエディタに埋め込むために作成したギャラリーを選択します。
更新]または[公開]ボタンをクリックして、ギャラリーをウェブサイト上で公開することができます。
注：まだクラシックなWordPressエディタを使用している場合は、Envira Galleryショートコードをコピーして、投稿またはページ内に貼り付けることができます。
次に、あなたのページをプレビューして、新しいレスポンシブWordPressギャラリーがどのように見えるか見てみましょう。
よくある質問WordPressギャラリーをレスポンシブにする方法
WordPressギャラリーをレスポンシブにすることで、あなたのサイトのSEOとユーザーエクスペリエンスを向上させながら、あなたの写真がどのデバイス上でも美しく見えることを保証します。完全なドラッグアンドドロップソリューションのSeedProdを使用する場合でも、高度なギャラリー機能のEnvira Galleryを使用する場合でも、どちらの方法でも数分でモバイル対応のデザインを提供します。
以下のWordPressチュートリアルもお勧めです：
- WordPressのページと投稿にギャラリーを追加する方法
- ランディングページとマイクロサイト：ブランドにとって最適なのはどちらか
- WordPressの投稿抜粋をカスタマイズする方法（コードなし）
- WordPressにツイートボタンを追加する方法（3つの方法）
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
