サイト型トップページの作り方を公開しています!Check

Cocoonでフルワイドデザイン!幅いっぱいのおしゃれなトップページの作り方

アイキャッチ|フルワイド Cocoon
Cocoon
記事内に広告が含まれています

WordPressテーマ「Cocoon」はシンプルで使いやすい一方、SWELLのような洗練されたフルワイドデザインを再現するにはちょっとしたコツが必要です。

  • 「おしゃれなトップページにしたい」
  • 「全幅の背景色や画像で目を引くデザインを作りたい」

そんな願いを叶えるために、この記事ではCocoonでフルワイドセクションを簡単に追加する方法を丁寧に解説。コピペで使えるコードはもちろん、カスタマイズの「仕組み」もわかりやすくお伝えします。

この記事を読むメリット
  • Cocoonでスタイリッシュなトップページデザインが作れる
  • 「どうやるの?」がスッキリ解決
  • コピペでそのまま使えるコード付き、読後すぐに実装OK

完成したページは「これ本当にCocoon?」と驚かれるほど、洗練されたデザインに仕上がります。

記事の内容
スポンサーリンク

この記事を書いた人

はるみです
吹き出し/女性

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

<実績>

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

Cocoonでフルワイドデザインを実現!カスタマイズ概要

例えば、自分でフルワイドに挑戦してみてもうまくいかないことがあります。

フルワイド|左右の余白

ケース1:セクションに背景色を付けたけど左右の余白は残る

フルワイド|左寄せのコンテンツ

ケース2:幅を広げてみたけど、不自然にコンテンツ全体が広がってしまう

フルワイドのイメージ

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

この記事では、以下のポイントを丁寧に解説します。

  • セクションの枠を作る

HTMLの<div>タグを使って、ページのセクションを整理。これでフルワイドの土台をしっかり構築します。

解説を見る

  • セクションの幅を広げる

CSSで横幅を100vw(ブラウザ幅)に設定。画面いっぱいに広がるデザインを実現します。

解説を見る

  • セクションごとに背景色を設定する

背景色を切り替えて、ページにメリハリをプラス。訪問者の目を引く、魅力的なデザインに仕上げます。

解説を見る

  • 不要な要素、余白の調整

Cocoon特有のパディングやマージン、不要な要素をカット。スッキリとした見た目に整えます。

解説を見る

実際のカスタマイズ例をデモページで確認!どんな仕上がりになるか、イメージをつかめます。

注意

この記事は「フルワイド化」と「セクション背景の設定」に特化しています。コンテンツの具体的な作成方法や装飾については触れていませんので、ご了承ください。

スポンサーリンク

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

フルワイドデザインを活用した具体的なシーンと実例をご紹介します。初心者でも実装しやすいアイデアばかりなのでぜひ参考にしてくださいね。

Cocoonサイト型トップページ

サイト型トップページ/比較

Cocoonで作る「サイト型トップページ」は、フルワイドデザインとの相性が抜群!組み合わせることで、有料テーマ「SWELL」のようなおしゃれなデザインをCocoonでも作れます。

  1. 固定ページを作成
  2. カスタムCSSを追加する
    • 固定ページの編集画面を開き、下部の「カスタムCSS」欄に、この記事で紹介するCSSコードをコピペしてください。
  3. HTMLセクションにクラスを設定
    • 次に、固定ページ内のHTMLで、セクションごとに<div>を使って区切りを作り、以下のように必要なクラスを追加します。
<div class="section-wrap"></div>
<div class="full-wide color-area-1"></div>

各クラスの役割

クラス名説明
full-wideセクションを画面幅いっぱいに広げ、内側余白(padding)を調整する
color-area-1セクションに背景色を設定(色はCSSで変更可能)

  • 複数のクラスを適用する場合は、半角スペースで区切って記述します。
  • 背景色はCSSで設定します。
  • section-wrapクラスは不要になるため、HTMLのクラス・CSSとも削除してください。
/* セクションの余白設定(以下を削除) */
.section-wrap {
   padding-top: 5em; /* 上部の内側余白 */
   padding-bottom: 5em; /* 下部の内側余白 */
   margin-bottom: 0; /* 下部の外側余白 0(固定) */
}

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

トップページのメインビジュアルに動きを加えると、ページが一気に華やかに。

JavaScriptを使わずに、CSSだけでフェードイン・アウトのスライダーを作成する方法を解説。フルワイドのメインビジュアルとして設定すれば、訪問者の注目を集めるインパクトのあるページに仕上がります。

  1. 固定ページを作成
  2. カスタムCSSの追加
    • 記事編集ページ下部の「カスタムCSS」にこの記事のCSSを入力します(コピペOK)
  3. 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(コードク)」を利用しています。
詳しくは codoc購入者向けFAQ をご覧ください。

納品方法
購入完了後、対象の記事が閲覧可能になります。

お支払い方法
・クレジットカード
・デビットカード
・プリペイド型クレジットカード
・Apple Pay
・Google Pay
・コンビニ決済

※クレジットカード情報はSSLで暗号化され、決済サービス「Stripe」に直接送信されます。管理人がカード情報を取得・保管することはありません。

返金・キャンセルについて
codoc株式会社の利用規約第10条(返金)に基づき、原則としてご購入後のキャンセル・返金はできません。あらかじめご了承ください。

販売価格
600円(税込)

Comment コメントはこちらへお願いします

  1. しゅん より:

    こんにちは。
    以前はっちゃん様の『Cocoonで作るサイト型トップページ/オシャレなSWELL風(HTML、CSS使用)』の有料公開部分を購入しサイトのトップページをカスタマイズしました。

    その後『Cocoonでフルワイド!固定ページのセクションを幅いっぱいに広げて背景色をつける方法』の記事で背景色をつけようと思い購入してHTML部分にコードを入れたのですが、何故か反映されません。(画像参照)
    固定ページのカスタムCSSにもコードをきちんと入れたのですが、HTML部分へのコードの入れ方に問題があるのでしょうか。
    何かやり方が間違っていたら教えて頂けると幸いです。

    • はるみ はっちゃん より:

      > しゅんさん、こんにちは。
       
      まずCSSのエラーがありますので、修正をお試しいただければと思います。
       
      詳細はメールでお返事させていただきました。
       
      よろしくお願いします。
       

タイトルとURLをコピーしました