Gutenberg強化プラグインとデフォルトのカラムブロックとは一体何が違うのか？（ワードプレス ブロックエディター）
ワードプレスのGutenbergエディターでは、従来のクラシックエディターでは作成できなかったコンテンツが作成できるようになりましたが、その中でも、カラムブロックは人気のブロックです。
カラムブロックを使えば、最大６列までの段組レイアウトが作成できるので、企業サイトでアピールブロックを作ったり、商品サイトで商品のベネフィットを表現するのに便利ですよね。
一方、Gutenberg強化するプラグインは、デフォルト状態ではない新しいブロックを追加することができます。例えばアコーディオンブロックや吹き出しブロック、アニメーション機能追加のブロックなどです。
そんなプラグインの中に、わざわざカラムブロックが入っていることに最近気づきました。
そこで本記事では、デフォルトのカラムブロックと、プラグインで追加されるカラムブロックとでは何が違うのかを検証してみたいと思います。
結論をいうと、強化ブログインのカラムブロックを使うと、デフォルトのカラムブロックでは実現できなかったデザインを作ることができるのです。
なお、検証テーマには、Twenty Twentyを使用しました。シンプルなテーマで比較した方が、テーマによる影響が少ないからです。
デフォルトのカラムブロック
デフォルトのカラムブロックを使って作成したコンテンツ例です（パソコン表示時）。
3列のカラムが配置されていて、それぞれのカラムの中に画像ブロックで画像、段落ブロックでテキストを配置しています。
このようにカラムブロックを使用すると、段組レイアウトが簡単に作成できるんですね。
デフォルトのカラムブロックの使い方については、次の記事に詳しく解説していますので参照してください。
https://web-children.com/2019/09/22/multi-column-layout-by-b...プラグインを使ったカラムブロック
Gutenberg強化プラグインは非常に多く存在しますので、カラムブロックが含まれている代表的なものを２つ取り上げてみました。
１つ目はGutenberg Blocks – Ultimate Addons for Gutenberg、２つ目はStackable – Page Builder Gutenberg Blocksです。
Ultimate Addons for Gutenbergのカラムブロック
こんなプラグインです。有効インストール数は200,000以上ですので、結構人気だと思います。
インストールして有効化すると、ブロックエディターのブロックの中に多数のブロックが追加されますが、その中に、Advenced Columnsというブロックがありますので、これを使ってみます。
Advanced Columnsブロックの使い方
使い方はデフォルトのカラムブロックを使える人であれば、全然迷うことなく使用できます。というのは、操作手順がほとんど同じだからです。
例えば、デフォルトのカラムブロックを配置すると、まず開始時のパターン（カラム数やカラム幅比などの絵）からパターンを選ぶか、それをスキップして自分でゼロから設定していくかを選択することになりますが、そこからして全く同じです。
デフォルトのカラムブロックとの違い
違いとしては、デフォルトにはなかった、カラムごとに次の機能が設定できるようになっています。
- カラムの間隔（パディングとマージン）が設定できる
- 背景（背景色または背景画像とその透明度）を設定できる
- 枠線が設定できる
設定の方法は、どれかのカラム選択した状態にすると、画面右のブロックパネルの中で、Layout（Content width）の下に間隔・Background・Borderと表示されているので、それらをクリックして設定していくだけです。
※編集画面右にブロックパネルが表示されていない場合は、画面右上の設定（歯車マーク）をクリックすれば表示できます。
Advenced Columnsブロックの使用例
非常に簡単ですが、まずは4カラムにして、それぞれに、画像・画像・背景画像・段落（テキスト）を配置してみました。
これに、それぞれにマージン（マイナスマージン含む）とパディングを設定して配置を調整してみました。一番右のテキストが入ったカラムは、テキストが読みやすいように背景色と透明度も設定しています。
画像の解像度が今いちですが、デフォルトのカラムのままでは設定できないコンテンツを作成することができます。
レシポンシブの確認
ただし、レスポンシブには注意が必要です。
レシポンシブ対応としては、タブレット状態からスタックをONにする（カラムを上下に積んだ配置とする）か、スマホ段階からスタックをONするか、あるいはしないかを選択できます。
スマホではスタックをONするのが通常なので、スタックON状態でスマホ表示してみると次のようになりました。
まず、３つ目のカラムに配置した背景画像が高さを失っています。背景画像はあくまで背景なので、テキストなどのコンテンツがない場合は、自分で高さをキープできないためです。これを避けるためには、カスタムCSSを使ってmin-heightを設定する必要があるでしょう。
パソコン表示でカラムが横並びに配置されていた時には、隣のカラムの高さに合わせて自動調整されるので高さをキープできていたわけです。
また、他の画像もパソコン表示で作成したマージンやパディングがそのまま残っているので、不自然な余白で配置されているのも問題です。これもカスタムCSSで調整してやる必要があるでしょう。
このように、各カラムにマイナスマージンなどを使って見映えを変化させる場合は、カスタムCSSによる調整が欠かせない、ということになります。
Stackable Page Builder Gutenberg Blocksのカラムブロック
次に紹介するプラグインは次のようなものです。
Stackableは、有効インストール数が30,000強と、まださほど多いわけではありませんが、独自のブロックだけでなく多くのデザインテンプレートも提案してくれる便利なプラグインです。
有効化すると、テキスト用ブロック一覧やデザイン用ブロック一覧など、各ブロック一覧表の中に独自ブロックが追加されます。
カラム用ブロックはデザイン用ブロック一覧の中にAdvanced Columns＆Gridがありますので選択しましょう。
Advanced Columns & Gridブロックの使い方
デフォルトのカラムブロックとは若干操作画面は異なりますが、基本は同じです。
まず、カラムブロック全体を選択した状態で、画面右のブロックパネルのLayoutからカラム数とそれぞれの幅比率を設定します。
あとは、デフォルトのカラムブロックと同じ要領で、各カラムの中に画像（画像ブロックを配置）やテキスト（段落ブロックを配置）を作成していくことになります。
デフォルトのカラムブロックとの違い
このブロックも、先ほど紹介したプラグインUltimate Addons for GutenbergのAdvanced Columnsブロックと同様に、カラムごとのマージンやパディングが設定できるので、カラムの配置に自由度があります。
しかし、それ以外にこのカラムブロックの最大の特徴は、そのブロック名にGridと入っているように、Gridレイアウトを選択できることです。
例えば、4カラム・カラム幅比25%均等に設定して、それぞれ画像を配置したとします。
これをGridレイアウトにするには、カラムブロック全体を選択した状態で、画面右のブロックパネルのLayoutsでPlainからGridに変更します。
すると次のようにGridレイアウトとなります。
簡単に元のPlainにも戻せますので、いろいろと試してみることができます。
このほかにもデフォルトのカラムブロックにはない機能がいろいろありますので、まとめて紹介しておきます。
- カラム毎にパディングやマージンが設定できる
- カラムをグリッドレイアウトに配置することができる
- グリッドレイアウトにした場合に、グリッド全体の高さを画面半分や画面全体に広げる設定ができる
- カラムブロック全体にタイトルやディスクリプション（説明文）をつけることができる
- カラムブロック全体に背景（背景色・画像・動画を設置できる（透明度設定可））が設定できる
- カラムブロック全体のトップとボトムにセパレータを設置できる（斜め線の模様や波形模様など）
Advanced Columns & Gridブロックの使用例
先ほどの4カラムのグリッドレイアウト画像で、カラム幅を70:30に設定します。
右側のカラムの下に空間ができたのでテキストを配置し、さらに、下段のグリッドだけマージン調整で配置を変えてみました。
下段グリッドの、画像に重なったテキストの色は見やすいように変更しました。
上段グリッドが変更前、下段グリッドが変更後だと考えて見てください。
ちなみに、下段グリッドの各カラムには設定したマージンは次の通りです。カラム単独を選択した状態で、画面右のブロックパネルのAdvancedというところで設定できます。
レシポンシブを確認
上記で作成したカラムはパソコン表示ですが、これをタブレットとスマホで見てみましょう。
iPadで見た状態です。画面に全グリッド入らないので、上段グリッドと下段グリッドに分けています。
タブレット表示ですでにカラムが上下に積まれて表示されてています。下段カラムに設定したマージン設定はそのまま残るようです。
続いてスマホ表示です。iPhone Xでの表示です。
下段グリッドに設定していたマージン設定は自動的に解除されています。
デバイス毎に非表示設定も選べる
このようにレシポンシブ対応はできているかと思われますが、それでも、マージンやパディングの設定方法によっては、パソコン表示では見映えがよくても他のデバイスでは調整が必要な場合があるかもしれません。
そんな場合に備えて、各デバイス毎に非表示を選択することもできます。
そうすることで、各デバイス毎に最適な配置をしたうえで（といっても３デバイス分準備するのは面倒ですが・・・）、それぞれのデバイス以外では非表示にしてやる、といった使い方ができるわけです。
なかなかうまく考えられていますよね。
まとめ
今回は２つのプラグインGutenberg Blocks – Ultimate Addons for GutenbergとStackable – Page Builder Gutenberg Blocksのカラムブロックを使ってみました。
どちらもカラム毎のパディングやマージンが設定できるようになっているので、デフォルトのカラムブロックではできなかったデザインが実現できます。
Gutenberg Blocks – Ultimate Addons for Gutenbergのほうは、デフォルトのカラムブロックの操作方法をそのままに、パディング・マージン機能を付け足した感じで、デフォルトのカラムブロックに慣れた方なら、すぐに使いこなすことができるでしょう。
しかし、カラムを自由に配置した場合、レシポンシブ対応においては、カスタムCSSの併用が必須だと感じました。
それに対して、Stackable – Page Builder Gutenberg Blocksの方は、グリッドレイアウトも選択できるほか、レシポンシブ対応でも、カスタムCSSを使わずにうまくブロックの設定だけで使いこなせる可能性があります。（とはいえ、カスタムCSSに慣れた方なら、実際のところ、カスタムCSSでレイアウトしてしてしまった方が早い、と感じるかもしれませんが。）
今回はとりあえず２つだけしか取り上げませんでしたが、ほかにも数あるプラグインがありますので、機会があればレビューしてみようと思います。
