Cocoonでフルワイド！画面いっぱいに幅を広げる＋セクション背景色をつける方法

固定ページを使ってトップページを作成する際、コンテンツをフルワイド表示にすることでより視覚的にインパクトのあるデザインを実現できます。

この記事では、フルワイドにして各セクションに背景色をつける方法を紹介します。

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

• 固定ページを使ったトップページ作成+αとして
  • Cocoonで作るサイト型トップページ／オシャレなSWELL風（HTML、CSS使用）

• 幅を広くしてトップページのメインビジュアルとして使う
  • CSSで複数画像を切り替えるアニメーション

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

この記事を書いた人

• ブログ好きな40代主婦
• CocoonサイトをCSSでカスタマイズ
• 2020年1月1日ブログ開設
• ドメインパワー40
• 2023年～有料記事公開
  • →累計280件（月間約20件）購入いただいています

はっちゃん
です

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

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

カスタマイズ前

入力したコンテンツは、テーマのデフォルト設定により中央に配置されたコンテナ（枠）内に収まっています。画面の左右には余白があり、表示領域全体を使い切れていません。

カスタマイズ後

入力したコンテンツをセクションごとに分け枠から「脱出」させます。各セクションがフルワイド（画面幅いっぱい）に広がり、画面全体を効果的に活用するデザインに変わります。

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

例1：セクションに背景色をつけたら両側に余白が残り、フルワイドにならない場合

→ widthとmarginを組み合わせて、セクションの横幅を画面いっぱいに設定します。

例2：フルワイドにしたが、コンテンツまで左右に広がりすぎて見栄えが悪い場合

→ paddingを設定することで、中央に配置されたバランスの良いレイアウトに調整します。

当記事のカスタマイズを適用すると、以下のような見た目になります。

• フルワイドで各セクションが横幅いっぱいに表示され、ページ全体に広がるデザイン。
• 各セクションごとに異なる背景色を設定し、スムーズな視線の誘導を実現。

Cocoonサイト型トップページとフルワイドの組み合わせ

Cocoonテーマで作成したトップページをよりダイナミックに表示するため、フルワイドのカスタマイズと背景スタイルを組み合わせて使う設定方法を紹介します。

1. 固定ページを作成
   • トップページの作り方（コンテンツ内容）を参考に固定ページを作成します
   • Cocoonで作るサイト型トップページ／オシャレなSWELL風（HTML、CSS使用）
2. カスタムCSSの追加
   • 記事編集ページ下部の「カスタムCSS」に当記事のCSSを入力します（コピペOK）
3. HTMLセクションにクラスを設定
   • セクションの<div>タグに２つのクラスを追加します。
   • ※この場合section-wrapクラスは不要になるため、full-wideに置き換えてください。
   • ※section-wrapのCSS部分も不要なため削除してください。

/* この部分を削除（full-wideクラスで設定します） */
.section-wrap {
	padding-top: 5em; /* 上部の内側余白を5em */
	padding-bottom: 5em; /* 下部の内側余白を5em */
	margin-bottom: 0; /* 下部の外側余白を0 */
}

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

• full-wide：セクションを画面いっぱいに広げる設定
• color-area-1：背景色をつける設定（CSSで色の指定が必要）
• color-area-diagonal：斜めの背景デザインを設定するクラス（必要に応じて使用）

上記のようにdiv内にクラスを記述します。

• 複数クラス間は半角スペースで区切ります
• 背景色はCSSで設定します。

同じコードを用いて作成したデモページがこちらです。

フルワイド表示の設定は、Cocoonのカバーブロックにも適用できます。ブロックの幅をフルワイドに広げ、背景に色や画像を設定することでページのアクセントとして活用できます。

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に見えないトップページ作成が可能です。

フルワイドにするために／幅を表すCSSの単位

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

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

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

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

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

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

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

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

背景色をつけて、仕上げとして綺麗に表示するために、不要な余白や垂直スクロールバー分はみ出してしまう幅を調整する必要があります。

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

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

実装手順／Cocoonで幅いっぱいのフルワイド

先にカスタマイズに必要なコード（コピペOK）を掲載し、後に解説していきます。

有料エリアの目次

1. Cocoonフルワイドトップページを作成する手順
   1. 固定ページの準備
   2. HTML／セクションの枠を作る
   3. CSSの設定
2. Cocoonフルワイド解説①／セクションを幅いっぱいにするための仕組みと方法
   1. ビューポート端まで引き伸ばす余白の算出
   2. コード例
   3. 仕上がりイメージ
3. Cocoonフルワイド解説②／はみ出たコンテンツを元の配置に戻す方法
   1. コンテンツを中央に戻す仕組み
   2. コード例
   3. 仕上がりイメージ
4. Cocoonフルワイド解説③／セクションに背景色をつける方法
   1. HTMLにクラスを追加する
   2. CSSで背景色を指定する
5. Cocoonフルワイド解説④／スクロールバー分の幅を調整する方法
6. Cocoonフルワイド解説⑤／セクションまわりの不要な余白等を消す方法
   1. 不要な要素の非表示設定
   2. セクション周りの余白をゼロに調整
7. Cocoonフルワイドが反映されないときの確認事項
8. Cocoonで「カラム」ブロックをフルワイドにする方法
   1. 親ブロックの選択方法
   2. 実際にフルワイドにしたカラムブロック
9. Cocoonでセクション内にブロックを配置する方法
10. まとめ