WordPressでは、様々な方法でサイトに画像を追加することができます。その中でも最も効果的な方法のひとつが、画像を列や行に分けて追加する方法です。これにより、画像を整理された形で表示することができます。

このブログ記事では、WordPressの画像をカラムと行で表示する複数の方法を紹介します。

• Method 1: カラム・ブロックの使用 (フルマニュアルコントロールとカスタムレイアウトに最適）
• Method 2: ギャラリー・ブロックの使用 (最小限のスタイリングでシンプルな画像グリッドに最適)
• 方法3： ギャラリーベルグ・ブロックの使用 (ライトボックスやカスタマイズが可能な高度なレイアウトに最適)
• 方法4： Tablebergプラグインの使用 (価格表、スケジュール表、商品表などの構造化されたイメージグリッドに最適です。）

美しいテーブルを作る
ブロックエディター付き

無料体験

プロになる

方法1：列ブロックを使う

WordPressにはデフォルトのカラムブロックがあります。その中に画像ブロックを含む多くのブロックを追加することができます。ここにガイドがあります。

ステップ01: Gutenbergカラムブロックを追加する

探す カラムブロックを追加 をクリックしてください。

列ブロックに追加したい列のバリエーションの数を選択します。このチュートリアルでは、50/50のカラムバリエーションを選択します。

ステップ 02: 画像ブロックを列ブロックに追加する

カラムブロックの中に他のGutenbergブロックを入れることができます。今すぐ、 click the plus (+) icon カラム内の検索と 画像ブロックを追加する to it.

メディアライブラリまたはローカルドライブから画像を追加できます。お好きなようにどうぞ。

ステップ03：カラムブロック内の画像ブロックをスタイライズする

画像を追加したことがわかります。ツールバーの整列オプションを使って画像を中央に配置することができます。エッジサークルのアイコンを使って画像のサイズを変更します。最後に、「スタイル」タブのオプションを使用して、画像をさらにスタイル化することができます。

同じように、もう一方の列にも画像を追加する。

方法2：ギャラリーブロックを使う

WordPressにはデフォルトのギャラリーブロックがあり、同じブロックレイアウトで複数の画像を追加することができます。

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

上記の方法と同様に、検索して エディタにギャラリーブロックを追加する.

の画像をアップロードできるようになります。 ローカルドライブ または Media Library.このチュートリアルでは、メディアライブラリから画像をアップロードします。

ステップ 02: 画像の選択とアップロード

画像を選択する ギャラリーブロックにアップロードしたい画像を選択します。画像はいくつでも選択できます。完了したら 新しいギャラリーを作成ボタンをクリックします。.

各画像にキャプションを追加することもできます。何も付けなくても問題ありません。を押してください。 ギャラリー挿入ボタン at the end.

ギャラリーに画像が追加されていることがわかります。次に、画像ブロックをカスタマイズします。 設定 そして スタイルタブ on the right sidebar.

願わくば、あなた一人でやってほしい。

方法3：Gallerybergプラグインを使用する

画像を列や行に表示する、より柔軟で視覚的に洗練された方法をお探しなら ギャラリーバーグ プラグインは素晴らしい選択です。Gutenbergネイティブのギャラリーブロックプラグインです。 複数のレイアウトオプション - タイル、石積み、ジャスティファイド、正方形など、すべて内蔵されています。 ライトボックス をサポートしている。

ステップ1：Gallerybergプラグインをインストールする

WordPressのダッシュボードに移動し、次の場所に移動します。 プラグイン > 新規追加.その後、"Galleryberg "を検索し、プラグインをインストール＆有効化してください。

ステップ 2: ギャラリーバーグブロックを追加する

画像を表示したいページまたは投稿を開きます。次に + ボタンをクリックし、"ギャラリーバーグ"ブロックをこれをページに追加します。

ステップ 3: 画像のアップロードまたは選択

メディアライブラリを使用するか、新しい画像をアップロードします。ドラッグ＆ドロップで画像を並べ替えることができます。

ステップ4：レイアウトの選択

ブロック設定パネルから、希望のレイアウトを選択します：

• タイル:等間隔のグリッドレイアウト（行と列に最適）
• 石工:Pinterestスタイルのスタックレイアウト
• ジャスティファイド:同じ高さで整然と並んだ列
• 正方形:均一なグリッド表示のための完璧な正方形

ステップ5：ライトボックスオプションを有効にする

ブロック設定のサイドバーで ライトボックスを有効にする オプションがある。

画像は、スムーズなトランジション、ズーム効果、スライドナビゲーション付きのポップアップで開きます。

ステップ5：カスタマイズして公開する

• カラム数を設定する（1～8）ブロック設定のサイドバーで、下にスクロールして ライトボックス セクションを参照されたい。
• をトグルする。 ライトボックスを有効にする オプションがある。
• 画像は、スムーズなトランジション、ズーム効果、スライドナビゲーション付きのポップアップで開きます。
• スペーシング、キャプション、ボーダーなどの調整
• インタラクティブな画像プレビューのためのライトボックスを有効にする

Click 出版 または Update あなたのギャラリーは、きれいでレスポンシブな行と列で表示されます。

方法4：Tablebergプラグインを使用する

TableBergは使いやすいテーブルビルダープラグインです。テーブルセルに様々なカスタムブロックを追加して、多機能なテーブルを作成することができます。このセクションでは、WordPressで画像を追加する方法として テーブルバーグ プラグイン

ステップ01: Tablebergプラグインのインストールと有効化

こちらへ プラグイン > 新規プラグインの追加. Type テーブルバーグ in the search box. インストール そして アクティブ化 プラグインが下に表示されたら

ステップ02: Tablebergブロックを投稿/ページに追加する

このプラグインには、TableBergという名前のGutenbergブロックが付属しています。を見つけて タベルバーグ・ブロック を編集者に送る。

テーブルの行番号と列番号を定義する。このプロセスはデフォルトのテーブルブロックと同様です。自分でやってみましょう。

ステップ03：画像ブロックを見つけてテーブルに追加する

テーブルの準備ができたでしょうか。画像を追加したいセルを選択してください。セルを選択すると プラス（＋）アイコン が表示される。

プラス（＋）アイコンをクリック.イメージブロックが表示されます。 イメージブロックを押す.

ローカルドライブまたはメディアライブラリから画像をアップロードするオプションが表示されます。お好きなオプションをクリックして画像をアップロードしてください。

ステップ 04: アップロードした画像をスタイライズする

うまくいけば、画像はすでにテーブルにアップロードされています。右サイドバーのスタイルタブに来てください。デュオトーン、ボーダー、半径など、画像ブロックをスタイリングするためのオプションが見つかります。

このプラグインを使えば、WordPressのテーブルに画像をアップロードすることができます。調べる WordPressでチームメンバーセクションを作成する方法 カラムブロックを使って。

最後のコメント

ウェブサイトをうまく維持するためには、コンテンツをさまざまな方法でアップロードし、提示する必要がある。同じコンテンツでも、投稿やページによって見せ方を変えなければならないこともある。そして、それは画像ブロックも同じです。

このチュートリアルを読めば、WordPressで様々な方法で画像ブロックを追加し、コンテンツにバリエーションを持たせることができるようになるでしょう。

<p>The post How to Display WordPress Images in Columns & Rows first appeared on Tableberg.</p>

One effective way to showcase images is by placing them side by side. This technique is particularly helpful in comparing multiple products, presenting before and after images, and telling a story.

In this article, we’ll show you three easy ways how to put images side by side in WordPress.

• 方法1: ギャラリー・ブロックの使用
• 方法2: 列ブロックを使う
• 方法3: Tablebergブロックの使用

美しいテーブルを作る
ブロックエディター付き

無料体験

プロになる

Method One: Using the Gallery Block

WordPress comes with the default Gallery block. You can present images side by side with the block in the following ways.

Step 01: Add the Gallery Block to WordPress

Simply open a post or page. Find the Gallery block in the Gutenberg block library by pressing the プラス（＋）ボタン. Add it to the editor.

をクリックする。 Upload button to add fresh images from your local storage to the side. Or, you can upload them from your existing files by clicking the Media Library ボタンをクリックする。

For this tutorial, we’ll upload images from the Media Library. Select the images you want to add. Hit the Create a new gallery button at the end.

Once images are added to the editor, you’ll see them appearing side by side. Next, you can customize the settings and stylizations of the Gallery block using the respective options on the right sidebar.

Note: If your images are not displayed side by side by default, select the entire block by clicking the Gallery icon on the toolbar. Specify the column numbers on the right sidebar.

Method Two: Using the Columns Block

カラムブロックでは、以下のことが可能です。 コンテンツを複数の列に分ける.他のブロックを追加して、各列に異なるタイプのコンテンツを追加することができます。

Step 01: Add the Column Block to Your Site

を追加する。 列ブロック to your editor following the same method described above.

Select the column layout as you like. You can display an equal number of images side by side, corresponding to the number of columns you add. We’ve selected the two-column layout for the block.

を追加する。 イメージブロック by hitting the プラス（＋）ボタン within the 列ブロック.

Upload an image the same way we showed you above.

Note: As this is the Image block, you can add only one image, unlike the Gallery block.

In the same way, add the イメージブロック again to the second column.

You can see the second image has appeared next to the first one. You can now add alternative texts and other settings for the images one by one.

方法3：Tablebergブロックを使う

テーブルバーグ is a block-based table-builder plugin. Using it, you can also create columns and display images side-by-side. Follow the steps explained below after installing そして activating the plugin.

Step 01: Add the TableBerg Block

プラグインには テーブルバーグ・ブロック. Add it to your editor.

You may select multiple rows if you want. But we’ll explain today’s tutorial with a single row and multiple columns.

TableBerg allows you to add different types of blocks to the cells of the table. Add the イメージブロック to the table cells.

Upload an image to the table cell the same way we showed you in the above two methods.

Keep adding images to other columns of the table using the イメージブロック. Hope you can do it alone.

See the image below. We have displayed three images side by side within the table created with the TableBerg block.

# Remove the table border

You can see a border around the table. To remove it, click the TableBerg icon three times on the toolbar. Go to Styles tab > Border on the right sidebar. Put the value zero (0) to define the table border size.

Thus, you can display images side by side on WordPress websites.

結論

Showing images side by side is highly advantageous, whereas visual comparison between different products, options, features, and variations is essential. Hope you can do it alone today with this tutorial.

You can do more on your site by creating different types of tables using the TableBerg plugin. Take a look at how to create Amazon product comparison table in WordPress.

<p>The post How to Put Images Side by Side in WordPress (Three Ways) first appeared on Tableberg.</p>