目次
目次

簡単に、SWELL風の「フルワイド」ブロックを作成する方法

Cocoonカスタマイズ集
この記事は約3分で読めます。
記事内に広告が含まれています。

はじめに

以下を実現します。

Cocoonでフルワイド（全幅レイアウト）｜背景だけ横幅いっぱいに広げるCSSとカラムブロック設定
Cocoonのフルワイド（全幅レイアウト）をコピペで実装する方法を解説。背景だけを画面幅いっぱいに広げ、コンテンツは中央配置のまま表示。HTML版・カラムブロック版の手順や横スクロール対策も紹介します。
turicco.com

ダウンロード

以下のデータをコピーし、そのまま「段落」ブロックに貼り付けます。

ページ設定→ページタイプ「1カラム（広い）」に設定します。

コピーする
<!-- wp:group {"align":"full","backgroundColor":"watery-yellow","layout":{"type":"default"}} -->
<div class="wp-block-group alignfull has-watery-yellow-background-color has-background"><!-- wp:paragraph -->
<p>好きなブロックを追加</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>好きなブロックを追加</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"full","backgroundColor":"watery-green","layout":{"type":"default"}} -->
<div class="wp-block-group alignfull has-watery-green-background-color has-background"><!-- wp:paragraph -->
<p>好きなブロックを追加</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>好きなブロックを追加</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:html -->
<style data-wp-block-html="css">
.body {
  overflow-x: clip;
}

.body .alignfull {
  margin: 0 calc(50% - 50vw);
  padding: 30px calc(50vw - 50%);
}
</style>
<!-- /wp:html -->

完成イメージ

実装手順

以下の手順で実装します。

  • ラベル
    Gutenbergエディターでの設定
    Gutenbergエディター

    以下の手順で作成します。

    1. 同じグループとしたいブロックを選択し「グループ化」し、「コンテント幅を使用するインナーブロック」をオフとします。
    2. 配置「全幅」を選択します。
    3. 背景色を設定します。

    Gutenbergエディター

    ページ設定→ページタイプ「1カラム（広い）」に設定します。

  • ラベル
    CSSを追加

    以下のコードをstyle.cssに追加します。

    .body {
  overflow-x: clip;
}

.body .alignfull {
  margin: 0 calc(50% - 50vw);
  padding: 30px calc(50vw - 50%);
}

    ブロックの配置を「全幅」に設定した場合、WordPressの標準機能によって.alignfullクラスが付与されます。
    しかし、テーマ「Cocoon」自体がこの全幅表示をサポートしていないため、正しく表示させるにはCSSを追加する必要があります。

さいごに

子要素を親要素からはみ出して表示させる方法については、ネットにさまざまな情報が書かれています。
ブロックを工夫すれば、HTMLの記述なしで簡単に実現できます。
この方法はWordPressの標準機能を活用しているため、他のテーマでも利用可能です。

タイトルとURLをコピーしました