WordPressの画像を列と行で表示する方法

画像などのビジュアルコンテンツが、コンセプトや物語を伝える上で強力な役割を果たすことは、もはや周知の事実だ。テキストコンテンツだけでは読者を魅了できないことも多い。そのため、ブログ記事やページに関連する画像を組み込むことが必須となっている。

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ネイティブのギャラリーブロックプラグインです。 複数のレイアウトオプション - タイル、石積み、ジャスティファイド、正方形など、すべて内蔵されています。 ライトボックス をサポートしている。