Cocoonで全幅（フルワイド）デザイン！幅いっぱいにする仕組みとおしゃれに仕上げるポイントを解説

Cocoonでも、有料テーマSWELLのようなフルワイド（全幅）デザインは再現できます。

• 「SWELLのように幅いっぱいに表示したい」
• 「でもCocoonだと余白調整が難しい…」

そんな方のために、この記事では HTMLを使う方法 と カラムブロックを使う方法 の2通りで、フルワイドデザインの手順をわかりやすく解説します。

コードはコピペでそのまま使えるうえ、なぜそうなるかの仕組みまで理解できる構成なので初心者でも安心してフルワイドデザインを取り入れられます。

「幅を広げる方法」自体は検索すれば見つかりますが、きれいに整ったトップページに仕上げるための細かい余白調整まではあまり公開されていません。

急ぐ方は HTML版 or カラムブロック版の手順だけを読み、余裕があれば「仕組み解説」「微調整ポイント」もチェックしてください。

About meこの記事を書いた人

はるみです

ブログ好きな40代主婦です。
2020年1月1日にWordPressを始め、
Cocoonをスキンなしでカスタマイズ。

• ドメインパワー : 40
• 2023年より有料記事公開
  累計520件（月間約20件）のご購入実績
  （2025年11月現在）
• カスタマイズを丁寧にサポート

Cocoonでフルワイドデザインは作れる？【概要】

Cocoonはそのままでも見やすいテーマですが、「背景だけ幅いっぱいにしたい」「コンテンツだけ中央にしたい」といったレイアウト調整でつまずく人が非常に多いです。

▽ よくあるつまずき

ケース１：背景色は広がったが、左右に余白が残る

対策：セクションを「幅いっぱい」に広げる

ケース２：幅を広げたらコンテンツまで横に広がってしまった

対策：中身だけを中央寄せに戻す

そんなお悩みをスッキリ解決！

この記事では、こうした悩みを解消し、背景はフルワイド／中身は中央寄せの洗練されたレイアウトを作る手順を解説します。

完成イメージをチェック（デモページ）

「文章だけだとイメージが湧かない…」という方は、デモページをチェック！完成形を見れば、自分のサイトにどう活かせるかがぐっと分かりやすくなります。

フルワイドはどこで使える？活用シーン紹介

フルワイドデザインを活用できる代表的なシーンをご紹介します。

「どんなページで使うと効果的か」「完成するとどんな印象になるか」を中心にまとめているので、まずはアイデア集として参考にしてください。

※ 具体的な実装手順が必要な場合のみ、各項目内の「実装の流れ」を開いて確認できます。

• サイト型トップページ × フルワイド

サイト型トップページ × フルワイドの組み合わせは相性抜群！背景を画面幅いっぱいに広げることで、有料テーマ「SWELL」のようなメリハリのあるレイアウトをCocoonでも再現できます。

• トップページ作成の記事を読む
• デモページを見る

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

/* 以下のコードは削除 */
.section-wrap {
   padding-top: 5em;
   padding-bottom: 5em;
   margin-bottom: 0;
}

• 画像スライダー × フルワイド

トップページのメインビジュアルに 画像切り替えアニメーション を入れると、一気に華やかさがアップ。JavaScript不要・CSSだけで実装できるフェードイン／フェードアウト型スライダーを使えば、
軽量で管理しやすいのもポイントです。

フルワイド設定と組み合わせることで、視線を強く引き付けるファーストビューが完成します。

• 記事を読む

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

フルワイド実装手順（HTML版）

固定ページの準備

フルワイド化を行う前に、ページ設定を整えましょう。

1. 管理画面→「固定ページ」→「固定ページを追加」
2. タイトルは「トップページ」など（後でCSSで非表示可能）
3. サイドバー｜固定ページタブ「ページ設定」→ページタイプで「１カラム（狭い）または（広い）」を選択
4. 「下書き保存」をクリック

準備が整ったら、実際のコードとデザインカスタマイズに進みます。

ここから先は有料パートです。

この先では、Cocoonでフルワイドデザインを作るための実装コードや特有の調整方法をすべて公開しています。

• HTML版のフルワイドセクションを作る手順
• CSSで背景や余白をきれいに整える方法
• Cocoonならではの中央寄せコンテンツとの組み合わせ調整

「手順だけ知りたい方」も、「仕組みまで理解したい方」も安心して参考にできる内容です。