【Gutenberg】カラムブロックの使い方&作業効率UPのコツまとめ

Gutenbergのカラムブロックの使い方

こんにちは!ZIGです。

ここではワードプレスの新エディター「Gutenberg」の「カラム」ブロックの使い方を解説します。

これからGutenbergを使う方、まだ使い方がよく分からない・・・って方は参考にどうぞ。

Gutenbergではカラムレイアウトを簡単に挿入できる

カラムブロックを使うとコンテンツを複数列のレイアウトにする事が出来ます。

以下のようなレイアウトですね。

カラムブロック

旧エディターの場合は自分でレイアウトを用意したり、テーマ特有のショートコードを使うといった形でしか使用できませんでしたが、Gutenbergではブロックで簡単にカラムレイアウトを挿入できるようになりました。

こういう所はGutenbergで便利になった点ですね♪

 

というわけで今回は例として、上記画像のカラムレイアウトを作成する流れを解説しようと思います。

 

カラムレイアウトの作成手順

カラムレイアウトの作成はまずカラムブロックの追加からですね。

カラムブロックの追加はエディター左上の「+」をクリックし、「レイアウト要素」⇒「カラム」を選択します。

カラムブロックの追加

 

カラムブロックが追加されました。

カラムブロック

ちなみにデフォルトでは2カラムで追加されます。

 

カラム数の変更

2カラム以外のレイアウトを使う場合はカラム数を変更しましょう。

ただ、このカラム数の変更が分かりにくいんですよね(汗

分かれば簡単な事だったんですが、私は最初カラム数が変更出来ねえええええええ!!とかなり混乱しました。

 

カラム数を変更したい場合、カラムブロックの左側にある以下のアイコンをクリックします。

カラム数の変更

 

するとサイドバーにカラム数の変更項目が表示されます。

カラムレイアウトの変更

ここでカラム数を調整しましょう。

スライダーをドラッグして動かせばカラム数を変更出来ます。

 

例えば2カラムから3カラムに変更したいならスライダーを右に少し移動ですね。

カラムレイアウトの変更

そうすれば2カラムから3カラムにレイアウトが変更されます。

ちなみにカラム数は最大6まで増やす事が出来ます。

 

カラム毎にブロックを追加

レイアウトが決まったらカラム毎にコンテンツを入れていきましょう。

コンテンツを入れたいカラムを選択したら、表示されている「+」アイコンをクリックします。

カラム内にブロックを追加する

 

するとブロック追加メニューが表示されます。

カラム内にブロックを追加

カラム内には様々なブロックの追加が可能です。

段落や画像、ボタンなどをはじめ基本的には何でもブロックを追加できますが、色々入れすぎると表示が上手くいかない場合もあるのでその点は注意してください。

 

 

例えば画像を挿入したい場合は画像ブロックをクリックですね。

カラム内にブロックを追加

画像ブロックは「よく使うもの」「一般ブロック」いずれかで見つかるはずです。

 

画像ブロックが追加されるので、後は通常の画像アップロードと同様の手順で追加していきます。

カラム内に画像を追加

 

画像が追加できました。

カラム内に画像を追加

画像はもちろんキャプションを入力することも可能です。通常の画像追加と違うのは、画像がカラムの幅に縮小されて挿入されるって点ですね。

あとはテキスト(段落ブロック)やボタンブロックも同様に追加していきましょう。

 

 

・・・左のカラム内にテキストとボタンを追加してみました。

カラム内にコンテンツを追加

これで左カラムには「画像ブロック」「段落ブロック」「ボタンブロック」の3つが入ってる形ですね。

こんな感じでカラム内のコンテンツを整えていきます。

 

 

後の手順は繰り返しなので省略しますが、それぞれのカラム内にブロックを追加していけばOK。

これで例としてお見せしたカラムレイアウト完成です。

サンプルカラムレイアウト

 

 

よく使うカラムレイアウトは再利用ブロックに登録しておこう

作成したカラムレイアウトを繰り返し使用したい、他の記事でも使いたい場合は再利用ブロックに登録しておきましょう。

同じレイアウトのカラムブロックをワンクリックで挿入できるようになります。

手順は以下の通り。

 

まず、繰り返し利用したいカラムブロックを選択状態にし、以下のアイコンをクリックします。

再利用ブロックに追加

 

表示されたメニューから「再利用ブロックに追加」をクリック。

再利用ブロックへの追加

 

 

すると「ブロックを作成しました」と表示されます。

再利用ブロックへの追加

これで再利用ブロックへの追加は完了しているのですが、ブロックに名前を付けておきましょう。

「無題の再利用ブロック」だとなんのブロックなのか分からなくなってしまいます(汗

 

 

分かりやすい名前を設定し、「保存」をクリックですね。

再利用ボックスの名称変更

 

以上で再利用ブロックへの登録は完了です。

再利用ボックスの名称変更

これでこのカラムレイアウトは何度もでも簡単に再利用できるようになりました。

 

 

例えば新規の記事で同じカラムレイアウトを挿入したい場合、ブロックの追加から「再利用ブロック」をクリックします。

再利用ブロックの挿入

 

再利用ボックスの中に先ほど作成したカラムレイアウトが表示されているので、こちらをクリックしてみましょう。

再利用ブロックの挿入

 

これだけで先ほどと全く同じカラムレイアウトが挿入されます。

再利用ブロックの挿入

ワンクリックで作業が完了するので、だいぶ手間が省けますね♪

 

カラムレイアウトの作成は場合によって画像を挿入したりボタンを挿入したり・・・と色々作業が必要で、意外とめんどくさいですしよね。毎回同じ事をやっていたら時間がかかって仕方ありません。なので使い回したいものは忘れず再利用ブロックに追加しておきましょう。

そうすればかなり作業効率がUPします。

 

まとめ

というわけで「Gutenberg」のカラムボックスの使い方をまとめてみました。

カラムレイアウト複数の画像や商品を紹介するのに便利なので、上手く活用したいですね♪

再利用ボックスも活用して作業の効率化を図っちゃいましょう!

Gutenbergの使い方

【2019年最新】ワードプレスの新エディター「Gutenberg」の基本的な使い方と注意点まとめ(ver5.2.2対応)