カバーブロックの活用例
グーテンベルグの機能を最大限に活かす
グーテンベルグはブロックを応用して、操作を覚えていくと、コンテンツに応じて、様々な表現が可能になります。
![](https://bcooldev.com/wp-content/uploads/2023/10/blocks_part3-1024x536.jpg)
これまでは、HTMLとCSSの知識を必要としたレイアウトやデザインがグーテンベルグによってさまざまな表現が可能になりました。
![](https://bcooldev.com/wp-content/uploads/2022/08/layout_ph05-1024x640.jpg)
使用するブロック
- カラムブロック
- 画像ブロック
- 見出しブロック
- 段落ブロック
カラムブロック
- カラムブロックを選択
- レイアウトに応じて、カラムの設定をする
![](https://bcooldev.com/wp-content/uploads/2023/10/layout3_column-menu_ph01.jpg)
今回のように、作成したレイアウトの項目がない場合は後から変更します。
- とりあえず、設定画面に移行したいので、どのパターンでも良いので、選択するか、スキップをクリックします
![](https://bcooldev.com/wp-content/uploads/2023/12/layout3_column-menu_ph02-1.jpg)
- 表示のカラムブロックの親ブロックのアイコンを選択します
![](https://bcooldev.com/wp-content/uploads/2023/12/layout3_column-menu_ph02.jpg)
- 右側のサイドメニューの「カラム」の値を変更、後からレイアウトを変更することもできます
![](https://bcooldev.com/wp-content/uploads/2023/12/layout3_column-menu_ph04.jpg)
画像ブロック
- ブロックを選択。
- 画像ブロックを選択して画像を配置します。
![](https://bcooldev.com/wp-content/uploads/2024/01/layout3_image-menu_ph04.jpg)
- 画像の挿入方法を選択します。メディアライブラリの方法を説明致します。
![](https://bcooldev.com/wp-content/uploads/2024/01/layout3_image-menu_ph01.jpg)
- 挿入する画像を選択する。
- 選択をクリック
![](https://bcooldev.com/wp-content/uploads/2023/10/layout3_image-menu_ph02.jpg)
見出しブロック
- 見出しブロックを選択
段落ブロック
- 段落ブロックを選択