WordPress Gutenberg(グーテンベルク)ブロックエディタの使い方:PCで3カラム、モバイルで縦積み1カラム表示にする
[PR]プロモーションが含まれています

WordPress Gutenberg(グーテンベルク)ブロックエディタの使い方:PCで3カラム、モバイルで縦積み1カラム表示にする

6月 20, 2025

Gutenberg(グーテンベルク)のブロックエディタで、PCの場合は3カラム、スマホなどのモバイルの場合は1カラムの縦積みに表示する方法です。レスポンシブデザインという手法でウィンドウ幅にあわせてレイアウトの配置が変更されます。

例)PCでは3カラム、スマホで1列の縦並びにする場合

カラムブロックを選択して、レイアウトを選びます。

ここでは右から2番目の3カラム均等割を選びます(スキップして右側のブロック設定でも設定できます)

カラム選択

右メニューのブロックタブで「モバイルでは縦に並べる」が選択されているか確認します。

ブロック設定

PCでは3カラム表示

左側のブロックです。ここで段落テキストや画像などを選択します。

真ん中のブロックです。ここで段落テキストや画像などを選択します。

右側のブロックです。ここで段落テキストや画像などを選択します。

※PCでもブラウザのウィンドウ幅を縮めると3つの横並びのカラムが1列の縦並びになります。

スマホでは1カラムで縦並び

スマホでも1列で表示されるかと思います。

スマホ表示例
スマホ表示例

例)PCでは4カラム、スマホで2列の縦並びにする場合

カラムの中にカラムを入れ子にすることで、表示数を調整することもできます。
カラムブロックで2つ均等割を選択して、各ブロックの中でさらに2つ均等割を選択します。

カラム選択

この時、青枠のブロック設定では「モバイルでは縦に並べる」の選択を解除します。

ブロック選択

PCでは4カラム表示

1番目のブロックです。ここに段落テキストや画像などを選択します。

2番目のブロックです。ここに段落テキストや画像などを選択します。

3番目のブロックです。ここに段落テキストや画像などを選択します。

4番目のブロックです。ここに段落テキストや画像などを選択します。

※PCでもブラウザのウィンドウ幅を縮めると4つの横並びのカラムが2列の縦並びになります。

スマホでは2カラムで縦並び

スマホ表示例
スマホ表示例

結構使うレイアウトなので、覚えておくと便利です。