固定ページを利用してトップページを作成する際、コンテンツを画面いっぱいに広げた「フルワイド表示」はインパクトのあるデザインを実現します。セクションごとに背景色を設定すれば、より視覚的に分かりやすくスタイリッシュに仕上げることができます。
この記事では、テーマ「Cocoon」を使ったフルワイド化の手順と、セクション背景色を設定するカスタマイズ方法をわかりやすく解説します。
当記事について
- 実装手順→解説の順で有料公開しています。実装手順を見る
- 当カスタマイズのデモページはこちら
- トップページカスタマイズと組み合わせできます
- 「カラム」ブロックを使ったフルワイドブロックの作り方を追加しました
このような方におすすめ
- Cocoonテーマを使用している方
- 要素や余白の調整はCocoon対象ですが、フルワイドにする設定はテーマ共通です
- 固定ページでトップページをデザインしたい方
- 有料テーマ「SWELL」のようななオシャレなフルワイドデザインに挑戦したい方
Cocoonフルワイド|カスタマイズ概要


本記事では、以下のポイントについて解説します。
- セクションの枠を作る
- HTMLの
<div>
要素を使用して、コンテンツを区切る枠を作成します。
- HTMLの
- セクションの幅を広げる
- CSSでセクションが画面横幅いっぱいに広がるように設定します。
- セクションごとに背景色をつける
- 異なる背景色を設定して、セクションごとにメリハリをつけます。
- 不要な要素、余白の調整
- Cocoonテーマに標準で含まれる不要な要素や余白を調整してバランスよく仕上げます。
注意
この記事では「フルワイド化」と「セクションの一部に背景色を付ける方法」に焦点を当てて解説しています。具体的なコンテンツ作成方法は含まれておりませんのでご了承ください。
Cocoonテーマのフルワイド活用事例
フルワイド化は、トップページや固定ページで以下のような場面に活用できます。
Cocoonサイト型トップページ

フルワイドを活用し、セクションごとに異なる背景色を付けることでデザインのメリハリが生まれます。
- 固定ページを作成
- トップページの作り方(コンテンツ内容)を参考に固定ページを作成します
- Cocoonで作るサイト型トップページ/オシャレなSWELL風(HTML、CSS使用)
- カスタムCSSの追加
- 記事編集ページ下部の「カスタムCSS」に当記事のCSSを入力します(コピペOK)
- HTMLセクションにクラスを設定
- セクションの<div>タグに必要なクラスを追加します。
<div class="section-wrap"></div>
<div class="full-wide color-area-1"></div>
full-wide
:セクションを画面いっぱいに広げる設定とセクション内余白設定color-area-1
:背景色をつける設定color-area-diagonal
:斜めの背景デザインを設定(必要に応じて使用)
上記のようにdiv内にクラスを記述します。
/* セクションの余白設定(以下を削除) */
.section-wrap {
padding-top: 5em; /* 上部の内側余白 */
padding-bottom: 5em; /* 下部の内側余白 */
margin-bottom: 0; /* 下部の外側余白 0(固定) */
}
同じコードを用いて作成したデモページがこちらです。
組み合わせ例 ①
- トップページ
- フルワイド
- セクション背景色
トップページをフルワイド表示し、シンプルな背景色を追加します。
組み合わせ例 ②
- トップページ
- フルワイド
- 斜めの背景スタイル
- →掲載ページ:CSSで作るおしゃれな境界線、背景スタイル/トップページ作成のアクセントにおすすめ(目次5:斜めの背景スタイル)
フルワイド表示に斜めの背景スタイルを適用します。
複数画像を切り替えるアニメーション
CSSを利用した画像スライダーを設定することで動きのあるオシャレなページが作成可能です。トップページのメインビジュアルとして使うとインパクトがあります。
- 固定ページを作成
- 下記記事を参考にアニメーションを作成します。
- CSSで複数画像を切り替えるアニメーションを作ってみる
- カスタムCSSの追加
- 記事編集ページ下部の「カスタムCSS」に当記事のCSSを入力します(コピペOK)
- HTMLセクションにクラスを設定
- スライダーコンテナに
full-wide
クラスを追加します。
- スライダーコンテナに
<div class="slider-container full-wide">
<div class="slideimg"></div>
<div class="slideimg"></div>
<div class="slideimg"></div>
</div>
実装手順|Cocoonで幅いっぱいのフルワイドカスタマイズ

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

特定商取引法に基づく表記 | |
---|---|
サイト名 | Turicco |
サイトURL | https://turicco.com/ |
お問い合わせ | https://turicco.com/contact/ |
購入方法 | コンテンツ販売サービス、codoc(コードク)を利用しています。 詳しくは購入者向けFAQをご覧ください。 |
納品方法 | 記事公開 |
販売価格 | 600円 |
お支払い 方法 | クレジットカード、デビットカード、プリペイド型クレジットカード、Apple Pay、Google Pay、コンビニ決済 |
※クレジットカード情報はSSLで暗号化され、決済システムサービスを提供するStripe社に直接送信されます。管理人が知ることはありませんのでご安心ください。 | |
返金・キャンセルについて | codoc株式会社利用規約 第10条(返金)に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。 |
Comment コメントはこちらへ
こんにちは。
以前はっちゃん様の『Cocoonで作るサイト型トップページ/オシャレなSWELL風(HTML、CSS使用)』の有料公開部分を購入しサイトのトップページをカスタマイズしました。
その後『Cocoonでフルワイド!固定ページのセクションを幅いっぱいに広げて背景色をつける方法』の記事で背景色をつけようと思い購入してHTML部分にコードを入れたのですが、何故か反映されません。(画像参照)
固定ページのカスタムCSSにもコードをきちんと入れたのですが、HTML部分へのコードの入れ方に問題があるのでしょうか。
何かやり方が間違っていたら教えて頂けると幸いです。
> しゅんさん、こんにちは。
まずCSSのエラーがありますので、修正をお試しいただければと思います。
詳細はメールでお返事させていただきました。
よろしくお願いします。