【Cocoon】カバーブロックの背景画像を横幅100％のフルワイドに

2025年2月8日2025年2月18日

1カラムサイトで背景画像をブラウザ横幅いっぱいに広げたい

1カラムサイトで、特定のコンテンツブロックのみ、背景画像や背景色を余白ナシのブラウザ横幅いっぱいに広げる設定方法です。※ サイドバー有りの2カラムでは表示出来ません。

ページ設定で ページタイプ “1カラム（フルワイド）” を選択するとコンテンツ内容全てがフルワイド＋左右余白 “30px” になるため、ページタイプは “フルワイド” 以外を選択。

ページ設定＞ページタイプ＞ 1カラム（広い） を選択。

ブロックは “カバーブロック” を選択

カバーブロックの高度な設定＞追加CSSクラスに任意のCSS名（今回は ”wp-block-cover-full”）を追加

Note

追加CSSクラスには「 .wp-block-cover-full 」の最初の「 . 」を付けずに「wp-block-cover-full」のみを追加

外観＞テーマファイルエディター＞スタイルシート(style.css) にCSSクラスを追加

.wp-block-cover-full {
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	padding: 0 calc(50vw - 50%);
}

以上で、任意のブロック背景画像を横幅いっぱいの100％表示となります。

引用元の「Cocoon-grayish」様のサイトにて詳しく丁寧に紹介されています。
引用元：Cocoon-grayish – サイト型フロントページにも使える！カバーブロックを画面の幅いっぱいに広げるサンプルコード