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

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

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

固定ページを利用してトップページを作成する際、コンテンツを画面いっぱいに広げた「フルワイド表示」はインパクトのあるデザインを実現します。セクションごとに背景色を設定すれば、より視覚的に分かりやすくスタイリッシュに仕上げることができます。

この記事では、テーマ「Cocoon」を使ったフルワイド化の手順と、セクション背景色を設定するカスタマイズ方法をわかりやすく解説します。

当記事について
このような方におすすめ
  • Cocoonテーマを使用している方
    • 要素や余白の調整はCocoon対象ですが、フルワイドにする設定はテーマ共通です
  • 固定ページでトップページをデザインしたい方
  • 有料テーマ「SWELL」のようななオシャレなフルワイドデザインに挑戦したい方
スポンサーリンク

この記事を書いた人

はっちゃんです
吹き出し/女性
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • 2020年1月1日ブログ開設
  • ドメインパワー40
  • 2023年~有料記事公開
    • →累計340件(月間約20件)購入いただいています

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

フルワイド/画面幅
フルワイド/画面幅

本記事では、以下のポイントについて解説します。

  1. セクションの枠を作る
    • HTMLの<div>要素を使用して、コンテンツを区切る枠を作成します。
  2. セクションの幅を広げる
    • CSSでセクションが画面横幅いっぱいに広がるように設定します。
  3. セクションごとに背景色をつける
    • 異なる背景色を設定して、セクションごとにメリハリをつけます。
  4. 不要な要素、余白の調整
    • Cocoonテーマに標準で含まれる不要な要素や余白を調整してバランスよく仕上げます。
注意

この記事では「フルワイド化」と「セクションの一部に背景色を付ける方法」に焦点を当てて解説しています。具体的なコンテンツ作成方法は含まれておりませんのでご了承ください。

スポンサーリンク

Cocoonテーマのフルワイド活用事例

フルワイド化は、トップページや固定ページで以下のような場面に活用できます。

Cocoonサイト型トップページ

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

フルワイドを活用し、セクションごとに異なる背景色を付けることでデザインのメリハリが生まれます。

  1. 固定ページを作成
  2. カスタムCSSの追加
    • 記事編集ページ下部の「カスタムCSS」に当記事のCSSを入力します(コピペOK)
  3. HTMLセクションにクラスを設定
    • セクションの<div>タグに必要なクラスを追加します。
<div class="section-wrap"></div>
<div class="full-wide color-area-1"></div>
  • full-wide:セクションを画面いっぱいに広げる設定とセクション内余白設定
  • color-area-1背景色をつける設定
  • color-area-diagonal斜めの背景デザインを設定(必要に応じて使用)

上記のようにdiv内にクラスを記述します。

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

同じコードを用いて作成したデモページがこちらです。

組み合わせ例 ①
  • トップページ
  • フルワイド
  • セクション背景色

トップページをフルワイド表示し、シンプルな背景色を追加します。

組み合わせ例 ②

フルワイド表示に斜めの背景スタイルを適用します。

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

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
サイトURLhttps://turicco.com/
お問い合わせhttps://turicco.com/contact/
購入方法コンテンツ販売サービス、codoc(コードク)を利用しています。
詳しくは購入者向けFAQをご覧ください。
納品方法記事公開
販売価格600円
お支払い
方法
クレジットカード、デビットカード、プリペイド型クレジットカード、Apple Pay、Google Pay、コンビニ決済
※クレジットカード情報はSSLで暗号化され、決済システムサービスを提供するStripe社に直接送信されます。管理人が知ることはありませんのでご安心ください。
返金・キャンセルについてcodoc株式会社利用規約 第10条(返金)に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。
シェアはこちらから
はっちゃんをフォローする
スポンサーリンク
\記事がお役に立てたら/

お買い物の際にぽちっとお願いします

Profile
はっちゃん

40代、小中学生の息子の母。
当サイトで使っているワードプレステーマCocoonのデザインカスタマイズ、ブログ運営のことを主に発信しています。

PVアクセスランキング にほんブログ村
はっちゃんをフォローする

Comment コメントはこちらへ

  1. しゅん より:

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

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

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

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

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