レスポンシブ対応の段組みをブロックエディターで実装する方法

Microsoft Word などのワープロソフト（DTP ソフト）でおなじみの段組みレイアウトのコンテンツを WordPress のブロックエディターで作るやり方を紹介します。

• WordPress が 7.0 にアップデートされていることを前提にして手順を説明しています。
• いまご覧になっているコンテンツをこのやり方で作ってあります。

グループブロックを追加して、グループブロックの [高度な設定] → [追加 CSS] に以下のコードを入力します。

column-width: 275px;

入力する場所は図を参照してください。

はい、このたった1行のコードだけで段組みが実装されました。

このグループブロックにコンテンツを入れていけば段組みレイアウトになります。

この例では3段の段組みにするために 275px を指定していますが、この数字を大きくすることで2段のレイアウトにすることもできます。

このページをパソコンで表示すると3段のレイアウトになっていますが、画面幅に合わせて 3段 → 2段 → 1段 と変化するレスポンシブ対応のコンテンツになっています。

コードを以下のように増やすと、段と段の隙間が広くなって境界線が表示され、見やすくなります。

column-width: 275px;
column-gap: 2em;
column-rule: 1px dotted #ddd;

このスタイルがブロックエディターの画面に反映されるのもうれしいポイントです。

いままでウェブページで段組みを実装するなんてすごく難しいと思っていましたが、やり方がわかったら拍子抜けするほどかんたんで驚きました。