ブロックエディターの「カラムブロック」の使い方を1つご説明しますね。

カラムブロックとは・・・

ブロックエディターでは、「ブロック」とよばれるパーツを積み上げて記事を構成していきますが、そのままだと1列に1個づつ積み上げていくようになります。

画像を挿入すると、以下のように、縦に連続するイメージ。

「カラム」ブロックを使うと、以下のように1つのブロックを分割して複数の画像を並べることができます。レイアウトの幅が広がりますね。

トップページやランディングページには欠かせない機能ですね。

では使い方をご説明します。

カラムブロックの使い方(デフォルト)

ブロックエディターのメニュー「レイアウト要素」から「カラム」を選びます。

「レイアウトオプションを選択」と出ますので、何分割したいか選んでください。

分割数や比率は「選択」にあるサンプルから選んでもいいですし、もっと細かくはカスタマイズすることもできます。

図で説明するとこんな感じです。

色をつけて説明しますね。
土台(水色)の中にセル(黄色)が入った入れ子構成になっています。

分割数を変更したい時は、土台の水色部分をクリックしてください。
右側の設定メニューでカラム数を変更することができます。(2〜6まで)

1個1個の中身のを大きさを変えたい時は、黄色い部分をクリックしてください。

すると、「パーセント指定幅」が設定できるようになります。

基本のカラムブロックの設定方法は以上です。

ところで、この「カラム」スマホで見た時どうなると思いますか?

カラムブロックのレスポンシブ表示どうする?

カラムブロックで横並びにしても、スマホだと分割されず、縦並びになります。

スマホは画面が小さいので大きい方が見やすいですが、時にはスマホの時でもPCと同じく分割させたい場合もありますよね。

そんな時、このカラムブロックでは設定できないので、私は他のプラグインのカラムブロックを使っています。

Gutenberg blocks プラグインブロック

「Gutenberg Blocks」というプラグインです。

追加して有効化するだけで、ブロックに「Ultimate Addons Blocks」メニューが増えます。

その中にある「Advanced Columns」を使います。

この、AdvanceColumnならスマホ時・タブレット時にはどうするかを個別に設定することができます。

「Stack on」というところを「なし」にしておけばOKです。

このプラグイン英語のプラグインですが、かなり細かく設定できるのでとても便利ですよ^^
よかったら試してみてください!