Cocoonでフルワイド（全幅）デザインを作ろうとすると、次のような問題でつまずくことがあります。
- 背景色を付けても左右に余白が残る
- 幅を広げるとコンテンツまで広がる
私も最初は何度か試行錯誤しましたが、ポイントは「背景を広げるCSS」と「コンテンツを中央に戻すCSS」を組み合わせることでした。
この記事では、実際にサイトで使っているフルワイドレイアウトの作り方を、HTML版とカラムブロック版の両方で紹介します。
フルワイド化そのものはAIでも調べられますが、トップページ等にそのまま使えるようにレイアウトの余白調整まで含めた完成形です。
まずは完成イメージを確認したい方はデモページをご覧ください。
フルワイド（全幅レイアウト）はどこで使える？活用例を紹介
フルワイドは、トップページやファーストビューなど「第一印象を作る場所」で効果を発揮します。
例えば、次のようなシーンでよく使われます。
- サイト型トップページ
- 画像スライダー
- サービス紹介エリア
- CTAセクション
実際の活用例はこちら。
実装前の準備｜固定ページを1カラムにする
フルワイドレイアウトを正しく表示するため、先に固定ページの設定を整えておきます。
- 管理画面 →「固定ページ」→「固定ページを追加」
- タイトルを入力（トップページなどでOK）
- サイドバー「ページ設定」→「ページタイプ」で「1カラム（狭い）」または「1カラム（広い）」を選択
- 「下書き保存」をクリック
※ 1カラムにするのがポイントです
設定が完了したら、実際にフルワイドレイアウトを作成していきましょう。
Cocoonでフルワイド（全幅）レイアウトを実装する手順
HTML基本コードとカラムブロックを使う２つの方法があります。
初心者はカラムブロック版がおすすめです。
ここではフルワイド化の土台となるHTML構造とクラス設定まで解説します。実際に背景を画面幅いっぱいに広げるCSSや、Cocoonの余白調整を含む完成版CSSはこの先で紹介しています。
クラス追加（HTMLコード版）
カスタムHTMLブロックを追加し、以下のような構造でセクションを作成します。
<div class="full-wide color-area-1">
セクション1のコンテンツ
</div>
<div class="full-wide color-area-2">
セクション2のコンテンツ
</div>
<div class="full-wide color-area-3">
セクション3のコンテンツ
</div>クラスの役割
full-wide：背景を画面幅いっぱいに広げるcolor-area-*：セクションごとの背景色を指定
※複数クラスは半角スペースで区切ります。
クラス追加（カラムブロック版）
カラムブロック版は、ブロックで編集できる＆背景色の変更もコード不要なのがメリットです。
①外枠を作成する
「カラム」ブロックを追加→
（1カラム（100）を選択）
ここから先では、背景を全幅表示するCSSだけでなく、Cocoon特有の余白調整や不要要素の整理まで含めた「そのまま使える完成版CSS」を公開しています。
フルワイド実装の完成セット
- 背景を画面幅いっぱいに表示
- パンくず・記事タイトル・アイキャッチなど不要要素を整理
- Cocoon特有の余白を調整
- 横スクロールを防止
- コピペでそのまま使える完成版CSS
- CSSが保存できない場合の対処法
カスタマイズ全体の流れ
- 登録：codocへ会員登録（初回のみお願いします）
- 入力：有料エリアの内容をご自身で入力してください
- 確認：プレビューで表示確認して完了です
販売者情報は 「特定商取引法に基づく表記」をご確認ください。
Comment 記事の感想を書き込んでいただけると幸いです
こんにちは。
以前はっちゃん様の『Cocoonで作るサイト型トップページ／オシャレなSWELL風（HTML、CSS使用）』の有料公開部分を購入しサイトのトップページをカスタマイズしました。
その後『Cocoonでフルワイド！固定ページのセクションを幅いっぱいに広げて背景色をつける方法』の記事で背景色をつけようと思い購入してHTML部分にコードを入れたのですが、何故か反映されません。（画像参照）
固定ページのカスタムCSSにもコードをきちんと入れたのですが、HTML部分へのコードの入れ方に問題があるのでしょうか。
何かやり方が間違っていたら教えて頂けると幸いです。
> しゅんさん、こんにちは。
まずCSSのエラーがありますので、修正をお試しいただければと思います。
詳細はメールでお返事させていただきました。
よろしくお願いします。