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

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

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

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

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

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

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

画像を横並びに配置することで、より興味深いレイアウトを作成し、WordPressウェブサイトの視覚的な魅力を高めることができます。

並べて表示された画像は、ウェブサイトのスペースを効率的に使用するのに役立ち、限られた領域により多くのビジュアルを収めることができます。

例えば、写真ウェブサイトをお持ちの場合、画像を横並びに配置することで、 WordPress ページを最大限に活用し、美しく写真をディスプレイできます。

さらに、WordPressブログでユーザーに2つの画像を比較させたい場合があります。それらを並べて配置すると、人々が画像間の違いを分析し、理解しやすくなります。

とはいえ、画像を隣り合わせに配置する簡単な方法を2つご紹介します。最適な方法は、あなたのニーズによって異なります。

ほとんどの簡単なケースでは、組み込みのWordPressブロックエディターが完璧に機能します。追加機能を持つより高度な写真ギャラリーを作成したい場合は、プラグインを使用する方が良い選択です。

下のリンクを使用して、希望する方法にジャンプできます。

• Method 1: Add Images Side by Side in WordPress Using the Block Editor
• Method 2: Place Images Side by Side in WordPress Using a Plugin (Easy Way)
• ボーナス：WordPressで画像を配置する
• 画像を横並びに追加することに関するよくある質問

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

Gutenbergブロックエディターを使用して画像を横並びに追加する簡単な方法を探しているなら、この方法が最適です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

標準のギャラリーブロックはシンプルなレイアウトに最適ですが、美しいライトボックス、アルバム、ソーシャル共有オプションなどの高度な写真ギャラリーを作成したい場合は、プラグインが必要です。

この目的には、Envira Galleryをお勧めします。これは市場で最高のWordPressギャラリープラグインであり、私たちの経験では、強力な機能を提供しながら信じられないほど使いやすいです。

その機能の詳細については、Envira Galleryのレビューをご覧ください。

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

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

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

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

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

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

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

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

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

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

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

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

画像のタイトルを変更し、代替テキストを入力できます。これは、WordPressサイトの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でもフォローできます。