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

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

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

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

詳細はこちら

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

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

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

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

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

本記事でわかること

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

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

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

グループブロックの機能
(デフォルトでできるスタイルを適用する)
 ・文字色、背景色を設定する
 ・パディングを設定する(単独ブロックでも便利)

カスタムCSSを適用する
 ・クラスを設定する
 ・HTML構造を正確に把握する
 ・カスタムCSS適用事例

※ワードプレスversion5.7からグループブロックにパディング機能がつきました。
未対応のテーマもありますが、その場合の対処方法も紹介します。

目次

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

グループ化の手順

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

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

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

複数のブロックを選択

2.グループ化する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

グループブロックの選択

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

段落ブロックの選択

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

グループアイコン

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

グループ化解除の手順

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

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

グループ化解除の手順

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

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

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

グループブロックの中に入れることで、グループブロックの機能を使えるメリットが出てきます。
(後ほどパディング機能の紹介で使います)

グループブロックの機能

グループのコピー・複製・移動

グループ化すれば、グループごとコピー・複数・移動が可能です。

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

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

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

アイコンから移動

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

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

グループブロックを選択した状態で、画面右の情報パネルから操作します。

グループブロックの情報パネル

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

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

情報パネル内の”色”を開けると、テキスト色と背景色の設定ができるようになります。

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

試しに、テキスト色にカスタムカラーから濃い緑色、背景色をグラデーションから選択して設定してみました。

グループブロックにテキスト色と背景色を設定後

グループ化しても見た目が変わらなかったのが、これで一気に変化しました。

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

パディング(ブロック内余白)を設定する

パディング(ブロック内余白)は情報パネル内から設定できます。

パディング設定

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

パディングは、ワードプレス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文字分の余白設定をします。

リストのレイアウト調整前

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

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

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

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

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

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

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

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

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

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

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

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

リスト左の余白調整後

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

グループブロックにカスタムCSSを適用する

グループブロックにクラス名を付与しておくと、グループ全体にCSSを適用することができます

例として、ここまで作成したグループブロック全体に、角を丸くするカスタムCSSを適用します。

なお、カスタムCSSの基本的な知識については次の記事がおすすめです。

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

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

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

クラス名の付与

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

CSSを記述

次のCSSを記述します。border-radius:20px;で角に半径20pxの丸みをつけます。

.desk-list-group {
  border-radius: 20px;
}

CSSの記述場所は、テーマカスタマイザーの追加CSS欄、子テーマのstyle.cssおよびプラグインを使う、などいろいろありますので、ご自分に合った方法を選択ください。私の推奨は子テーマのstyle.cssです。

CSSを適用後、web表示させると次のような見映えになります。
(カスタムCSSはエディター内には反映されない場合があるのでweb表示させて確認します)

CSS適用後web表示

HTML構造を確認する

カスタムCSSを使えば、このほかにもでさまざまなデザインが可能となります。そのためにもHTML構造を正確に把握しておきましょう

グループ化した場合のHTML構造は次のようになっています。

グループブロックのHTML構造

最上位にクラス名wp-block-groupの<div>、さらにその下にクラス名wp-block-group__inner-containerを持つdivタグが配置され、その下位にグループ化した各ブロックが入ります。

また、最上位のdivには自分で設定したクラス名desk-listgroupも付与されます。

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

実際に今回作成したグループブロックをGoogle Chromeの開発者ツールで確認すると次の通りです。

Google Chrome確認HTML

カスタムCSSを適用する場合は、このHTML構造を十分に生かしたCSSを記述するようにしましょう。

カスタムCSS適用事例

おしゃれな装飾ボックス

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

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

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

フレックスボックスでレイアウト調整

このほかにも、フレックスボックスを利用してグループ内のレイアウトをフレキシブルに変更が可能です。

例えば画像ブロックでサムネイル画像を3つ配置したものをグループ化します。
このままだと縦に並びます。

サムネイル画像を縦に並べる

このグループブロックにimage-groupというクラス名をつけて次のCSSを適用させます。

.image-group .wp-block-group__inner-container {
  display: flex;
  justify-content: space-between;
}

(HTML構造で確認したように、.image-groupの中にある.wp-block-group__inner-containerにフレックスボックスを適用すればよいでしょう)

CSS適用後は横に並びます。

画像が横に並ぶ

このようにいろいろな応用ができそうですね。

まとめ

最後にもう一度グループブロックを使うメリットを確認しておきましょう。

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

グループブロックはアイデア次第でさまざまなコンテンツを作成可能なおもしろいブロックだと思います。

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

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

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