デザインやカスタマイズを依頼するなら ココナラ

Cocoonでフルワイド!固定ページのセクションを幅いっぱいに広げて背景色をつける方法

アイキャッチ/フルワイド カスタマイズ
カスタマイズ
記事内に広告が含まれています
スポンサーリンク
当記事について

今回は固定ページを使ったトップページ作成に+αして使えるカスタマイズ。

フルワイドにして各セクションに背景色をつける方法をご紹介します。

このような方向けの記事です
  • テーマ「Cocoon」を使っている
  • 固定ページを利用したトップページを使っている(または作りたい)
  • 有料テーマ「SWELL」のようなフルワイドにしたい

このカスタマイズをマスターするとトップページの雰囲気が大きく変わります。

興味のある方は読み進めてくださいね。

Contents
  1. Cocoonフルワイドカスタマイズの完成イメージ
  2. Cocoonサイト型トップページのカスタマイズと組み合わせOK
  3. Cocoonフルワイドトップページを採用しているサイト
    1. koikenote
    2. さらば、思うだけ
    3. 雨止み屋ブログ
    4. はるのとなり
    5. ふじこLIFE
  4. Cocoonフルワイドに必要!サイズを表すCSSの単位
  5. Cocoonトップページ作成で必要なコンテンツの幅について
  6. Cocoonで幅いっぱいのフルワイド/ここから先は有料公開です
  7. Cocoonフルワイドトップページを作成する手順
    1. 固定ページの準備
  8. Cocoonフルワイド解説①/セクションを幅いっぱいにするための仕組みと方法
  9. Cocoonフルワイド解説②/はみ出たコンテンツを元の配置に戻す方法
  10. Cocoonフルワイド解説③/セクションに背景色をつける方法
    1. HTMLにクラスを追加する
    2. CSSで背景色を指定する
  11. Cocoonフルワイド解説④/スクロールバー分の幅を調整する方法
    1. overflow:hiddenでもposition: stickyが使いたい問題の対応
  12. Cocoonフルワイド解説⑤/セクションまわりの不要な余白等を消す方法
  13. Cocoonフルワイドカスタマイズ/HTMLコード(コピペOK)
  14. Cocoonフルワイドカスタマイズ/CSSコード(コピペOK)
  15. Cocoonフルワイドが反映されないときの確認事項
  16. セクションの背景色を追加したいとき
  17. 【便利】Cocoonで「カラム」を画面幅いっぱいのフルワイドにする方法
  18. 【便利】Cocoonでセクション内にコードではなくブロックを配置する方法
  19. まとめ/Cocoonでフルワイドを駆使してオシャレなトップページ作成
スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー35
  • ワードプレスで複数サイトを運営しています
はっちゃん
です
プロフィール

Cocoonフルワイドカスタマイズの完成イメージ

まずはビフォーアフター画像をご覧ください。

カスタマイズ前

入力したコンテンツはテーマで設定されたコンテナ(枠)の中に入ります。

カスタマイズ後

入力したコンテンツをセクションごと区切りコンテナ(枠)から脱出させます。

カスタマイズ内容
  1. セクションの枠を作る
  2. セクション(コンテンツ表示エリア)の横幅をビューポート幅(表示領域)いっぱいに広げる
  3. セクションごとに背景色をつける
  4. 不要な要素、余白の調整

HTMLでセクションの枠を作り、CSSで背景色をつけて余白の調整をします。

自分でこのようにしたいと思っても失敗したことはないでしょうか。実際に当サイトにもお問い合わせをいただくことがあります。

例1)セクションに背景色をつけたら両側に余白があってイマイチ…

例2)フルワイドにはできたけど、コンテンツまで左右に広がってしまいバランスが悪い…

こんな悩みを解決します!

実際に当記事のカスタマイズを反映させるとこのように完成します。

当記事にコンテンツ内容の具体的な作成方法は含まれていませんフルワイドにする + セクションの一部に背景色をつける方法になりますのでご了承ください。

スポンサーリンク

Cocoonサイト型トップページのカスタマイズと組み合わせOK

トップページの作り方(コンテンツ内容)はこちらの記事で紹介しています。

当サイトのトップページは当記事(フルワイドにする方法)とこのトップページ作成の記事の内容を組み合わせて作っています!

「トップページ」と「フルワイド」を組み合わせて使えるようにコードを統一しました。(各セクションにつけたクラス名 section-wrap を合わせました)

組み合わせて使う方法
  1. トップページカスタマイズで固定ページを作成する。
  2. 当記事(フルワイドカスタマイズ)のCSSをコピペする。
  3. 背景色をつけるセクションのHTMLにクラスを追加。
    • <div>内のクラスsection-wrapの後に、半角スペースを空けて区切りcolor-section-1を追加。背景色はCSSで設定します。
<div class="section-wrap color-section-1">
   <p>セクション/背景色1</p>
</div>
/*セクション背景色*/
.color-section-1{
	background:#eee; /*カラーコードをここで設定*/
}
  • HTMLとCSSを紐づけるクラス名を正確に合わせます。(color-section-2color-section-3の場合も同様に設定)
  • HTMLで複数クラス名を書くには半角スペースで区切ります。またクラスを囲む””(半角ダブルクォーテーション)を消さないでください。(反映されません)
  • CSSはクラス名の先頭に . (半角ピリオド)をつけて記述します
  • フルワイドにするのは該当ページだけのため、CSSのコピペはスタイルシートではなく固定ページ編集画面下方にある「カスタムCSS」をご使用ください。

同じコードを用いて作成したサンプルページがこちらです。

\トップページ+フルワイド背景色/
スポンサーリンク

Cocoonフルワイドトップページを採用しているサイト

当サイト以外にもフルワイドトップページを採用しているCocoonサイトを紹介します。配色の使い方等、フルワイドのイメージを膨らませてくださいね。

また、当記事のフルワイドを実装されたサイトを掲載させていただきますので、ご希望の方はお問い合わせください。(※随時受付中)

koikenote

サイト型トップぺージ/フルスクリーン

URL:https://koikenote.com/
運営:こいけ さん

さらば、思うだけ

URL:https://yoko51.com/
運営:yoko さん

雨止み屋ブログ

サイト型トップぺージ/フルスクリーン

URL:https://ameyamiya-ot.com/
運営:あめやみや さん

はるのとなり

URL:https://chibaharu.net/
運営:ちばはる さん

ふじこLIFE

URL:https://fujicolife.com/
運営:ふじこ さん

どのサイトもオシャレ~!!!

このように、フルワイドにすることでCocoonに見えないトップページ作成が可能です。

スポンサーリンク

Cocoonフルワイドに必要!サイズを表すCSSの単位

当カスタマイズでキーとなるのが単位。CSSではサイズ(幅)を表すために主に下記の単位が使われます。

単位特徴
pxHTML、CSSの基本単位。
指定した値がそのままのサイズで表示されます。
%親要素に対する割合で値が決まります。
例えば親要素の幅が1000pxの場合、子要素の幅を50%で指定すると500pxと指定した場合と同じになります。
em親要素に指定されているフォントサイズを基準にしてサイズが変化します。
親要素と同じサイズを指定する場合は1em。親より小さくする場合は0.9emと小さく指定、親より大きくする場合1.1emと大きく指定します。
remroot(ルート)要素であるhtmlタグに指定されたフォントサイズを基準にしてサイズが変化します。指定方法はemと同様です。
vwビューポート(表示領域)の幅を基準にしてサイズが変化します。
たとえば、ビューポートの幅が1920pxなら、1vw = 19.2px になります。(※100vwと指定した場合、垂直スクロールバーの幅も含まれます
vhビューポート(表示領域)の高さを基準にしてサイズが変化します。
たとえば、ビューポートの高さが1080pxなら、1vh = 10.8px になります。

この記事では幅を表すために%vwの2つを使います!

スポンサーリンク

Cocoonトップページ作成で必要なコンテンツの幅について

通常、記事を作成するとテーマで設定された枠内にコンテンツが配置され、ビューポート(表示領域)の左右にはバランスよく余白が配置されます。(PCで表示した場合)

それぞれの幅をCSSの単位で表すとこのようになります。

  • コンテンツ幅 width:100%
  • ビューポート幅(表示領域) width:100vw

コンテンツ幅を画面いっぱい(ビューポート幅)に広げるカスタマイズをしていきます。

余白(margin)の幅を計算してコンテンツを左右に引っ張るイメージ。

そして、幅を広げた際にびよーんと間延びしてしまうコンテンツを再び元の配置(中央)に戻すといった工程も必要になってきます。

背景色をつけて…

仕上げに、不要な余白や垂直スクロールバー分はみ出してしまう幅を調整する必要が。

うーん、いくつか工夫が必要。

それでは具体的に解説していきますね。コピペOKのコードも準備しました。

Cocoonで幅いっぱいのフルワイド/ここから先は有料公開です

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

Comment

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