Cocoonでフルワイド化｜画面いっぱいに幅を広げる＋セクション背景色をつけるカスタマイズ

ワードプレステーマ「Cocoon」はシンプルで扱いやすい反面、画面いっぱいに広がる“フルワイドデザイン”を実現するには少し工夫が必要です。

• 「もっとおしゃれなサイトにしたい」
• 「SWELLのような幅いっぱいのトップページをCocoonでも作りたい」

そんな方のために、この記事では固定ページにフルワイドのセクションを追加し、背景色や画像を全幅で表示させるカスタマイズ方法を紹介します。

コピペできるコードだけではなく、カスタマイズの「仕組み」まで詳しく解説。実装に必要なコードや実装手順は有料パートで詳しく公開しています。

完成後は「本当にCocoonで作ったの？」と驚かれるような、おしゃれで洗練されたページに仕上がります。訪問者に印象づけるデザインの第一歩をここから始めましょう！

About me

この記事を書いた人

はるみです

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

Cocoonフルワイド｜カスタマイズ概要

この記事で解説しているポイント

• セクションの枠を作る
  • HTMLの<div>タグでセクションを分け、構造を整理します。

• セクションの幅を広げる
  • CSSで横幅を100vwなどに指定し、ブラウザ幅にフィットさせます。

• セクションごとに背景色を設定する
  • 背景色を切り替えて、ページ全体にメリハリを出します。

• 不要な要素、余白の調整
  • Cocoonテーマ特有のパディングやマージン、不要な表示要素をカットして整えます。

フルワイド活用の実例紹介

Cocoonでのフルワイドデザインは、次のようなシーンで特に活躍します。

Cocoonサイト型トップページ

以下の記事では、Cocoonで作るサイト型トップページの実装例を紹介しています。フルワイドと組み合わせることで、有料テーマのようなおしゃれなデザインをCocoonでも再現可能です。

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

「Cocoonでブログを運営しているけれど、トップページを“サイトっぽく”見せたい」──そんな方に向けて、固定ページ＋HTML＋CSSを活用した「サイト型トップページ」の作成方法を丁寧に解説します。この記事では、コードをそのままコピペできる...

turicco.com

<div class="section-wrap"></div>

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

/* セクションの余白設定（以下を削除） */
.section-wrap {
	padding-top: 5em; /* 上部の内側余白 */
	padding-bottom: 5em; /* 下部の内側余白 */
	margin-bottom: 0; /* 下部の外側余白 0（固定） */
}

複数画像を切り替えるアニメーション

CSSで実装！複数画像を切り替えるアニメーションの作り方

トップページのメインビジュアルに、画像スライダーやカルーセルなど複数の画像を切り替えるアニメーションがあると、ぱっと目を引くことができて華やかです。通常、これらのアニメーションはJavaScriptを使って実装されますが、フェードイン・アウ...

turicco.com

CSSを利用した画像スライダーを設定することで動きのあるオシャレなページが作成可能です。トップページのメインビジュアルとして使うとインパクトがあります。

<div class="slider-container full-wide">
    <div class="slideimg"></div>
    <div class="slideimg"></div>
    <div class="slideimg"></div>
</div>

実装手順｜Cocoonで幅いっぱいのフルワイドカスタマイズ

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