こんにちは、なお（@nao_koresore）です！
先日、WordPressのブロックエディターで、グループ化という機能を使ってリスト（箇条書き）に枠線（ボーダー）をつけたり、背景を修飾する方法をご紹介しました。
今回は、ブロックエディターの「グループ化」について、次のことをまとめてみました。
- グループ化（グループブロック）の概要
- グループ化の方法（作成、修飾、修正など）
- グループブロックを使うときに便利なこと
グループ化とは
ブロックエディターの「グループ化」とは、ざっくり言うと
複数のブロックをグループブロックでひとまとめにする
というものです。
「グループブロック」というブロックで複数のブロックを包んで、ひとつのものとして扱えるようになる感じです。
この場合、外側のグループブロックが「親」、中に入っているそれぞれのブロックが「子」という関係で、「入れ子」の状態になっています。
グループ化を行うことで、次のようなメリットがあります。
グループ化のここがいい！
- 複数のブロックをまとめて移動するのが簡単
- グループ化した後でも、グループ内の修正も可能
- グループブロックへ修飾できる
ひとつずつご紹介します。
複数のブロックをまとめて移動するのが簡単
グループ化すると、見出しブロックや段落ブロック、画像ブロックなど、いろいろなブロックをひとかたまりにして扱えるようになります。
それによってグループ単位での移動ができるようになり、簡単にまとめて移動することができます。
グループ化した後でも、グループ内の修正も可能
グループ化した複数のブロックはひとかたまりとして扱われますが、中に入っている「子」の各ブロックが、何か他のものへ変換されるわけではありません。
あくまでも、「親」のグループブロックが「子」の各ブロックを包んでいるだけです。
ですので、グループ化した後でもグループ内にある各ブロックの修正はいつでも行うことが可能です。
その他、
- グループ内のブロックの順番を変更する
- グループ内へ新しくブロックを追加する
- グループ内のブロックを削除する
- グループを解除する
といったこともできるので、いつでも自由に編集することが可能です。
グループブロックへ修飾できる
親となっているグループブロックへ修飾することが可能です。
基本のブロックエディターでは、背景色を設定することができます。
当ブログでも使用しているテーマ「SWELL」では、このグループブロックへ修飾する機能が大幅に強化されています。
これにより、グループ全体にボーダー（枠線）をつけたり、背景色やパターンの設定など、マウスでクリックするだけで豊富なデザインから簡単に設定することができます。
- リスト
- リスト
- リスト
- リスト
なおふきだしをグループにすることもできちゃいます
おくさんマウスの操作だけでできますよ
WordPressテーマ「SWELL」についてはこちらでご紹介しています。
よろしければ併せてご覧ください。
グループ化の方法
それでは実際にグループ化を行う手順をご紹介しましょう。
ここでは、「先にグループ化したいブロックを選択して、それらをグループ化する」方法をご紹介します。
例として、ここでは
- 画像ブロック
- 段落ブロック
- リストブロック
- ボタンブロック
と、並んでいる4つのブロックをグループ化してみます。
グループ化したいブロックを選択する
まずはじめに、グループ化したいブロックを選択します。
選択する方法は2つあります。
（どちらも結果は同じです）
（１）マウスでグイッと選択
ひとつ目の方法は、マウスでグイッと選択する方法です。
目的のブロックをマウスの左ボタンを押したまま選択していきます。
すると、選択されたブロックには青い枠がつき、内容が青く反転されます。
ブロックが選択できたら、マウスの左ボタンを離します。
マウスで簡単に選択できてわかりやすい方法です。
（２）Shiftキーを押しながら選択
もう一つの方法は、最初と最後のブロックをクリックして選択する方法です。
まずはじめのブロックを選択します。
（今回の場合は、一番上の画像ブロック）
次に、キーボードの「Shiftキー」を押しながら、最後のブロックをクリックします。
（今回の場合は、一番下のボタンブロック）
すると、その間のすべてのブロックが選択され青い枠がつきます。
縦に長くマウスではスクロールしてやりづらい時などに便利な方法です。
グループ化
ブロック選択できたら、いよいよグループ化します。
グループ化する方法も2つあります。
（どちらも結果は同じです）
（１）ブロックの変更にある「グループ化」
ひとつ目の方法は、選択したグループのすぐ上に表示されているツールバーから「ブロックの変換」をクリックして、表示される「グループ」をクリックします。
するとグループ化され、4つのブロックの外側にグループブロックが作成されます。
（２）詳細設定にある「グループ化」
もう一つの方法は、選択したグループのすぐ上に表示されているツールバーから「詳細設定（縦に3つ点が並んでいるもの）」をクリックして、表示されるメニューにある「グループ化」をクリックします。
するとグループ化され、4つのブロックの外側にグループブロックが作成されます。
修飾をする
グループ化の大きな魅力のひとつが、グループブロックへの修飾です。
グループ化して作成されたグループブロックへ修飾することができます。
グループブロックを選択すると、右側のサイドバーにグループブロックの設定が表示されます。
そこからグループブロックへいろいろな修飾を行うことができます。
上の画像はテーマ「SWELL」の時の様子です。
SWELLでは、グループブロックに様々な修飾が可能です。
使用しているテーマによって、設定できる項目が異なります。
（標準では背景色のみ）
グループブロックへ二重線をつけた様子
グループの移動
グループ化で便利なのが、グループ単位の移動です。
ブロックエディターでは記事はたくさんのブロックによって作られています。
グループ化で複数のブロックをひとかたまりにしておけば、簡単にわかりやすく移動させることができます。
グループの移動は、まず移動させたいグループブロックを選択します。
あとは、他のブロックの時と同様に「上に移動ボタン」や「下に移動ボタン」でグループごと移動させることができます。
グループ内の修正
グループブロックの中に入っている各ブロックは、グループ化した後でもいつでも修正することができます。
修正したいブロックをクリックして、いつものように修正できます。
また、グループ内でブロックの移動も「上に移動ボタン」や「下に移動ボタン」で変更できます。
さらに、「ブロックの追加」で新しくブロックを追加したり、いらないブロックは「ブロックの削除」で削除できます。
グループの解除
グループ化したあとでも、いつでもグループを解除することができます。
解除したいグループブロックを選択し、ツールバーにある「詳細設定（縦に3つ点が並んでいるもの）」の中の「グループ解除」をクリックします。
すると、親となっている外側のグループブロックが削除され、グループが解除されます。
グループブロックを使用するときに便利なこと
上記のように、グループ化を行うとグループブロックが作成されて、その中に各ブロックが入った入れ子の状態になります。
グループブロックを使うときに、
- グループがどのような構造になっているのか
- 親のグループブロックをパッと選択したい
を解決してくれる便利な機能があります。
記事を作成していると、特に「（２）親のグループブロックをパッと選択したい」に困らされるときがあります。
というのも、「子」の各ブロックについては、クリックするだけで簡単に選択することができます。
一方、「親」となっているグループブロックを選択したい場合、直接マウスでクリックしようとすると、子のブロックの少し外側をクリックしなければならず、少しわかりづらいのが欠点です。
これらを簡単にしてくれる方法が2つあります。
ブロックナビゲーション
ブロックエディターには、「ブロックナビゲーション」という機能が用意されています。
ブロックナビゲーションは、記事がどのようなブロックで構成されているかをわかりやすく表示してくれます。
通常の状態でのブロックナビゲーション
編集画面の上部にある「ブロックナビゲーション」のアイコンをクリックします。
すると、その記事のブロックの種類と順番が表示され、どのような構造になっているのかがひと目でわかります。
グループブロックの中を選択中のとき
また、グループブロックや、グループの中にあるブロックを選択中の場合には、そのグループがどのような構造をしているかだけを表示するように変化します。
また、ブロックナビゲーションでは、表示されたリストで目的のブロックをクリックすると、そのブロックを選択することができます。
そこで、ブロックナビゲーションのリストにあるグループブロックをクリックするだけで、親のグループブロックを簡単に選択することができます。
直接マウスでは選択しづらかったストレスから解放されて便利です。
パンくずナビゲーション
ブロックエディターの編集画面一番下に、パンくずリストのように、選択しているブロックまでの構造が表示されています。
たとえば今回の「4つのブロックをグループ化」した例では、子のリストブロックを選択した場合、エディターの左下に
文書 → グループ → リスト
と、表示されます。
「文書」は編集している記事のことです。
なので、このリストブロックを選択して表示される「文書 → グループ → リスト」は、
この記事にある「グループブロック」の中にある「リストブロック」
ということになります。
一見地味に見えますが、現在選択しているブロックがどういう構造になっているのか一目瞭然で、入れ子になっている様子がよくわかります。
さらに、ここの「グループ」をクリックすると、親のグループブロックを簡単に選択することができます。
「ブロックナビゲーション」「パンくずナビゲーション」のどちらでも、ブロックの構造がよくわかり、また目的のブロックを簡単に選択することができます。
これがなかなか便利で、「うまくグループブロックを選択できない！」というイライラから解放されるのでおすすめです。
私個人的には、「パンくずナビゲーション」の方が、いつも表示されているので使用頻度が多いです。
まとめ
今回は、ブロックエディターの「グループ化」についてご紹介しました。
グループ化は、「グループブロック」で複数のブロックをひとまとめにする機能です。
- 複数のブロックをまとめて移動が簡単に行える
- グループ化した後でも、グループ内の修正も可能
- グループブロックへ修飾できる
これらを使うことで、記事の作成・編集が捗ったり、デザイン的にも目立たせたりわかりやすく表示することができます。
グループ化は簡単な作業で行うことができ、グループ化の後でも修正やグループの解除は可能です。
また、グループの構造をわかりやすく表示したり、選択が簡単に行える「ブロックナビゲーション」「パンくずナビゲーション」もご紹介しました。
ぜひ一度お試しください。
コメント