ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

Gutenberg強化プラグインとデフォルトのカラムブロックとは一体何が違うのか?(ワードプレス ブロックエディター)

ワードプレスのGutenbergエディターでは、従来のクラシックエディターでは作成できなかったコンテンツが作成できるようになりましたが、その中でも、カラムブロックは人気のブロックです。

カラムブロックを使えば、最大6列までの段組レイアウトが作成できるので、企業サイトでアピールブロックを作ったり、商品サイトで商品のベネフィットを表現するのに便利ですよね。

一方、Gutenberg強化するプラグインは、デフォルト状態ではない新しいブロックを追加することができます。例えばアコーディオンブロックや吹き出しブロック、アニメーション機能追加のブロックなどです。

そんなプラグインの中に、わざわざカラムブロックが入っていることに最近気づきました。

そこで本記事では、デフォルトのカラムブロックと、プラグインで追加されるカラムブロックとでは何が違うのかを検証してみたいと思います。

結論をいうと、強化ブログインのカラムブロックを使うと、デフォルトのカラムブロックでは実現できなかったデザインを作ることができるのです。

なお、検証テーマには、Twenty Twentyを使用しました。シンプルなテーマで比較した方が、テーマによる影響が少ないからです。

目次

デフォルトのカラムブロック

デフォルトのカラムブロックを使って作成したコンテンツ例です(パソコン表示時)。

3カラム仕上がり

3列のカラムが配置されていて、それぞれのカラムの中に画像ブロックで画像、段落ブロックでテキストを配置しています。

このようにカラムブロックを使用すると、段組レイアウトが簡単に作成できるんですね。

デフォルトのカラムブロックの使い方については、次の記事に詳しく解説していますので参照してください。

プラグインを使ったカラムブロック

Gutenberg強化プラグインは非常に多く存在しますので、カラムブロックが含まれている代表的なものを2つ取り上げてみました。

1つ目はGutenberg Blocks – Ultimate Addons for Gutenberg、2つ目はStackable – Page Builder Gutenberg Blocksです

Ultimate Addons for Gutenbergのカラムブロック

こんなプラグインです。有効インストール数は200,000以上ですので、結構人気だと思います。

Ultimate Addons for Gutenberg

インストールして有効化すると、ブロックエディターのブロックの中に多数のブロックが追加されますが、その中に、Advenced Columnsというブロックがありますので、これを使ってみます。

Advanced Columnsブロックを使用する

Advanced Columnsブロックの使い方

使い方はデフォルトのカラムブロックを使える人であれば、全然迷うことなく使用できます。というのは、操作手順がほとんど同じだからです。

例えば、デフォルトのカラムブロックを配置すると、まず開始時のパターン(カラム数やカラム幅比などの絵)からパターンを選ぶか、それをスキップして自分でゼロから設定していくかを選択することになりますが、そこからして全く同じです。

デフォルトのカラムブロックとの違い

違いとしては、デフォルトにはなかった、カラムごとに次の機能が設定できるようになっています。

  • カラムの間隔(パディングとマージン)が設定できる
  • 背景(背景色または背景画像とその透明度)を設定できる
  • 枠線が設定できる

設定の方法は、どれかのカラム選択した状態にすると、画面右のブロックパネルの中で、Layout(Content width)の下に間隔BackgroundBorderと表示されているので、それらをクリックして設定していくだけです。

Advenced Columns追加機能の使い方

※編集画面右にブロックパネルが表示されていない場合は、画面右上の設定(歯車マーク)をクリックすれば表示できます。

情報パネルの表示・非表示切り替え

Advenced Columnsブロックの使用例

非常に簡単ですが、まずは4カラムにして、それぞれに、画像画像背景画像段落(テキスト)を配置してみました。

Advanced Columnsにコンテンツを配置

これに、それぞれにマージン(マイナスマージン含む)パディングを設定して配置を調整してみました。一番右のテキストが入ったカラムは、テキストが読みやすいように背景色と透明度も設定しています。

Advanced Columnsに配置したコンテンツを位置調整

画像の解像度が今いちですが、デフォルトのカラムのままでは設定できないコンテンツを作成することができます。

レシポンシブの確認

ただし、レスポンシブには注意が必要です。

レシポンシブ対応としては、タブレット状態からスタックをONにする(カラムを上下に積んだ配置とする)か、スマホ段階からスタックをONするか、あるいはしないかを選択できます。

Advanced Columnsのレシポンシブ設定

スマホではスタックをONするのが通常なので、スタックON状態でスマホ表示してみると次のようになりました。

Advanced Columns作成コンテンツのスマホ表示

まず、3つ目のカラムに配置した背景画像が高さを失っています。背景画像はあくまで背景なので、テキストなどのコンテンツがない場合は、自分で高さをキープできないためです。これを避けるためには、カスタムCSSを使ってmin-heightを設定する必要があるでしょう。

パソコン表示でカラムが横並びに配置されていた時には、隣のカラムの高さに合わせて自動調整されるので高さをキープできていたわけです。

また、他の画像もパソコン表示で作成したマージンやパディングがそのまま残っているので、不自然な余白で配置されているのも問題です。これもカスタムCSSで調整してやる必要があるでしょう。

このように、各カラムにマイナスマージンなどを使って見映えを変化させる場合は、カスタムCSSによる調整が欠かせない、ということになります。

Stackable Page Builder Gutenberg Blocksのカラムブロック

次に紹介するプラグインは次のようなものです。

プラグインStackable

Stackableは、有効インストール数が30,000強と、まださほど多いわけではありませんが、独自のブロックだけでなく多くのデザインテンプレートも提案してくれる便利なプラグインです。

有効化すると、テキスト用ブロック一覧やデザイン用ブロック一覧など、各ブロック一覧表の中に独自ブロックが追加されます。

カラム用ブロックはデザイン用ブロック一覧の中にAdvanced Columns&Gridがありますので選択しましょう。

Advanced Columns and Gridブロック

Advanced Columns & Gridブロックの使い方

デフォルトのカラムブロックとは若干操作画面は異なりますが、基本は同じです。

まず、カラムブロック全体を選択した状態で、画面右のブロックパネルのLayoutからカラム数とそれぞれの幅比率を設定します。

Advanced Columns and GridブロックのLayout設定

あとは、デフォルトのカラムブロックと同じ要領で、各カラムの中に画像(画像ブロックを配置)やテキスト(段落ブロックを配置)を作成していくことになります。

デフォルトのカラムブロックとの違い

このブロックも、先ほど紹介したプラグインUltimate Addons for GutenbergAdvanced Columnsブロックと同様に、カラムごとのマージンパディングが設定できるので、カラムの配置に自由度があります

しかし、それ以外にこのカラムブロックの最大の特徴は、そのブロック名にGridと入っているように、Gridレイアウトを選択できることです。

例えば、4カラム・カラム幅比25%均等に設定して、それぞれ画像を配置したとします。

Advanced Columns and Gridブロックで4カラム配置

これをGridレイアウトにするには、カラムブロック全体を選択した状態で、画面右のブロックパネルのLayoutsPlainからGridに変更します。

Advanced Columns and GridブロックでGridレイアウトに変更

すると次のようにGridレイアウトとなります。

Advanced Columns and Gridブロックで4Grid配置

簡単に元のPlainにも戻せますので、いろいろと試してみることができます。

このほかにもデフォルトのカラムブロックにはない機能がいろいろありますので、まとめて紹介しておきます。

  • カラム毎にパディングやマージンが設定できる
  • カラムをグリッドレイアウトに配置することができる
  • グリッドレイアウトにした場合に、グリッド全体の高さを画面半分や画面全体に広げる設定ができる
  • カラムブロック全体にタイトルやディスクリプション(説明文)をつけることができる
  • カラムブロック全体に背景(背景色・画像・動画を設置できる(透明度設定可))が設定できる
  • カラムブロック全体のトップとボトムにセパレータを設置できる(斜め線の模様や波形模様など)

Advanced Columns & Gridブロックの使用例

先ほどの4カラムのグリッドレイアウト画像で、カラム幅を70:30に設定します。

Advanced Columns and Gridブロックで4Grid配置でカラム幅変更

右側のカラムの下に空間ができたのでテキストを配置し、さらに、下段のグリッドだけマージン調整で配置を変えてみました。

Advanced Columns and Gridブロックで4Grid配置でさらにマージン調整

下段グリッドの、画像に重なったテキストの色は見やすいように変更しました。

上段グリッドが変更前、下段グリッドが変更後だと考えて見てください。

ちなみに、下段グリッドの各カラムには設定したマージンは次の通りです。カラム単独を選択した状態で、画面右のブロックパネルのAdvancedというところで設定できます

Advanced Columns and Gridブロックでカラムのマージン設定

レシポンシブを確認

上記で作成したカラムはパソコン表示ですが、これをタブレットとスマホで見てみましょう。

iPadで見た状態です。画面に全グリッド入らないので、上段グリッドと下段グリッドに分けています。

Advanced Columns and Gridブロックで4Grid配置例タブレット表示

タブレット表示ですでにカラムが上下に積まれて表示されてています。下段カラムに設定したマージン設定はそのまま残るようです。

続いてスマホ表示です。iPhone Xでの表示です。

Advanced Columns and Gridブロックで4Grid配置例スマホ表示

下段グリッドに設定していたマージン設定は自動的に解除されています。

デバイス毎に非表示設定も選べる

このようにレシポンシブ対応はできているかと思われますが、それでも、マージンやパディングの設定方法によっては、パソコン表示では見映えがよくても他のデバイスでは調整が必要な場合があるかもしれません。

そんな場合に備えて、各デバイス毎に非表示を選択することもできます

そうすることで、各デバイス毎に最適な配置をしたうえで(といっても3デバイス分準備するのは面倒ですが・・・)、それぞれのデバイス以外では非表示にしてやる、といった使い方ができるわけです。

なかなかうまく考えられていますよね。

まとめ

今回は2つのプラグインGutenberg Blocks – Ultimate Addons for GutenbergStackable – Page Builder Gutenberg Blocksのカラムブロックを使ってみました。

どちらもカラム毎のパディングやマージンが設定できるようになっているので、デフォルトのカラムブロックではできなかったデザインが実現できます。

Gutenberg Blocks – Ultimate Addons for Gutenbergのほうは、デフォルトのカラムブロックの操作方法をそのままに、パディング・マージン機能を付け足した感じで、デフォルトのカラムブロックに慣れた方なら、すぐに使いこなすことができるでしょう。

しかし、カラムを自由に配置した場合、レシポンシブ対応においては、カスタムCSSの併用が必須だと感じました。

それに対して、Stackable – Page Builder Gutenberg Blocksの方は、グリッドレイアウトも選択できるほか、レシポンシブ対応でも、カスタムCSSを使わずにうまくブロックの設定だけで使いこなせる可能性があります。(とはいえ、カスタムCSSに慣れた方なら、実際のところ、カスタムCSSでレイアウトしてしてしまった方が早い、と感じるかもしれませんが。)

今回はとりあえず2つだけしか取り上げませんでしたが、ほかにも数あるプラグインがありますので、機会があればレビューしてみようと思います。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる