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

Cocoonでも、有料テーマSWELL風のフルワイドデザインは作れます。

この記事では、Cocoonでトップページをおしゃれに見せる 「全幅（フルワイド）セクション」 の作り方を、HTMLを使う方法とブロックエディタ（カラムブロック）を使う方法の両方で解説します。

対象はブロックエディタの基本操作や簡単なHTML/CSSがわかる方ですが、コードをそのまま貼り付ければすぐにフルワイドデザインを体験できます。さらに、具体的な仕組みも解説しているので初心者でも安心です。

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

詳細な実装コード（完成版）を有料パートで公開中です。

この記事を読めば、Cocoonで「これが無料テーマ？」と驚かれるようなスタイリッシュなトップページを作れます。

About meこの記事を書いた人

はるみです

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

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

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を使う方法）｜Cocoonで幅いっぱいのフルワイド

まず、カスタマイズに必要なコードをコピペできる形で掲載します。後で解説していきます。

固定ページの準備

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

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

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

ここから先は有料公開です。

• HTMLでのフルワイド化
• 「カラム」ブロックを使ったフルワイド化
• セクション背景色を設定する方法
• フルワイドデザインの仕組みを解説