WordPressで画像を簡単に横並びにする方法

ブログを始めたばかりの頃は、画像をきれいに並べるのに、楽しむよりもイライラすることが多かったものです。

しかし、画像を横並びに配置することは、見た目を良くするだけでなく、読者がコンテンツをより理解し、楽しめるようにするのに役立つことをすぐに実感しました。

時間が経つにつれて、このプロセスを簡単にするためのいくつかの簡単なテクニックを習得し、ビジュアルを隣り合わせに配置することは、美しいフォトギャラリーを作成するための私たちのお気に入りの方法の1つになりました。

このチュートリアルでは、画像を横並びで表示するための2つの簡単な方法を紹介します。1つはWordPressの組み込みブロックエディターを使用する方法、もう1つはEnvira Galleryプラグインを使用する方法です。

これにより、コンテンツレイアウトを改善し、訪問者にとってより魅力的なエクスペリエンスを作成できるようになります。

WordPressで画像を横並びに追加する理由

画像を横並びに配置すると、ビジュアルをより明確かつ構造的に提示できます。コンテンツの理解度が向上し、ページが見やすくなります。

• より優れたビジュアルストーリーテリング：ステップ、進捗状況、または関連するアイデアを、ページ全体に分散させるのではなく、1つのビューで表示できます。これにより、コンテンツを簡単に追跡し、一目で理解できるようになります。
• 簡単な比較：2つ以上の画像を並べて配置することで、ユーザーはスクロールせずに詳細、違い、または結果をすばやく比較できます。
• ページスペースの節約：画像を縦に積み重ねてページを長くする代わりに、1つの行に複数のビジュアルを収めることができ、レイアウトをすっきりとコンパクトに保つことができます。
• デザインとレイアウトの向上：横並びの画像は、大きなテキストセクションを分割し、ページをよりバランスの取れた、モダンで視覚的に魅力的なものにします。
• 多くのユースケースでうまく機能します：特に、製品比較、ビフォーアフター画像、チュートリアル、写真ポートフォリオなど、ビジュアルが最も重要視される場合に役立ちます。

さて、画像を隣り合わせに配置する簡単な方法を2つご紹介します。お好みの方法にジャンプするには、以下のリンクを使用してください。

方法1：ブロックエディターを使用してWordPressで画像を横並びに追加する

Gutenberg ブロックエディター を使用して画像を簡単に並べて配置したい場合は、この方法が最適です。

ブロックエディターには、画像を簡単に縦横に表示できるギャラリーブロック機能があります。

ステップ1：ギャラリーブロックを追加する

まず、新しい投稿/ページを作成するか、既存の投稿/ページを編集してコンテンツエディターを開く必要があります。そこに到達したら、画面左上の「ブロックを追加」（+）ボタンをクリックしてブロックメニューを開きます。

ここから、ギャラリーブロックをページまたは投稿に配置して追加するだけです。

ステップ2：画像をアップロードする

その後、「アップロード」ボタンをクリックして、コンピューターからギャラリーブロックに簡単に画像を追加できます。

「メディアライブラリ」ボタンをクリックして、WordPress の メディアライブラリ から画像を選択することもできます。

ご覧のとおり、ギャラリーブロックに2つの画像を追加しましたが、WordPressはそれらを自動的に横並びに配置しました。

3つ目の画像を追加することにした場合は、上部にあるブロックツールバーの「追加」ボタンをクリックする必要があります。

これによりメディアライブラリが開かれ、ギャラリーブロックに3つ目の画像を追加できます。そうすると、WordPressが画像を自動的に横並びに配置するためにリサイズしたことがわかります。

ステップ3：ギャラリーの列を調整する

ただし、ギャラリーブロックに4枚目の画像を配置することにした場合、他の画像のすぐ下に配置されます。

これを修正するには、ギャラリーの列数を変更できます。この設定は、各行にいくつの画像が横並びで表示されるかを制御します。

たとえば、画像を横に2枚、その下にさらに2枚配置したい場合は、列を2に設定できます。

画像をトリミングして揃えたり、画像サイズを調整したり、ブロックパネルから別のページにリンクしたりすることもできます。

詳細な手順については、WordPressで画像ギャラリーを作成する方法に関する初心者向けガイドをご覧ください。

ステップ4：変更を公開する

完了したら、「更新」または「公開」ボタンをクリックして変更を保存することを忘れないでください。

これで、ウェブサイトにアクセスして、画像を横並びで表示できます。

方法2：プラグインを使用してWordPressで画像を横並びにする（簡単な方法）

組み込みのギャラリーブロックはシンプルなレイアウトに最適ですが、ライトボックス、アルバム、ソーシャル共有オプションなどの機能を持つ高度なフォトギャラリーを作成するには、プラグインが必要です。

このためには、Envira Galleryをお勧めします。WordPress.orgで1,600件以上のレビューから4.7/5つ星評価を得ており、常にトップクラスのWordPressギャラリープラグインとして評価されています。

私たちの経験では、初心者でも非常に使いやすいです。ドラッグアンドドロップビルダーは、強力な機能を提供しながらも、物事をシンプルに保ちます。事前に構築されたテンプレートにより、クリーンで洗練されたギャラリーをより迅速に作成することもできます。

全体として、ビジュアルをプロフェッショナルな方法で表示したい写真家、アーティスト、ビジネスにとって優れた選択肢です。機能の詳細については、当社の Envira Galleryレビューをご覧ください。

ステップ1：Envira Galleryのインストールと有効化

まず、Envira Gallery プラグインをインストールして有効化する必要があります。詳細については、WordPress プラグインのインストール方法 に関するステップバイステップ ガイドをご覧ください。

ステップ2：新しいギャラリーを作成して画像をアップロードする

有効化したら、WordPressダッシュボードから Envira Gallery » 新規追加 ページに移動してください。

そこに着いたら、新しいギャラリーにタイトルを付ける必要があります。私たちは「サンプルギャラリー」と名付けました。

その後、「コンピューターからファイルを選択」ボタンをクリックして、使用したい画像をコンピューターからアップロードします。

メディアライブラリから画像をアップロードするには、「他のソースからファイルを選択」ボタンをクリックします。

ステップ3：画像のメタデータを編集する（オプション）

画像をアップロードしたら、ギャラリーセクションまでスクロールして表示します。

ここで、画像にタイトルと代替テキストを付けることができます。

タイトルは、ユーザーが画像をホバーしたときに表示され、ライトボックス（フルスクリーンポップアップ表示）の下にも表示されます。

タイトルと代替テキスト を編集するには、ギャラリー内の画像の「編集」ボタンをクリックします。

その後、画像のタイトルを変更し、代替テキストを入力できます。これは WordPress サイトの SEO に役立ちます。

タイトルが画像を表している場合は、アクセシビリティとSEOのために、画像のコンテンツと目的を説明する簡潔で説明的な代替テキストを作成してください。

完了したら、ウィンドウを閉じる前に必ず「メタデータを保存」ボタンをクリックしてください。

これを行わない場合、行った変更はギャラリーに保存されません。

ステップ4：ギャラリーを公開する

最後に、ページの上部までスクロールし、「公開」ボタンをクリックして、作成したばかりの画像ギャラリーを保存します。

その後、追加したいWordPressのページまたは投稿に移動します。

ステップ5：投稿またはページにEnvira Galleryブロックを追加する

そこに着いたら、画面左上の「ブロックを追加」（+）ボタンをクリックして、ブロックメニューを開きます。

ここから、Envira Galleryブロックをページ/投稿に検索して追加します。

次に、ブロック自体のドロップダウンメニューから作成したギャラリーを選択する必要があります。

ステップ6：レイアウトを設定して公開する

ギャラリー画像を横並びに表示するには、画面右側のブロックパネルに移動します。

ここから下にスクロールして「レイアウトを選択」セクションに移動し、ドロップダウンメニューから列数を選択します。これで、WordPressページに画像が横並びに表示されます。

ギャラリーのマージンを変更したり、美しいアニメーションフィルタリング効果（Isotopeとして知られる）を有効にしたり、ブロックパネルからライトボックス設定を構成したりすることもできます。

完了したら、「公開」または「更新」ボタンをクリックして設定を保存することを忘れないでください。

これで、ウェブサイトにアクセスして、画像が並べて表示されているのを確認できます。

ユーザーはこれで、任意の画像をクリックして、ライトボックスでフルサイズのバージョンを見ることができます。

さらに、ライトボックスを使用して画像をスクロールすることもできます。

ギャラリーにさらに画像を追加したい場合は、WordPressダッシュボードの Envira Gallery » All Galleries ページにアクセスしてギャラリーに戻ることができます。

そこに着いたら、ギャラリーの名前をクリックするだけで編集できます。

ギャラリーに加えた変更は、投稿、ページ、またはサイドバーのどこに配置しても表示されます。再度追加する必要はありません。

ボーナス：WordPressで画像を揃える（カラムブロックを使用した横並びを含む）

2つの画像を並べて配置する場合、それらは一致して、まとまりのある視覚的に魅力的な外観を作成する必要があります。

WordPressブログに単一の画像を追加する場合でも、視覚的なバランスを作成するためにコンテンツと配置を揃える必要があります。

WordPressブロックエディターでは、ブロックの上部にあるツールバーの「配置」ボタンをクリックすることで、画像を簡単に配置できます。

これにより、画像を右または左に移動したり、コンテナと同じ幅にしたり、画像がページ全体と同じ幅になるようにフル幅オプションを使用したりできるオプションが開きます。

横並び画像のためのカラムブロックの使用

ギャラリーブロック以外にも、カラムブロックは、特に個々の画像サイズや間隔をより細かく制御したい場合に、画像を横並びに配置するための優れたツールです。

他のコンテンツと画像を組み合わせる場合でも使用できます。

使用するには、カラムブロックを追加して、50/50分割などの目的のレイアウトを選択するだけです。次に、コンテンツに完全に一致する画像ブロックを追加します。

さらに、画像の周りにテキストを配置したり、グループブロックを使用したり、カバーブロックを追加したり、画像をまとめて、または個別に配置するために、さらに多くのことができます。

詳細については、WordPress ブロックエディターで画像を配置する方法 に関する初心者向けガイドをご覧ください。

画像を横並びに追加することに関するよくある質問

WordPressで画像を横並びにする方法について、読者からよく寄せられる質問をいくつかご紹介します。

WordPressで画像とテキストを横並びにするにはどうすればよいですか？

画像をテキストの隣に配置する最良の方法は、カラムブロックを使用することです。

まず、カラムブロックを追加し、50/50のようなレイアウトを選択します。次に、一方のカラムに画像ブロックを、もう一方のカラムに段落ブロックを追加できます。これにより、すっきりとした横並びレイアウトが実現します。

サイズの異なる画像を横並びにするのに最適な方法は何ですか？

ギャラリーブロックは均一なサイズの画像に適していますが、カラムブロックは異なるサイズに対してより柔軟性があります。これを使用して、70/30やその他のカスタムレイアウトを作成できます。

より高度な制御のために、Envira Gallery のようなプラグインを使用すると、さまざまな画像寸法をスムーズに処理できるカスタムグリッドを作成できます。

横並びにした画像は、モバイルデバイスでも横並びのままになりますか？

通常はなりません。ほとんどの最新のWordPressテーマはレスポンシブなので、デスクトップで横並びに配置された画像ブロックは、小さい画面では自動的に縦に積み重ねられます。

これは、電話で画像がはっきりと見えるように十分な大きさにするためであり、より良いユーザーエクスペリエンスを提供します。

このチュートリアルが WordPress で画像を並べて配置する方法を学ぶのに役立ったことを願っています。また、WordPress でブロックの高さと幅を変更する方法 に関するガイドや、WordPress の投稿やページにテーブルを追加する方法 に関するガイドも参照することをお勧めします。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。