【WordPress】カバーブロックの使い方（固定背景、画像をサイト幅いっぱいに表示する）

WordPress には、おしゃれなデザインを作ることができる「カバーブロック」機能があります。

画像の上に文字やコンテンツを表示したり、固定背景（切り抜きイメージ）などでオシャレにデザインしたり、特にトップページのデザインで大活躍するカバーブロックです。魅力的なサイトデザインのためには要な機能ですね。

カバーブロックでできること（サンプル）

■ 画像の上に文字などのコンテンツを表示することができる

パリの写真を不透明度（25%）で設定して白文字を配置しています。

■ サイト内の表示エリア横いっぱいに広げて表示

画像をコンテンツ幅を超えて、表示できる横幅いっぱいに表示します。（どこまで表示できるかは利用しているテーマによっても変わります）

■ 画像を固定して、窓枠効果を出す

記事を上下にスクロールさせてみてください。背景の画像位置が固定されたままスクロールが動きます。

■ カバーブロックを多重に利用して、よりオシャレなデザインにする

カバーブロックの上に、さらにカバーブロックを重ねてみました。

左側にテキスト、右側にカバーブロック（固定背景）とするため、カラムブロックを利用しています。

カバーブロックの使い方

■ カバーブロックの用意と背景画像の設定

WordPress の記事作成画面で「カバー」を選択します。

カバーブロックで「アップロード」または「メディアライブラリ」から画像を指定します。

■ カバーブロックへの文字やコンテンツの重ね方

カバーブロックを配置し背景画像を設定すると初期状態で「タイトルを入力」ブロックが表示されています。

ここから文章を書いたり、（通常の記事を書く場合と同様に）画像やボタンなどを配置していくことができます。

自由にブロックを配置できますので、トップページの画像や、レコメンド（おすすめ）などに利用できますね。

■ オーバーレイ配色と透過率の設定

カバーブロックの設定でオーバーレイ（背景色）と透過率を設定します。

■ 全幅設定

幅設定のアイコンに「全幅」が追加されています。設定することで全幅設定となります。（プレビュー画面で確認してください）

※ テーマごとに全幅の幅が異なります。

■ 固定背景の設定

カバーブロックの設定で「固定背景」をONにすることで、画像が固定されます。

まとめ

WordPress には、おしゃれなデザインを作ることができる「カバーブロック」機能があります。

画像の上に文字やコンテンツを表示したり、固定背景（切り抜きイメージ）などでオシャレにデザインしたり、特にトップページのデザインで大活躍する機能です。

サイトデザインの可能性が広がりますね。かっこいいクールなサイトをぜひ作ってくださいね。