- 当記事のカスタマイズを反映したサンプルページはこちら。
- トップページカスタマイズと組み合わせできるようにしました。
- 解説とコピペできるコードを有料公開しています。有料部分を見る
今回は固定ページを使ったトップページ作成に+αして使えるカスタマイズ。
フルワイドにして各セクションに背景色をつける方法をご紹介します。
- テーマ「Cocoon」を使っている
- 固定ページを利用したトップページを使っている（または作りたい）
- 有料テーマ「SWELL」のようなフルワイドにしたい
このカスタマイズをマスターするとトップページの雰囲気が大きく変わります。
興味のある方は読み進めてくださいね。
- Cocoonフルワイドカスタマイズの完成イメージ
- Cocoonサイト型トップページのカスタマイズと組み合わせOK
- Cocoonフルワイドトップページを採用しているサイト
- Cocoonフルワイドに必要！サイズを表すCSSの単位
- Cocoonトップページ作成で必要なコンテンツの幅について
- Cocoonで幅いっぱいのフルワイド／ここから先は有料公開です
- Cocoonフルワイドトップページを作成する手順
- Cocoonフルワイド解説①／セクションを幅いっぱいにするための仕組みと方法
- Cocoonフルワイド解説②／はみ出たコンテンツを元の配置に戻す方法
- Cocoonフルワイド解説③／セクションに背景色をつける方法
- Cocoonフルワイド解説④／スクロールバー分の幅を調整する方法
- Cocoonフルワイド解説⑤／セクションまわりの不要な余白等を消す方法
- Cocoonフルワイドカスタマイズに必要なコード（コピペOK）
- Cocoonフルワイドが反映されないときの確認事項
- セクションの背景色を追加したいとき
- 【便利】Cocoonで「カラム」を画面幅いっぱいのフルワイドにする方法
- 【便利】Cocoonでセクション内にコードではなくブロックを配置する方法
- まとめ／Cocoonでフルワイドを駆使してオシャレなトップページ作成
- ブログ好きな40代主婦
- CocoonサイトをCSSでカスタマイズ
- JavaScriptを勉強中
- ドメインパワー43
- 有料記事、累計190件購入いただいています、感謝！
です
Cocoonフルワイドカスタマイズの完成イメージ
まずはビフォーアフター画像をご覧ください。
入力したコンテンツはテーマで設定されたコンテナ（枠）の中に入ります。
入力したコンテンツをセクションごと区切りコンテナ（枠）から脱出させます。
- セクションの枠を作る
- セクション（コンテンツ表示エリア）の横幅をビューポート幅（表示領域）いっぱいに広げる
- セクションごとに背景色をつける
- 不要な要素、余白の調整
HTMLでセクションの枠を作り、CSSで背景色をつけて余白の調整をします。
自分でこのようにしたいと思っても失敗したことはないでしょうか。実際に当サイトにもお問い合わせをいただくことがあります。
例１）セクションに背景色をつけたら両側に余白があってイマイチ…
例２）フルワイドにはできたけど、コンテンツまで左右に広がってしまいバランスが悪い…
こんな悩みを解決します！
実際に当記事のカスタマイズを反映させるとこのように完成します。
Cocoonサイト型トップページのカスタマイズと組み合わせOK
トップページの作り方（コンテンツ内容）はこちらの記事で紹介しています。
当サイトのトップページは当記事（フルワイドにする方法）とこのトップページ作成の記事の内容を組み合わせて作っています！
「トップページ」と「フルワイド」を組み合わせて使えるようにコードを統一しました。（各セクションにつけたクラス名 section-wrap を合わせました）
- トップページカスタマイズで固定ページを作成する。
- 当記事（フルワイドカスタマイズ）のCSSをコピペする。
- 背景色をつけるセクションのHTMLにクラスを追加。
<div>内のクラスsection-wrapの後に、半角スペースを空けて区切りcolor-section-1を追加。背景色はCSSで設定します。
<div class="section-wrap color-section-1">
<p>セクション／背景色１</p>
</div>/*セクション背景色*/
.color-section-1{
background:#eee; /*カラーコードをここで設定*/
}同じコードを用いて作成したサンプルページがこちらです。
カバーブロックの幅をこのように広げるといった使い方もできるので便利ですよ。
Cocoonフルワイドトップページを採用しているサイト
当サイト以外にもフルワイドトップページを採用しているCocoonサイトを紹介します。配色の使い方等、フルワイドのイメージを膨らませてくださいね。
また、当記事のフルワイドを実装されたサイトを掲載させていただきますので、ご希望の方はお問い合わせください。（※随時受付中）
どのサイトもオシャレ～！！！
このように、フルワイドにすることでCocoonに見えないトップページ作成が可能です。
Cocoonフルワイドに必要！サイズを表すCSSの単位
当カスタマイズでキーとなるのが単位。CSSではサイズ（幅）を表すために主に下記の単位が使われます。
| 単位 | 特徴 |
|---|---|
| px | HTML、CSSの基本単位。 指定した値がそのままのサイズで表示されます。 |
| % | 親要素に対する割合で値が決まります。 例えば親要素の幅が1000pxの場合、子要素の幅を50%で指定すると500pxと指定した場合と同じになります。 |
| em | 親要素に指定されているフォントサイズを基準にしてサイズが変化します。 親要素と同じサイズを指定する場合は1em。親より小さくする場合は0.9emと小さく指定、親より大きくする場合1.1emと大きく指定します。 |
| rem | root（ルート）要素であるhtmlタグに指定されたフォントサイズを基準にしてサイズが変化します。指定方法はemと同様です。 |
| vw | ビューポート（表示領域）の幅を基準にしてサイズが変化します。 たとえば、ビューポートの幅が1920pxなら、1vw = 19.2px になります。（※100vwと指定した場合、垂直スクロールバーの幅も含まれます） |
| vh | ビューポート（表示領域）の高さを基準にしてサイズが変化します。 たとえば、ビューポートの高さが1080pxなら、1vh = 10.8px になります。 |
この記事では幅を表すために%とvwの２つを使います！
Cocoonトップページ作成で必要なコンテンツの幅について
通常、記事を作成するとテーマで設定された枠内にコンテンツが配置され、ビューポート（表示領域）の左右にはバランスよく余白が配置されます。（PCで表示した場合）
それぞれの幅をCSSの単位で表すとこのようになります。
- コンテンツ幅 width:100%
- ビューポート幅（表示領域） width:100vw
コンテンツ幅を画面いっぱい（ビューポート幅）に広げるカスタマイズをしていきます。
余白（margin）の幅を計算してコンテンツを左右に引っ張るイメージ。
そして、幅を広げた際にびよーんと間延びしてしまうコンテンツを再び元の配置（中央）に戻すといった工程も必要になってきます。
背景色をつけて…
仕上げに、不要な余白や垂直スクロールバー分はみ出してしまう幅を調整する必要が。
うーん、いくつか工夫が必要。
それでは具体的に解説していきますね。コピペOKのコードも準備しました。
Cocoonで幅いっぱいのフルワイド／ここから先は有料公開です
- フルワイドトップページを作成する手順
- 解説①／フルワイドにするための仕組みと方法
- 解説②／はみ出たコンテンツを元の配置に戻す方法
- 解説③／セクションの一部に背景色をつける方法
- 解説④／スクロールバー分の幅を調整する方法
- 解説⑤／セクションまわりの不要な余白等を消す方法
- フルワイドカスタマイズ／HTMLコード（コピペOK）
- フルワイドカスタマイズ／CSSコード（コピペOK）
- 反映されないときの確認事項
- 背景色を追加したいとき
- 【便利】カラムブロックを画面幅いっぱいのフルワイドにする方法
- 【便利】セクション内に、コードではなくブロックを配置する方法
※公開コードは別サイトで検証の上、反映されることを確認しております。
| 特定商取引法に基づく表記 | |
|---|---|
| サイト名 | Turicco |
| サイトURL | https://turicco.com/ |
| お問い合わせ | https://turicco.com/contact/ |
| 購入方法 | コンテンツ販売サービス、codoc(コードク)を利用しています。 詳しくは購入者向けFAQをご覧ください。 |
| 納品方法 | 記事公開 |
| 販売価格 | 500円 |
| お支払い 方法 | クレジットカード、デビットカード、プリペイド型クレジットカード、Apple Pay、Google Pay、コンビニ決済 |
| ※クレジットカード情報はSSLで暗号化され、決済システムサービスを提供するStripe社に直接送信されます。管理人が知ることはありませんのでご安心ください。 | |
| 返金・キャンセルについて | codoc株式会社利用規約 第10条（返金）に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。 |
Comment コメントはこちらへ