カバーブロックの使い方！

トップページのカスタマイズで活躍するブロック！

WordPressのブロックエディターに標準で用意されている「カバーブロック」の使い方

カバーブロックでできること

カバーブロックは背景に画像や動画、任意の色の塗りつぶしのどれかを設定して、その上に文字などのブロックを自由に配置することができます。

ブロックの横幅の変更

ブロックツールバーから、カバーブロックの横幅を設定することができます。

例えば、1カラム(サイドバーを非表示)にした状態で「全幅」にすると、画面いっぱいにカバーブロックが広がります。

画像の表示サイズの変更

カバーブロックの表示サイズも設定することができます。

数値の設定はpxだけでなく、vh、vwなど複数の単位から設定できます。

例えば、閲覧者の画面の高さいっぱいに画像を表示したいときは「100vh」に設定してあげます。

画面いっぱいにカバーブロックが表示されます。

もしくは、ブロックツールバーの「フルハイトを切り替え」をクリックすると、簡単に画面高さいっぱい(100vh)の設定にできます。

背景固定

カバーブロックに設定した画像を固定表示することもできます。

背景固定のボタンをクリックするだけで設定できます。

固定背景を設定すると、画面がスクロールされても背景画像は動かないという演出ができます。

オーバーレイカラーの変更

画像の上に被せるカラーと透明度も設定することができます。

焦点ピッカー

カバーブロックで表示する画像の中心位置を選択することができます。

画像のサイズによっては、背景に設定した際、上下左右がトリミングされたような状態になるので、1番見せたい場所を焦点ピッカーで中心にしておくと、見切れることが無くなります。

コンテンツ位置の変更

カバーブロックの上に被せるテキストやボタンなどの要素を配置する場所を設定できます。