Cocoonでフルワイド（全幅）デザインを作ろうとすると、次のような問題でつまずくことがあります。
- 背景色を付けても左右に余白が残る
- 幅を広げるとコンテンツまで広がる
私も最初は何度か試行錯誤しましたが、ポイントは「背景を広げるCSS」と「コンテンツを中央に戻すCSS」を組み合わせることでした。
この記事では、実際にサイトで使っているフルワイドレイアウトの作り方を、HTML版とカラムブロック版の両方で紹介します。
まずは完成イメージを確認したい方はデモページをご覧ください。
Contents
フルワイド（全幅レイアウト）はどこで使える？活用例を紹介
フルワイドは、トップページやファーストビューなど「第一印象を作る場所」で効果を発揮します。
例えば、次のようなシーンでよく使われます。
- サイト型トップページ
- 画像スライダー
- サービス紹介エリア
- CTAセクション
実際の活用例はこちら。
実装前の準備｜固定ページを1カラムにする
フルワイドレイアウトを正しく表示するため、先に固定ページの設定を整えておきます。
- 管理画面 →「固定ページ」→「固定ページを追加」
- タイトルを入力（トップページなどでOK）
- サイドバー「ページ設定」→「ページタイプ」で「1カラム（狭い）」または「1カラム（広い）」を選択
- 「下書き保存」をクリック
設定が完了したら、実際にフルワイドレイアウトを作成していきましょう。
フルワイド実装手順（HTML版）
ここから先では、実際にサイトで使用しているフルワイドコード一式を公開します。
コピペだけで再現できます。
ここから先で解説する内容
- HTMLコード
- フルワイド・余白調整CSS一式
- 背景色切り替えコード
- カラムブロック版の実装方法
- 横スクロール時の対処法
- CSSが効かない時の確認ポイント
販売者情報は 「特定商取引法に基づく表記」をご確認ください。
Comment 記事の感想を書き込んでいただけると幸いです
こんにちは。
以前はっちゃん様の『Cocoonで作るサイト型トップページ／オシャレなSWELL風（HTML、CSS使用）』の有料公開部分を購入しサイトのトップページをカスタマイズしました。
その後『Cocoonでフルワイド！固定ページのセクションを幅いっぱいに広げて背景色をつける方法』の記事で背景色をつけようと思い購入してHTML部分にコードを入れたのですが、何故か反映されません。（画像参照）
固定ページのカスタムCSSにもコードをきちんと入れたのですが、HTML部分へのコードの入れ方に問題があるのでしょうか。
何かやり方が間違っていたら教えて頂けると幸いです。
> しゅんさん、こんにちは。
まずCSSのエラーがありますので、修正をお試しいただければと思います。
詳細はメールでお返事させていただきました。
よろしくお願いします。