WordPressのブロックエディターではいくつかのブロックをまとめてグループ化(グルーピング)できます。
グループ化することで文字や背景の色をグループ毎に設定できたり、グループ単位でブロックを移動できたりすることができます。
今回はブロッエディターでブロックをグループ化するやり方について説明します。
■WordPressブロックのグループ化が便利！グルーピングのやり方(動画解説版)
(※)本記事では、WordPress5.7、無料テーマLightningを利用した環境で説明しています。
もくじ
(関連記事)ブロックエディターの使い方について
本記事では、グループ化のやり方に絞って説明していますが、エディターの使い方全体を勉強したい方は「【徹底解説】WordPressブロックエディターの使い方」を合わせてご参照ください。
ブロックをグループ化する
ここでは、事前に下記のようなブロック(見出しブロックとからブロック)を作成しておき、これらのブロックをグループ化するやり方を説明します。
グループ化したいブロックを選択して、左上の四角が重なったグルーピングアイコンをクリックします。
「グループ」と「カラム」という表示が出てきますので、グループをクリックします。
四角が重なったアイコンが出てきたら、グループ化が完了しています。
先ほどのブロックをコードエディタで見てみると、全体を囲うためのdiv要素がグループ化を設定していることがわかります。
■グループ化した後の状態
作成したグループを選択する方法
つぎに、作成したグループを左下のブロックナビゲーションから選択する方法をご紹介します。
せっかくグループ化しても、「グループ」ブロックをうまく選択できない場合があります。
グループの中の任意のブロックを選択して、左下ナビゲーションの「グループ」をクリックするとグループブロックを選択できます。
グループブロックが選択されました。グループブロックに対して、ブロックの移動やコピー、装飾をすることができます。
(例)グループ単位でのブロックの移動
グループブロックに文字色や背景色などを設定する方法
グループブロックに設定する内容で多いのが文字色や背景色の設定です。ここではグループブロックの主な設定項目をご説明します。
右上の設定アイコンを押下します。
右サイドバーにグループブロックに対してできる設定メニューが表示されます。
グループの設定＞色設定で文字色で赤を指定すると、下記のようにグループの文字が赤くなります。
※個別ブロックに色設定している場合やCSSの設定によっては思うようにならないケースもあるのでご注意ください。
文字色を白、背景色を赤にした場合はグループの中が赤背景・白文字になります。
HTMLやCSSがわかる人は、グループブロックに対して、クラス名やID名を設定すると対象グループに対してCSSでカスタマイズすることもできます。
(関連)【WordPress再利用ブロック】再利用ブロックの使い方
グループ化を解除する方法
最後にグループ化を解除する方法を説明します。
グループ化を解錠する方法は、以下の部分を①オプション、②グループ解除の順番にクリックします。
グループ化が解除されました。
まとめ
まとめです。今回は、今回はグループ化の方法から文字色や背景色の設定方法、グループ化の解錠方法を説明しました。
ブロックをグループ化することで文字や背景の色をグループ毎に設定できたり、グループ単位でブロックを移動できたりすることができます。
今回は以上になります。最後までご覧いただきありがとうございました。
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。
YouTubeチャンネル開設しました！
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。
ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。
できます。 グループ化することで文字や背景の色をグループ毎に設定できたり、グループ単位でブロックを移動で){kind=link}