基本的な使い方はこちら。

WordPressの見た目が変わった？投稿画面（エディタ）はどうやって使えばいいの？WordPress5.0で追加された「Gutenberg」とは。

WordPress5.0で追加された「Gutenberg」の投稿画面（エディタ）使い方【レイアウト編】

WordPress5.0で追加された「Gutenberg」の投稿画面（エディタ）使い方【フォーマット編】

 

グループ化機能の使い方

いくつかのブロックを選択したのち、アイコンまたは詳細メニューからグループ化を選択します。

グループ化機能を利用してできること

大概のWordPressテンプレートは、固定ページや記事ページのwidthが決まっています。
例としてインクループの記事ページのwidthは1050pxが固定で決まっています。

このテンプレートの固定ページや記事ページのwidthがフルワイド（全画面）表示で設定されていると、バックグラウンドに任意の色を設定し、全体的にフルワイドのデザインでページや記事を作成することが出来ます。

この画面は全て固定ページ内で作成しています。

以下、エディタ編集ページです。

 

各ブロックにCSSを設定する

各ブロックには細かくCSSを設定することが出来ます。

グループ化したブロックにもCSSを指定することができ、上記のレイアウトには以下のようなCSSを設定しています。

これにより、group-960をクラスに指定した要素の一階層下のdivにはmax-width:960pxが適応されることになります。
こうすることにより、

グループ化ブロック：フルワイド
その一階層下のdivブロック：max-widthが960px

となり、グループ化された部分はフルワイドデザインとなります。

 

グループ化されたブロックには背景色・アンカーリンクが設定可能

グループ化されたブロックには、背景色とアンカーリンクが設定可能になります。

グループ化がフルワイド設定されていると、バックグラウンドカラーが一面に伸びるので、きっちりとコンテンツが分けられます。
使い方をマスターして、よりわかりやすいコンテンツ作りをしていきましょう！