WordPressで画像やテキストを横並びにする方法　カラムブロックの使い方 | WordPress（ワードプレス）テーマ＆プラグイン販売コミュニティコムショップ

WordPress（ワードプレス）で投稿を作成する際、「テキストや画像を横並びに表示させたい」ということはありませんか？

Gutenberg（ブロックエディター）では「カラムブロック」というブロックを使うと簡単にコンテンツを横並びに表示させることができます。

カラムブロックとは

Gutenberg （ブロックエディター）では、見出しブロックや段落ブロック、画像ブロックなど、さまざまな機能を持つブロック要素を積み重ねて投稿を作成していきます。

カラムブロックは、ひとつのブロックを複数に分割できる機能をもつブロックです。画像を横に並べたり、画像とテキストを横並びに表示させたりできるので、投稿のレイアウトの幅が広がります。

カラムブロックでできること

カラムブロックを使うことで、以下のように複数のコンテンツを並列に表示させることができます。
例えば商品紹介のページでは、大きな画像を一枚ずつ画像ブロックで挿入するよりも、複数の画像が並列に並んでいた方が一度に多くの商品をユーザーに見せることができるので良いかもしれません。

こちらは一つのブロックを均等な幅の三つの画像ブロックに分けて表示しています。

また、画像とテキストを並列に表示させることもできます。商品の画像とその説明などを記載するのにも良いですね。

こちらは一つのブロックを「右側広めの2カラムの画像ブロック」と「段落ブロック」に分けて表示しています。

カラムブロックの使い方

投稿画面でカラムブロックを作成する

それではカラムブロックの使い方を紹介します。
投稿画面を開き、「ブロックの追加」から「レイアウト要素」を表示します。その中の「カラム」を選択してください。

レイアウトオプションの選択画面が表示されます。ここで任意のカラム数や幅の大きさを選び、クリックします。この画面では3カラムまでしか表示されていませんが、最大6カラムまで設定することができます。その手順は後ほど紹介します。

ここでは、均等な幅の2カラムを選択します。

カラムの中にコンテンツを追加する

一つのブロックの中に2つの均等なブロックが生成されました。
各ブロックの中には、段落ブロックや画像ブロックなど任意のブロックを追加することができます。

カラムブロックの中の「+」（プラス）をクリックしてブロックを追加しましょう。

左側のカラムに画像ブロックを、右側のカラムに段落ブロックを追加してみます。それぞれのカラムの「+」（プラス）をクリックし、表示されたブロックメニューの中から画像ブロック、段落ブロックをそれぞれ選択します。

画像ブロックを選択した場合は、画像挿入方法の選択画面が表示されローカル（自分のPCのフォルダ）からアップロードすることも、WordPress（ワードプレス）に既にアップロードしているメディアライブラリ内の画像から選択することもできます。これは通常の画像ブロックの使い方の手順と同じです。通常の画像ブロックと異なる点は、画像がカラムの幅に縮小されて挿入される点です。

段落ブロックを選択した場合も同様で、通常の段階ブロックの編集手順と同じです。カラム内に直接テキストを打ち込むことができます。