Cocoon でフルワイドのセクションを作成する

この記事では、WordPress の無料テーマ Cocoon でフルワイドのセクションを作成する方法を解説します。

見本

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed justo fringilla, feugiat risus et, auctor leo. In eget tortor dignissim risus semper luctus ac mollis ipsum. Aliquam imperdiet quam quis metus suscipit porta.

ボタン

カスタム CSS を追加する
セクションを作成する

カスタム CSS を追加する

以下の CSS を追加します。

/* フルワイド セクション */

.full-width {
	width: 100vw;
	margin: 0 calc(-50vw + 50%);
	padding: 2rem calc(50vw - 50%)!important;
	overflow: hidden;
	background-color: #00a3af;
}

WordPress でテーマに CSS を追加する方法については、以下の記事を参照してください。

セクションを作成する

フルワイドのセクションに含めるコンテンツを入力します。
入力したコンテンツをグループ化します。
グループを選択します。
右ペインの [ブロック] タブを選択します。
右ペインの [レイアウト] メニューを選択します。
[コンテント幅を使用するインナーブロック] オプションをオンにします。
[コンテンツ] オプションと [幅広] オプションを 100% に設定します。
右ペインの [高度な設定] メニューを選択します。
[追加 CSS クラス] フィールドに CSS のクラス名 full-width を入力します。
[HTML 要素] ドロップダウンから <section> オプションを選択します。