WordPressブロックエディタのグリッドとカラムの使い方

Screenshot of ja.wordpress.org

ブロックエディタにはレイアウトをデザインするために カラム と グリッドがあります。どちらもブロックを分割してくれますが少し違いがあります。例えばカラムは横に1~3分割になります。4つのブロックに分けて表示したいときは、2カラムを2段作成することになるのです。これに対しグリッドは左から順に右側にブロックを作ってゆくイメージになります。どちらも、画像やテキストを記述できます。写真だけを並べて表示させたいなら ギャラリーを利用されるとよいかもしれません。

>> ブロックエディターハンドブック

用途としては、関連する記事などへのリンクブロックを枠ごとに並べたり、商品の紹介写真を複数なべて表示したいときに使えます。

グリッド

✙ クリック > デザイン > グリッド とすすみ枠内に文字や画像などを記述します。枠線など装飾したい場合は、高度な設定に cssスタイルを記述します。

WordPress【Gutenberg】のコードエディタの使い方
Gutenberg は、 ブロックエディタとも呼ばれ、段落(文章)や画像、見出し等をブロック単位でHTMLやCSSの知識を必要としない、編集方法になっています。

ブロックエディター(Gutenberg)のレスポンシブ対応カラムデザインの使い方
CSSをカスタマイズしなくてもカラムデザインが簡単にできます。ページを 2 ~ 3列に分割して、それぞれに画像や文章でデザインしたいことがあります。

WordPressブロックエディター再利用ブロックの使い方
WordPressのデフォルトエディタ Gutenberg には指定したブロックを簡単に違う記事に貼り付けることができるようになっています。

テーマによってはパターンとして提供されている場合もありますので、こちらを利用されると作業が早くなることもあります。レスポンシブ対応なので表示エリアが狭い場合は縦に並ぶこともあるので注意が必要です。下記はパターンを使った例です。

カラム

✙ クリック > デザイン > カラムと進み 1~3カラムを選択します。下記は 2カラムの各枠にSimple Blog Card を配置しています。この下に同じようにカラムを表示するには、2カラムを追加します。あまりお勧めではありませんが、カラムの中にカラムを追加することも可能です。

1カラムは複数の段落に1つのcssで対応したいときに便利です。