ワードプレス 段組みレイアウトを作成しよう!（カラムブロック Gutenbergエディター使用）
段組みというのは、2列や3列など複数準備した枠の中に、文字や画像などのコンテンツを並べるレイアウトのことです。
例えば下の例は、3列のカラムです。
ワードプレスのGutenberg（ブロックエディター）のカラムブロックを使えば、このような段組みレイアウトが簡単にできあがります。
本記事では、その方法について紹介します。
※この記事は、2021年7月のワードプレスversion5.8へのアップデートにより、2021年7月にリライトしました。
カラムブロックを使ってアピールブロックを作成する方法もこちらの記事で紹介しています。
https://web-children.com/2021/11/05/column-block-auto-alignm...前提条件
WordPressはversion5.8以降のGutenberg（ブロックエディター）を使用します。
本記事事例ではテーマTwenty Seventeenを使用しますが、他のテーマでも同様です。
また、Gutenbergの基本的な使い方については、次の記事を参考にしてください。
・ブロックエディターの画面の各機能を知る
・ブロックエディターでの基本的な記事の書き方
カラムブロックとは？
冒頭に紹介した段組みレイアウトのコンテンツをもう一度見てみましょう。
これをブロックの構成で説明すると次のようになります。
カラムブロックの中に更に３つのカラムがあり、それぞれの中にコンテンツの構成要素である画像ブロックと段落ブロックが入っています。
このようにカラムブロックは、コンテンツの構成要素を段組みレイアウトするためのデザイン用ブロックだといえるでしょう。
カラムブロックには次のようなレイアウト機能があります。
- 最大6列までのカラム数
- 各カラムの横幅を自由に設定
（単位はpx、％、em、rem、vwを選べる） - カラム単位で色（テキスト色と背景色）が設定できる
- レシポンシブ対応としてスマホではカラムが縦に並ぶ
また、カラム内には画像や段落以外のブロックも複数設置可能です。
”カラム”ブロックを使用して段組みレイアウトをつくる手順
手順の概要
手順概要は次の通り、簡単です。
- カラムブロックを挿入
- カラム数を選択（または設定）する
- カラム幅を調整
- カラム内にコンテンツを入力
それでは詳細手順を紹介していきます。
詳細手順
①カラムブロックを挿入する
下記画像の通り、①画面左上の+マークをクリック～③”カラム”をクリック まで進めます。
ちなみに、上記③のカラムを選択するときにマウスオーバーすると、下記のようにプレビューが表示されます。
Gutenbergでは各ブロックにマウスオーバーすると、どんなコンテンツを作成できるかの例を表示してくれるわけです。カラムブロックの例では、次のような構成のコンテンツになっています。
手順に戻って、ブロック一覧から”カラム”をクリックしたところから進めましょう。
②カラム数を設定する
本文入力欄内にカラムブロックが挿入され、画面は次のようになっています。
画面右側のパネルには”カラム”と表示されて、今選択されているブロックがカラムブロックであることを示しています。
※もし画面右側にパネルが表示されていない場合は、画面右上の設定（歯車マーク）をクリックして表示させましょう。
カラムブロックの中には、大きく2通りの進め方が表示されています。
- 開始時のパターン
- スキップ
今回は”開始時のパターン”の中から、３カラムのパターンを選択します。
（”スキップ”を選択すると２カラムを選択したのと同じ結果となるので使うことはないでしょう）
ちなみにカラムパターンの下の数字は、カラム幅の比率を表しています。
すなわち３カラムを選択すると、次のように横幅33％ずつの３つのカラムが挿入されることになります。
上の図では、３つのカラムのうち左のカラムが青く表示され、このカラムが選択中であることがわかります。
カラムブロックの操作にはリスト表示が便利
カラムブロックは、すでに紹介したように”カラム”の中にさらに複数の”カラム”が配置され、それぞれの中にさらにコンテンツを入力していくこととなります。
このようにブロックの構造が複雑な場合は、リスト表示しながら作業すると便利です。
リスト表示には次のメリットがあるからです。
- ブロックの階層構造がわかる
- 現在選択中のブロックがどれかわかる
- リスト表示内でブロックをクリックして選択できる
画面左上の”アウトライン”をクリックするとリスト表示できます。
上図のリスト表示を見れば、現在カラムブロックの中には３つのカラムがあり、現在１つ目のカラムが選択されていることがわかります。
もし３つ目のカラムを選択したければ、リスト表示で3つ目のカラムをクリックすればよいわけです。
もちろん、本文入力欄で直接一番右のカラムをクリックすれば選択できますが、その親カラムを選択するときなどにリスト表示は便利なのです。
このようにリスト表示を使いながら作業を進めていきます。
カラム数を変更する方法
カラム数を途中で変更するには、個々のカラムではなく、カラム全体（親カラム）を選択します。
するとカラム数の設定が画面右のパネルで可能となります。
試しに６カラムに変更してみます。
カラム数が、リスト表示と本文入力欄に反映されたのがわかります。
③カラム幅を調整する
カラム幅は、個々のカラムを選択して調整します。
例として、３カラムの１番目のカラムの横幅を60%に設定してみましょう。
１．1番目のカラムを選択
２．単位を％表示に変更
３．カラム幅を60％に設定
このように、60:20:20の３カラムレイアウトとなりました。
④カラム内にコンテンツを入力
カラム内のコンテンツ入力は、通常の入力方法（カラムブロックでない場合）と基本的には同じです。
- +マークをクリックして新しいブロックの要素を選択して入力する。
- 入力が終われば、カラム内で次のブロックに移りますので、また+マークをクリックして・・と繰り返します。
段落ブロックとして入力の場合は、+マークをクリックせず、直接文字入力していけばよい、という点も、カラム外の通常の入力方法と同じです。
ここで示す例では、一番左のカラムに、1つ目に画像ブロック、その下に段落ブロックで文字入力をしていきます。
１．左カラムの+マークをクリック
２．画像ブロックを選択する
３．メディアライブラリを選択して画像を挿入する
４．画像を挿入後
画像を挿入すると、次のブロック用の+マークが表示されます。
もちろん、通常の画像ブロックと同様、画像のスタイルを画面右のブロックパネルで設定したり、ブロック内ツールバーで画像の編集をすることもできます。
５．段落ブロックをして文字を入力
６．一旦カラムブロックから抜けて確認
このように、左のカラムにコンテンツが入りました。
７．中央と右のカラムも同様に作成して仕上げる
こんな感じで仕上がりました。
リスト表示と合わせて確認するとブロックの構造がよくわかります。
カラムの移動
ちなみに、カラムのツールバーの移動を使えば、左右にカラムを入れ替えることができます。
移動すると次のようにできたりします。
スマホ表示だと縦に並ぶ
以上でカラムの作成の解説は終了ですが、スマホ表示だとカラムは縦に並びます。
まとめ
ブロックエディターで、２カラム以上の段組みレイアウトが簡単にできる”カラム”ブロックを使う手順を紹介してきました。
従来カスタムCSSでしかできなかったレイアウトが簡単に作成できますので、投稿や固定ページの中で、コンテンツを充実させるのに便利ではないでしょうか。
私も、ときどきブログ記事の中でも使用しています。
なお、カラムブロックの応用編として次の記事も参考になります。
Gutenberg強化プラグインのカラムブロックとデフォルトのカラムブロックとの比較
カラムブロックでカラム内ボタンの縦方向の位置を揃える方法
このようにGutenberg（ブロックエディター）にはカラムブロックのほか便利なブロックがたくさん準備されています。Gutenbergの習得には次の記事がおすすめです。
