記事の中で画像と文章を左右に並べたり、3つの特徴を横一列に並べたりしたいときは、ブロックエディターの「カラム」ブロックを使います。列の数と幅を選び、それぞれの列にブロックを入れていくだけで横並びのレイアウトが作れます。この記事では、カラムの挿入手順、列数・幅・縦方向の配置の調整、スマートフォンでの表示の設定、入れ子にするときの注意点とよくあるトラブルを説明します。
カラムブロックの仕組み
カラムは、入れ物と中身の2層でできています。
- 「カラム」ブロック（英語名 Columns）：列全体をまとめる入れ物です。列の数、列同士の間隔、スマートフォンでの並び方、全体の背景色などを決めます。
- 「カラム」ブロック（英語名 Column）：1つ1つの列です。列の幅、列ごとの背景色や余白、列の中の縦方向の配置を決めます。
日本語の画面ではどちらも「カラム」と表示されることが多いため、設定が見つからないときは選択中のブロックが入れ物か列かを確認します。画面下部のパンくず表示や、画面左上の「リスト表示」を使うと、階層が一目で分かります。列の中のブロックを選んでいる状態から入れ物を選びたい場合は、ブロックツールバーの左端にある「親ブロックを選択」のボタンが便利です。
カラムを挿入する手順
- 投稿の編集画面で、画面左上の「＋」（ブロック挿入ツール）をクリックし、「カラム」と検索して選びます。
- 空の段落で「/カラム」または「/columns」と入力して選ぶ方法もあります。
- 挿入すると、列の構成を選ぶ画面が表示されます。2列の均等割り（50 / 50）、片方を広くした2列（33 / 66、66 / 33）、3列の均等割り、中央を広くした3列（25 / 50 / 25）などから選びます。1列だけの構成もあります。
- 各列の中に表示される「＋」をクリックし、段落・画像・見出しなど入れたいブロックを追加します。
構成を選ぶ画面で「スキップ」を選ぶと、標準の2列で挿入されます。あとから列数や幅を変えられるので、迷ったら近いものを選んでかまいません。
列の数と幅を調整する
列の数
入れ物の「カラム」ブロックを選択し、右側の設定サイドバーにある「カラム数」の欄で列の数を変更します。列を減らすと、右側の列から削除され、その中のブロックも一緒に消えます。中身を残したい場合は、先に残したいブロックを別の列へ移動してから列数を減らしてください。誤って消してしまった場合は、すぐに「元に戻す」（Windowsなら Ctrl+Z）で戻せます。
列の幅
各列の幅は、列（中身側の「カラム」ブロック）を選択し、設定サイドバーの「幅」の欄で指定します。単位はパーセントのほか、ピクセルなどを選べます。
幅を指定しなかった列は、残りの幅を均等に分け合います。たとえば3列のうち1列だけを50パーセントにすると、残りの2列が残りを半分ずつ使います。合計が100パーセントを超えるように指定すると、表示が崩れたり、列が折り返されたりする原因になるため、パーセントで指定する場合は合計を意識してください。
列同士の間隔と余白
入れ物の「カラム」ブロックの「寸法」にある「ブロックの間隔」で、列と列の間のすき間を調整できます。テーマによっては、横方向と縦方向（スマートフォンで縦に並んだときの間隔）を別々に指定できます。列の内側の余白（パディング）は、各列の「寸法」で設定します。
縦方向の配置をそろえる
画像と文章を並べたとき、文章が画像の上端に寄ってしまい、バランスが悪く見えることがあります。この場合は縦方向の配置を変更します。
入れ物の「カラム」ブロックを選択してブロックツールバーの縦方向の配置ボタンを押すと、上揃え・中央揃え・下揃えから選べ、すべての列に適用されます。特定の列だけ変えたい場合は、その列を選択して同じボタンで設定します。画像と短い文章を並べる場合は、中央揃えにすると落ち着いた見た目になりやすくなります。
スマートフォンでの表示
カラムの入れ物には「モバイルでは縦に並べる」という設定があり、初期状態ではオンになっています。オンのままだと、画面幅が狭い端末では列が縦に積み重なり、左の列が上、右の列が下の順で表示されます。
スマートフォンで横に並んだままにしたい場合はこの設定をオフにしますが、列の幅が狭くなるため、文章が1行に数文字しか入らず読みにくくなることがあります。オフにするのは、小さなアイコンや短い数字を並べる場合など、狭い幅でも成り立つ内容に限るのが無難です。
縦に並んだときの順番も確認しておきます。「画像→説明文」の順で読ませたいのに、文章を左列、画像を右列にしていると、スマートフォンでは「説明文→画像」の順になります。どの端末でも読みやすい順になるように列の中身を配置してください。
表示の確認は、編集画面上部のプレビューから「タブレット」「モバイル」を選ぶと手軽です（2026年10月現在）。ただし、これは画面幅を縮めた簡易的な表示のため、最終確認は実際のスマートフォンで行うと安心です。
カラムを入れ子にするときの注意
列の中にさらにカラムブロックを入れる（入れ子にする）ことはできますが、次の点に注意が必要です。
- 1列あたりの幅が細くなり、文章や画像が窮屈になります。
- スマートフォンで縦に並べる設定が入れ物ごとに独立しているため、思わぬ順番や幅で表示されることがあります。
- 編集画面で目的のブロックを選択しにくくなり、あとからの修正に手間がかかります。
入れ子は2段階までにとどめ、それ以上複雑なレイアウトが必要な場合は、グループブロックの「横並び」や、テーマが用意しているパターンを使うことも検討してください。
うまくいかないときの確認点
列の幅を指定したのに反映されない
列ではなく入れ物の方を選択していないかを確認します。幅の欄は列（中身側）を選択したときに表示されます。また、テーマのCSSで列の幅が固定されている場合もあります。
全体の背景色を付けたいのに列ごとにしか付かない
列を選択した状態で色を設定すると、その列にだけ背景色が付きます。全体に付けたい場合は、入れ物の「カラム」ブロックを選択してから「色」の設定を変更します。
公開ページで列が意図せず折り返される
列の幅の合計や、列の間隔、各列の余白の合計が画面幅を超えると、折り返されて表示されることがあります。幅をパーセントで指定している場合は合計を見直し、余白を少し減らして確認してください。
まとめ
- カラムは入れ物と列の2層構造で、列数・間隔・スマートフォンでの並び方は入れ物、幅は列で設定します。
- 列数を減らすと右側の列が中身ごと消えるため、残したいブロックは先に移動します。
- 縦方向の配置は全体にも列ごとにも設定でき、画像と文章を並べるときは中央揃えが合わせやすくなります。
- 「モバイルでは縦に並べる」はオンのままが基本で、縦に並んだときの順番まで確認します。
- 入れ子は2段階までにとどめ、複雑なレイアウトにはグループやパターンも検討します。