Cocoonでフルワイド！固定ページのセクションを幅いっぱいに広げて背景色をつける方法

今回は固定ページを使ったトップページ作成に+αして使えるカスタマイズ。

フルワイドにして各セクションに背景色をつける方法をご紹介します。

このカスタマイズをマスターするとトップページの雰囲気が大きく変わります。

興味のある方は読み進めてくださいね。

この記事を書いた人

• ブログ好きな40代主婦
• CocoonサイトをCSSでカスタマイズ
• JavaScriptを勉強中
• ドメインパワー40
• 有料記事、累計230件購入いただいています、感謝！

はっちゃん
です

Cocoonフルワイドカスタマイズの完成イメージ

まずはビフォーアフター画像をご覧ください。

カスタマイズ前

入力したコンテンツはテーマで設定されたコンテナ（枠）の中に入ります。

カスタマイズ後

入力したコンテンツをセクションごと区切りコンテナ（枠）から脱出させます。

カスタマイズ内容

1. セクションの枠を作る
2. セクション（コンテンツ表示エリア）の横幅をビューポート幅（表示領域）いっぱいに広げる
3. セクションごとに背景色をつける
4. 不要な要素、余白の調整

HTMLでセクションの枠を作り、CSSで背景色をつけて余白の調整をします。

自分でこのようにしたいと思っても失敗したことはないでしょうか。実際に当サイトにもお問い合わせをいただくことがあります。

例１）セクションに背景色をつけたら両側に余白があってイマイチ…

例２）フルワイドにはできたけど、コンテンツまで左右に広がってしまいバランスが悪い…

こんな悩みを解決します！

実際に当記事のカスタマイズを反映させるとこのように完成します。

Cocoonサイト型トップページのカスタマイズと組み合わせOK

トップページの作り方（コンテンツ内容）はこちらの記事で紹介しています。

Cocoonで作るサイト型トップページ／オシャレなSWELL風（HTML、CSS使用）

この記事では、テーマ【Cocoon】でのサイト型トップページの作り方をご紹介します。 この記事について 当記事で作成できるトップページのサンプルはこちら。 見出し、リンクボタンのデザインを変更しました New コピペできるコードを有料公開し...

turicco.com

当サイトのトップページは当記事（フルワイドにする方法）とこのトップページ作成の記事の内容を組み合わせて作っています！

「トップページ」と「フルワイド」を組み合わせて使えるようにコードを統一しました。（各セクションにつけたクラス名 section-wrap を合わせました）

<div class="section-wrap color-area-1">
   
</div>

/*セクション背景色*/
.color-area-1{
	background-color:#eee; /*カラーコードをここで設定*/
}

同じコードを用いて作成したサンプルページがこちらです。

カバーブロックの幅をこのように広げるといった使い方もできるので便利ですよ。

Cocoonフルワイドトップページを採用しているサイト

当サイト以外にもフルワイドトップページを採用しているCocoonサイトを紹介します。配色の使い方等、フルワイドのイメージを膨らませてくださいね。（デザインは変更される可能性があります）

また、当記事のフルワイドを実装されたサイトを掲載させていただきますので、ご希望の方はお問い合わせください。（※随時受付中）

koikenote

URL：https://koikenote.com/
運営：こいけ さん

さらば、思うだけ

URL：https://yoko51.com/
運営：yoko さん

雨止み屋ブログ

URL：https://ameyamiya-ot.com/
運営：あめやみや さん

はるのとなり

URL：https://chibaharu.net/
運営：ちばはる さん

ふじこLIFE

URL：https://fujicolife.com/
運営：ふじこ さん

どのサイトもオシャレ～！！！

このように、フルワイドにすることでCocoonに見えないトップページ作成が可能です。

Cocoonフルワイドに必要！サイズを表すCSSの単位

当カスタマイズでキーとなるのが単位。CSSではサイズ（幅）を表すために主に下記の単位が使われます。

この記事では幅を表すために%とvwの２つを使います！

Cocoonトップページ作成で必要なコンテンツの幅について

通常、記事を作成するとテーマで設定された枠内にコンテンツが配置され、ビューポート（表示領域）の左右にはバランスよく余白が配置されます。（PCで表示した場合）

それぞれの幅をCSSの単位で表すとこのようになります。

コンテンツ幅を画面いっぱい（ビューポート幅）に広げるカスタマイズをしていきます。

余白（margin）の幅を計算してコンテンツを左右に引っ張るイメージ。

そして、幅を広げた際にびよーんと間延びしてしまうコンテンツを再び元の配置（中央）に戻すといった工程も必要になってきます。

背景色をつけて…

仕上げに、不要な余白や垂直スクロールバー分はみ出してしまう幅を調整する必要が。

うーん、いくつか工夫が必要。

それでは具体的に解説していきますね。コピペOKのコードも準備しました。

Cocoonで幅いっぱいのフルワイド／ここから先は有料公開です

有料エリアの目次

1. Cocoonフルワイドトップページを作成する手順
   1. 固定ページの準備
2. Cocoonフルワイド解説①／セクションを幅いっぱいにするための仕組みと方法
3. Cocoonフルワイド解説②／はみ出たコンテンツを元の配置に戻す方法
4. Cocoonフルワイド解説③／セクションに背景色をつける方法
   1. HTMLにクラスを追加する
   2. CSSで背景色を指定する
5. Cocoonフルワイド解説④／スクロールバー分の幅を調整する方法
   1. overflow:hiddenでもposition: stickyが使いたい問題の対応
6. Cocoonフルワイド解説⑤／セクションまわりの不要な余白等を消す方法
7. Cocoonフルワイドカスタマイズに必要なコード（コピペOK）
   1. HTML
   2. CSS
8. Cocoonフルワイドが反映されないときの確認事項
9. セクションの背景色を追加したいとき
10. 【便利】Cocoonで「カラム」を画面幅いっぱいのフルワイドにする方法
    1. リストビューを使った親ブロックの選択方法
    2. 実際にフルワイドにしたカラムブロック
11. 【便利】Cocoonでセクション内にコードではなくブロックを配置する方法
12. まとめ／Cocoonでフルワイドを駆使してオシャレなトップページ作成