Cocoonでフルワイド（幅いっぱい）にする方法｜全幅表示＋背景デザインの作り方

• 背景が端まで広がらない
• 余白が消えない
• 横スクロールが出てしまう

Cocoonでフルワイド（全幅）デザインを作ろうとすると、このあたりでつまずく方が非常に多いです。設定を変えても思ったように広がらず時間だけかかってしまうケースも少なくありません。

実は、いくつかのポイントを押さえるだけで、コピペ中心で簡単に再現できます。

この記事ではHTMLとカラムブロックの2つの方法でフルワイドデザインの手順をわかりやすく解説します。

「幅を広げる方法」自体は検索すれば見つかりますが、手順だけでなく横スクロールを防ぐ対策や、レイアウト崩れしない余白設計まで解説します。

急ぐ方は手順だけ、余裕があれば「仕組み解説」「微調整ポイント」もチェックしてください。初心者の方でもそのまま再現できるように、手順をできるだけシンプルにまとめています。

Cocoonでフルワイド（全幅）にする方法【概要】

Cocoonはそのままでも見やすいテーマですが、「背景だけ幅いっぱいにしたい」「コンテンツだけ中央にしたい」といったレイアウトは、標準設定ではうまく再現できません。

▽ よくあるつまずき

ケース１：背景色をつけると左右に余白が残る

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

     

ケース２：幅を広げたらコンテンツまで広がる

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

     

このよくあるズレを解消します

     

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

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

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

▽ コンテンツ作成の参考になる記事例

• Cocoon new_list（ピックアップ記事）
• Cocoonナビカード
• Cocoon人気記事
• Cocoon新着・人気・ナビカード（横並び）
• Cocoon装飾ブロックまとめ

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

フルワイドは、トップページやファーストビューなど「第一印象を作る場所」で効果を発揮します。

代表的な活用例はこちらです。

• サイト型トップページ（メリハリのあるレイアウト）
• 画像スライダー（視線を引きつける演出）

詳しく見たい方は以下からチェックできます。

• 活用例① サイト型トップページ × フルワイド

背景を画面幅いっぱいに広げることで、メリハリのあるトップページを作れます。

• Cocoonサイト型トップページの作り方ガイド
  1. Cocoonブロック機能版（フルワイド対応）
  2. HTML＆CSS版（シンプルデザイン）

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

.section-wrap {
   padding-top: 5em;
   padding-bottom: 5em;
   margin-bottom: 0;
}

• 活用例② 画像スライダー × フルワイド

フルワイドと組み合わせることで、視線を引きつけるファーストビューが作れます。

記事を読む

CSSだけで作るフェードスライダー｜複数画像を切り替える方法

トップページにおしゃれな画像スライダーを置きたいけれど、「表示が重くなる」「JavaScriptの管理が不安」「できるだけシンプルに実装したい」と感じている方も...

turicco.com

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

固定ページの準備｜1カラムにページ設定

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

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

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

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

フルワイドは「HTMLで枠を作り、CSSで画面いっぱいに広げる」という仕組みで実装します。

HTMLでセクションを作る
　　　　　↓
CSSで画面幅いっぱいに広げる
　　　　　↓
余白・背景・表示を調整する

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

この先では、実際に使える完成コードや、横スクロール対策・余白調整などの具体的な実装をすべて公開しています。

間違った設定をするとレイアウトが崩れるため、安全に実装したい方はこの先を参考にしてください。

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

以下は有料コンテンツのご案内および特定商取引法に基づく表記です。