Gutenbergエディタ、「カバー」ブロックを使ってみた


【2020年3月更新】

Gutenbergエディタの「カバー」ブロックを使ってホームをデザインしてみました。

「投稿」または「固定ページ」の編集画面にて、「ブロックの追加 → 一般ブロック → カバー」にあります。

Gutenbergのカバーブロック
Gutenbergのカバーブロック

カバーをテーマのカラーパレットから選ぶか、メディア (=画像ファイル)から選ぶかを指定したら、カバーが出来ます。

Gutenberg、カラーブロック、詳細設定
Gutenberg、カラーブロック、詳細設定

オーバーレイの色や透過率を自由に設定できるほか、文字の色やURLリンクなどを調整できます。

※カラーパレットにカスタムカラーがついているかどうかは、テーマ依存の様です。

↓サンプル

カラムの中に埋め込んでみた

「ブロックの追加 → レイアウト要素 → カラム」

Gutenberg、カラムブロック、サンプル
Gutenberg、カラムブロック、サンプル

カラムブロックの中にカバーブロックを埋め込むとなかなか素敵なホーム画面が出来ました。

※テキストブロック、リストブロック、テーブルブロックなどとの複合ブロックを形成する場合は、モバイルでの表示状態を確認しながら調整したほうがベターです。

最終的には↓のような感じになりました。

Gutenberg、カバーブロックで作ったホーム
Gutenberg、カバーブロックで作ったホーム

最後までお読みいただきありがとうございました。


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です