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

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

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

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

詳細はこちら

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

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

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

ワードプレス グループブロックが超便利!グループ化だけじゃない活用方法

ワードプレスGutenberg(ブロックエディター)のグループブロックの基本的な使い方~応用方法までを紹介します。

本記事でわかること

グループブロックについて、次のことがわかります。

グループブロックを使うメリット

基本的な使い方
(複数のブロックをグループ化する方法と解除の方法)

グループブロックの機能
 ・テーマごとに違う機能を理解する
 ・レイアウトの選択(横並び・縦積み)
 ・文字色、背景色を設定する
 ・パディング・マージンを設定する(単独ブロックでも便利)
 ・枠線を設定する

HTML構造を理解しておく
 ・クラスを設定する
 ・HTML構造を正確に把握する
 (テーマや選択レイアウトによってHTML構造が異なる

グループブロックを使ったカスタマイズ事例

本記事は、2022年5月24日のワードプレスversion6.0のリリースに伴い、2022年5月にリライトしました。

目次

グループブロックを使うメリット

グループブロックでは、複数のブロックをグループ化することができます。

そうすると次のメリットが生まれるのです。

  1. グループごと複数のブロックを複製・コピー・移動ができる
    (移動後にグループを解除して元に戻すこともできます)
  2. 文字色・背景色でグループ化したブロックを統一感を持たせる
    (注釈文やコラムなど、記事内にアクセントをつけて挿入するのに便利)
  3. 単独ブロックでもレイアウト調整できる
    (パディングを活用する)
  4. グループにクラス名を設定してカスタムCSSを適用できる
    (枠線やラベルをつけた装飾ブロックなどいろいろなコンテンツが作成可能です)

グループブロックの基本的な使い方を解説した後、それぞれのメリットを順番に紹介していきます。

グループブロックの基本的な使い方

複数のブロックをグループ化する

例として、段落ブロックとリストブロック、画像ブロックを1つのグループにしてみます。

グループ化する前は、次のような構成です。

グループ化する前のブロック構成

リスト表示でグループ化前の構成を確認

グループ化する前に、画面左上の”アウトライン”ボタンをクリックしてリスト表示を確認してみましょう。

グループ化前のリスト表示

リスト表示は次の点で便利なので、グループブロックなど複雑な構成の確認によく使います。

 ・現在どのようなブロック構成なのかがわかる
 ・リスト表示をクリックしてブロックを選択することもできる

この記事内でも使いますので覚えておきましょう。

リスト表示を非表示するには、リスト右上の×マークをクリックします。

リスト表示を非表示にする

グループ化の手順

1.グループ化したいブロックを選択する

今回は段落・リスト・画像の3つのブロックを選択します。

複数のブロックを選択するには、SHIFTキーを押しながら先頭ブロックと最後尾のブロックをクリックします。
選択できたブロックは青く表示されます。

複数のブロックを選択

2.グループ化する

選択したブロックの左上表示されたツールバーから操作します。

①”ブロックのタイプ変更”アイコンをクリック
②”グループ”アイコンをクリック

アイコンボタンでグループ化

または、3点メニュー(オプション)からでもグループ化可能です。

①3点メニューをクリック
②”グループ化”をクリック

3点メニューからグループ化

私は、どちらかといえば3点メニューから操作することが多いです。
次に紹介するグループ化解除の手順と似ているからです。

グループ化後のリスト表示の確認

グループ化をした後でも画面の見た目は変わりませんが、リスト表示してみるとブロックの構成が変わったのが確認できます。

グループ化後のリスト表示

グループブロックの中に、段落・リスト・画像の3つのブロックが入っているのが確認できますね。

グループブロックの選択方法

グループブロックの選択は、グループ化後のブロックの見た目が変わらないので難しいですが、リスト表示からなら簡単です。

リスト表示の中の”グループ”をクリックするだけです。

グループブロックの選択

グループブロック以外、例えば段落ブロックを選択したければ、リスト表示の”段落”をクリックします。

段落ブロックの選択

グループ内のブロックを選択中の場合、ツールバー左の”グループ”アイコンからでも親となるグループブロックを選択可能です。

グループアイコン

・各ブロックの選択はリスト表示が便利
・グループ内ブロックのグループアイコンからもグループブロックを選択できる

グループ化解除の手順

グループ化の解除は、グループブロックを選択した状態で次のようにします。

①3点メニューをクリック
②”グループ解除”をクリック

グループ化解除の手順

グループブロックのコピー・複製・移動

グループブロックもコピー・複数・移動が可能です。したがって複数のブロックをまとめてコピーや移動をする際、グループ化してから実行すると確実です。

操作方法は他のブロックと同じです。
グループブロックを選択して、ツールバーから操作します。

3点メニューからのコピー操作など

移動に関しては、ツールバー内のアイコンからも可能です。
(このアイコンは、上下に他のブロックが存在しないと表示されません)

アイコンから移動

グループ化は単独のブロックでも可能

複数のブロックでなく、1つだけのブロックでも同じ手順でグループ化は可能です。

ブロック1つだけなのでグループ化ではなく、グループブロックの中に入れる、というのが正確なのでしょうが。

グループブロックの中に入れることで、グループブロックが持つさまざまな機能を使えるメリットが出てきます。(例えばパディング機能を使うとか。)

グループブロックの機能

ブロックエディターがリリースされた当初のグループブロックの機能は、『複数のブロックをグループ化する』だけでしたが、ワードプレスのバージョンアップに従いさまざまな機能が追加されてきました。

2022年5月24日リリースのワードプレスversion6.0で追加された機能を含み、以下の機能となっています。
(TT2はテーマTwenty Twenty-Two、TT1はテーマTwenty Twenty-One、TTはテーマTwenty Twenty)

機能項目機能の説明TT2TT1TT
レイアウト
の変換
ブロックの配置に『横並びへ変換』『縦積みへ変換』を選択できる
レイアウトグループブロックの横幅をカスタム設定できる
グループブロック内のテキスト色、背景色を設定できる
タイポグラフィグループブロック内のテキストのフォントサイズ、フォント見映えを設定できる
パディンググループブロックの内側余白を設定できる
マージングループブロックの上下外側の余白を設定できる
ブロックの間隔グループブロック内に配置したブロック間の間隔を設定できる
枠線グループブロックの枠線の幅、スタイル、色、角丸の設定できる

この表でわかるように、テーマ側が対応しないと使用できない機能もあるので注意しましょう。

以降順番に機能を紹介していきますが、タイポグラフィについては段落など他のブロックと同様なので割愛いたします。

※機能の設定にはブロック内ツールバーのほか、画面右に表示される設定パネルを使用します。表示されていない場合は、画面右上の設定(歯車マーク)をクリックして表示してください。

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

レイアウトの変換

デフォルトの”グループ”に加えて、レイアウトの変換機能として『横並びに変換』『縦積みに変換』を選択できます。

レイアウトの変換機能
画面右の設定パネル内(グループブロックを選択状態としてください)

”グループ”を選択

”グループ”はデフォルトのレイアウトです。グループの中に配置した各ブロックがそのまま配置されます。

配置の変更を”なし”や”幅広”を選択したとき、それぞれのコンテンツ幅をカスタマイズできるレイアウト機能も使用可能です。

レイアウトにグループを選択

”横並びに変換”を選択

”横並びに変換”では、グループブロック内の各ブロックが横並びに配置されます。CSSを使う方ならばdisplay:flex;が適用されると聞けばより理解できるでしょう。

項目(各ブロック)の揃え位置や、垂直配置の変更も可能です。

レイアウトに横並びに変換を選択

”複数行に折り返す”のON/OFFで、横スペースが不足したときに自動的に改行するかどうかを指定できます。スマホ表示を比較すると、ONにしたほうが自然に改行されて見やすくなります。

複数行に折り返すONOFFのスマホ表示比較

レシポンシブ対応を考慮すると、ONにしておくほうが無難ですね。

”縦積みに変換”を選択

”縦積みに変換”は、一見”グループ”を選択した場合と見映えが同じに見えますが、実際は異なります。”横並びに変換”を縦に並べたものと考えてください。

CSSでいえば、グループはdisplay:block;、縦積みに変換はdisplay:flex; flex-direction:column;となります。

レイアウト縦積みに変換を選択

”項目の揃え位置を変更”で各ブロックの横方向の揃え位置を変更することができます。

例えば中央揃えとすると、グループ内の全ブロックが中央に配置されます。

レイアウト縦積みに変換を選択で項目を中央揃え

文字色・背景色を設定する

グループ全体の文字色や背景色を設定すれば、同じグループ内のコンテンツであることが明確にできます。

画面右の設定パネル内の”色”で設定します。

グループブロックの色設定

試しに、背景色にグラデーションを設定してみました。

背景色を設定

グループ化した範囲がひと目でわかるようになります。

ブログ記事の中でも効果的に使えば、アクセントに使えますね。

パディング・マージンとブロックの間隔

パディング・マージンおよびブロックの間隔の設定は、下記図の赤字部分の設定です。

パディングとマージンおよびブロックの間隔

パディング(グループブロック内側の余白)とブロックの間隔の設定画面です(画面右の設定パネル)。

パディングとブロックの間隔

マージン設定は次のように操作すると設定が表示されます。上下のマージン設定のみです。

マージン設定の表示

※マージン設定は、theme.jsonで有効になっていないと表示されないので、theme.jsonのない従来テーマでは使えません。

パディング機能が表示されない場合

パディングは、ワードプレスversion5.7から導入された比較的新しい機能なので、テーマによってはこの機能が表示されないかもしれません。

その場合はfunctions.phpのafter_setup_themeフックに次の関数を追記します。

add_theme_support( 'custom-spacing' );

もし子テーマを使用しているなら、子テーマのfunctions.phpに次のコードを記述すればよいでしょう。

function wpdc_enable_gutenberg_custom_spacing() {
	add_theme_support( 'custom-spacing' );
}
add_action( 'after_setup_theme', 'wpdc_enable_gutenberg_custom_spacing' );

パディングの設定方法

ここまで作成したグループブロック事例(レイアウトは”グループ”)ですが、リストが左に寄り過ぎなので左に3文字分の余白設定をしようと思います。(リストブロックだけ、左に余白を3文字分入れる)

リストブロックにパディング設定をしていく

手順としては次のように、リストブロックを新たなグループブロックに入れて操作します。

1.リストブロックをグループ化する
2.リストブロックの入ったグループのパディング設定をする

1.リストブロックをグループ化する

リストブロック単独でグループ化すると次のようになります。

リスト表示で、リストブロック直上に新たなグループブロックが確認できます。

リストブロックのグループ化

2.リストブロックの入ったグループのパディング設定をする

リストブロック直上のグループブロックを選択した状態で画面右の情報パネルからパディングの設定をします。

次のようにすれば、左のみに3文字分の余白が挿入できます。
(上下左右、単位もpx,%,REM,EM,VWから選択可能)

①”個別設定”のボタンをクリック
②”px”をクリックして
③単位を”EM"に変更(EMは文字単位を表す)
④左のパディング設定欄に3を入力(3EM)

パディングの設定(個別設定)

リストの左に余白が設定できました。

リスト左の余白調整後

このように、複数ブロックをグループ化して使うだけでなく、単独ブロックでもレイアウト調整に使えるのがグループブロックのメリットの1つです。

枠線(幅、スタイル、色、角丸)

枠線の設定も、画面右の設定パネルで実施します。

枠線の設定

試しに幅3pxのドット枠線をつけて、角丸半径20pxとしてみました。

枠線適用事例

グループブロックへのクラス付与とHTML構造

カスタムCSSの適用などグループブロックをカスタマイズする場合は、HTML構造に注意が必要です。

グループブロックのHTML構造は、テーマや選択したレイアウト(グループまたは横並び・縦積み)によって異なるからです。

実際にクラスを付与してHTML構造がどうなるか確認しておきましょう。

グループブロックにクラスを設定する

グループブロックの情報パネルの”高度な設定”でクラス名を入力します。

①”高度な設定”をクリック
②”追加CSSクラス”にクラス名を入力

クラス名の付与

今回は、段落~画像の入ったグループブロックにdesk-list-groupというクラス名を付けてみました。

HTML構造を確認する

HTML構造は次のようになっています。

従来テーマ(theme.jsonなし)+ レイアウト”グループ”

従来テーマ(theme.jsonなし)でレイアウトに”グループ”を選択している場合、<div>タグが2重構造となります。

従来テーマ(theme_jsonなし)の場合のHTML構造

wp-block-groupwp-block-group__inner-container は、グループブロックの中に自動的に付与されるクラス名です。

ブロックテーマ、従来テーマ(theme.jsonあり)および”横並び”・”縦積み”

ややこしいですが、次の場合HTML構造がシンプル化します。

  • 従来テーマ(theme.jsonなし)でもレイアウトを”横並び”・”縦積み”とする
  • 従来テーマ(theme.jsonあり)
  • ブロックテーマ

ようは、従来テーマ(theme.jsonなし)の”グループ”レイアウト以外はすべてHTML構造が以下の通りとなります。

ブロックテーマ等でシンプル化したHTML構造

2022年5月現在は、従来テーマ(theme.jsonなし)を使っている方がほとんどだと思います。この場合、選択するレイアウトによってHTML構造が変わることには注意が必要ですね。

グループブロックのカスタマイズ事例

全幅対応テーマなら背景色を広げたコンテンツをつくれる

テーマが全幅対応しているならば、グループブロックのツールバーで全幅配置が選択できます。

グループの全幅配置

全幅配置を利用すると、ページ内のあるセクションだけ横広がりで別の背景色を指定することができます。

例えば以下のコンテンツ例は、白い背景色のページ内に黒の背景色を設定したものです。

全幅背景色のコンテンツ例

具体的には以下のように設定して作成しています。

  • グループブロックの中にスペーサー・カラム・スペーサーの順にブロックを配置してコンテンツを作成
  • グループブロックの背景色を黒に設定
  • グループブロックを全幅配置
全幅背景色のコンテンツ例設定

このようにグループブロックを使えば、いろいろなレイアウト調整が可能ですね。

おしゃれな装飾ボックス

例えばこのような、おしゃれな装飾ボックスを作成することが可能です。

出来上がったワイドタブ付ブロック

こちらの記事で作り方を解説しています。

グループブロックに独自のスタイルを追加する

このほかに、応用編としてグループブロックそのものに独自のスタイルを追加する方法もあります。

ブロックのパネル内にデフォルトスタイル以外のスタイルを追加して選択できるようにする方法です。

追加するスタイル事例

上記では、独自スタイルとして3種類の枠線スタイルを追加しています。方法は次の記事を参照ください。

ブロックバリエーションを使ってボックスを作成

グループブロックにグループバリエーションを適用すると次のようなボックスを作成することができます。

上部タイトル付ボックス
シンプルタイトル付ボックス

ブロックエディターで本文欄に段落やさまざまなブロックを配置できるほか、タイトル部のテキストも自由に入力できます。

まとめ

グループブロックは多機能になってしまったので、本来の特徴がわかりにくくなってしまいましたが、最後にもう一度グループブロックを使うシンプルなメリットをあげておきたいと思います。

  1. グループごと複数のブロックを複製・コピー・移動ができる
    (移動後にグループを解除して元に戻すこともできます)
  2. 文字色・背景色でグループ化したブロックを統一感を持たせる
    (注釈文やコラムなど、記事内にアクセントをつけて挿入するのに便利)
  3. 単独ブロックでもレイアウト調整できる
    (パディングを活用するときに便利)
  4. グループブロックのカスタマイズでいろいろなコンテンツを作成できる
    (枠線やラベルをつけた装飾ブロックなど)

ワードプレスversion6.0で横並びや縦積みなど、グループブロックでレイアウト選択の幅が広がりましたが、個人的にはあまり使わないかな、なんて思います。横並びを使いたければグループ内にカラムブロックを使えばよいと思いますし、さらに複雑なレイアウト(例えばずらしレイアウトなど)とする場合はカスタムCSSを使ったほうが簡単だからです。特にレシポンシブ対応は、カスタムCSSなしだと難しいですね。

なので、上記4つの特徴を頭に入れてグループブロックを使っていくとよいでしょう。

なおカスタマイズする場合は、HTML構造に気をつけてくださいね。

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

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

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