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

1. 固定ページを作成
   • トップページの作り方（コンテンツ内容）を参考に固定ページを作成します
   • Cocoonで作るサイト型トップページ／オシャレなSWELL風（HTML、CSS使用）
2. カスタムCSSを追加する
   • 固定ページの編集画面を開き、下部の「カスタムCSS」欄に、この記事で紹介するCSSコードをコピペしてください。
3. HTMLセクションにクラスを設定
   • 次に、固定ページ内のHTMLで、セクションごとに<div>を使って区切りを作り、以下のように必要なクラスを追加します。

<div class="section-wrap"></div>

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

各クラスの役割

• 複数のクラスを適用する場合は、半角スペースで区切って記述します。
• 背景色はCSSで設定します。
• section-wrapクラスは不要になるため、HTMLのクラス・CSSとも削除してください。

/* セクションの余白設定（以下を削除） */
.section-wrap {
   padding-top: 5em; /* 上部の内側余白 */
   padding-bottom: 5em; /* 下部の内側余白 */
   margin-bottom: 0; /* 下部の外側余白 0（固定） */
}

1. 固定ページを作成
   • 下記記事を参考にアニメーションを作成します。
   • CSSで複数画像を切り替えるアニメーションを作ってみる
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>