WordPress ブロックのグループ化 グルーピング方法

WordPress

WordPressブロックのグループ化が便利!グルーピングのやり方

WordPressのブロックエディターではいくつかのブロックをまとめてグループ化(グルーピング)できます。

グループ化することで文字や背景の色をグループ毎に設定できたり、グループ単位でブロックを移動できたりすることができます。

グループブロックの概念
 

今回はブロッエディターでブロックをグループ化するやり方について説明します。
 
■WordPressブロックのグループ化が便利!グルーピングのやり方(動画解説版)


 

(※)本記事では、WordPress5.7、無料テーマLightningを利用した環境で説明しています。
 


 

(関連記事)ブロックエディターの使い方について

本記事では、グループ化のやり方に絞って説明していますが、エディターの使い方全体を勉強したい方は「【徹底解説】WordPressブロックエディターの使い方」を合わせてご参照ください。

 

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

ここでは、事前に下記のようなブロック(見出しブロックとからブロック)を作成しておき、これらのブロックをグループ化するやり方を説明します。
事前に作成したブロック
 

グループ化したいブロックを選択して、左上の四角が重なったグルーピングアイコンをクリックします。
ブロックを選択してグルーピングアイコンをクリック
 

「グループ」と「カラム」という表示が出てきますので、グループをクリックします。
グループをクリック
 

四角が重なったアイコンが出てきたら、グループ化が完了しています。
グループ化が完了
 

(補足)グループ化によってソースコード上はどのように変わったか

先ほどのブロックをコードエディタで見てみると、全体を囲うためのdiv要素がグループ化を設定していることがわかります。

■グループ化した後の状態
グループブロックの状態をコードエディターで確認

 

作成したグループを選択する方法

つぎに、作成したグループを左下のブロックナビゲーションから選択する方法をご紹介します。
 

せっかくグループ化しても、「グループ」ブロックをうまく選択できない場合があります。
作成したグループをうまく選択できない
 

グループの中の任意のブロックを選択して、左下ナビゲーションの「グループ」をクリックするとグループブロックを選択できます。
左下のグループをクリック
 

グループブロックが選択されました。グループブロックに対して、ブロックの移動やコピー、装飾をすることができます。
グループが選択されました
 

(例)グループ単位でのブロックの移動
グループブロックの移動
 

グループブロックに文字色や背景色などを設定する方法

グループブロックに設定する内容で多いのが文字色や背景色の設定です。ここではグループブロックの主な設定項目をご説明します。
 

右上の設定アイコンを押下します。
設定アイコンをクリック
 

右サイドバーにグループブロックに対してできる設定メニューが表示されます。
グループブロックの設定メニュー
 

グループの設定>色設定で文字色で赤を指定すると、下記のようにグループの文字が赤くなります。
グループブロックを赤文字にする
※個別ブロックに色設定している場合やCSSの設定によっては思うようにならないケースもあるのでご注意ください。
 

文字色を白、背景色を赤にした場合はグループの中が赤背景・白文字になります。
グループブロックに背景色と文字色をつける
 

HTMLやCSSがわかる人は、グループブロックに対して、クラス名やID名を設定すると対象グループに対してCSSでカスタマイズすることもできます。
グループブロックにID・クラス名を付与
 

グループブロックを再利用ブロックに登録して、雛形として活用しても便利だと思います。
(関連)【WordPress再利用ブロック】再利用ブロックの使い方

 

グループ化を解除する方法

最後にグループ化を解除する方法を説明します。
 

グループ化を解錠する方法は、以下の部分を①オプション、②グループ解除の順番にクリックします。
グループ化解除をクリック
 

グループ化が解除されました。
グループ化が解除された
 

まとめ

まとめです。今回は、今回はグループ化の方法から文字色や背景色の設定方法、グループ化の解錠方法を説明しました。
 
グループブロックの概念

 

ブロックをグループ化することで文字や背景の色をグループ毎に設定できたり、グループ単位でブロックを移動できたりすることができます。
 

まだ少し慣れない部分もありますが、慣れていったらとても便利そうですね!

自分で触ってみないことにはなかなかわからないことも多いと思いますので、興味がある方はたくさん触ってみて覚えてください。

 

今回は以上になります。最後までご覧いただきありがとうございました。
 

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


 

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室

自分でホームページ作成・Web集客したいホームページ作成スクール・教室 WEBST8

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressホームページの作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

【2020年版WordPress(ワードプレス)の使い方総まとめ】

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-WordPress
-, ,