- 当記事のカスタマイズを反映したサンプルページはこちら。
- トップページカスタマイズと組み合わせできるようにしました。
- 解説とコピペできるコードを有料公開しています。
今回は固定ページを使ったトップページ作成に+αして使えるカスタマイズ。
フルワイドにして一部セクションに背景色をつける方法をご紹介します。
- テーマ「Cocoon」を使っている
- 固定ページを利用したトップページを使っている（または作りたい）
- 有料テーマ「SWELL」のようなフルワイドにしたい
このカスタマイズをマスターするとトップページの雰囲気が大きく変わります。
興味のある方は読み進めてくださいね。
- ブログ好きな40代主婦
- CocoonサイトをCSSでカスタマイズ
- JavaScriptを勉強中
- ドメインパワー33
- ワードプレスで２サイトを運営しています
です
- フルワイドカスタマイズの完成イメージ
- 当サイトのトップページカスタマイズと組み合わせOK
- フルワイドトップページを採用しているCocoonサイト
- サイズを表すCSSの単位
- コンテンツの幅について
- フルワイドトップページを作成する手順
- 解説①／フルワイドにするための仕組みと方法
- 解説②／はみ出たコンテンツを元の配置に戻す方法
- 解説③／セクションの一部に背景色をつける方法
- 解説④／スクロールバー分の幅を調整する方法
- 解説⑤／セクションまわりの不要な余白等を消す方法
- フルワイドカスタマイズ／HTMLコード（コピペOK）
- フルワイドカスタマイズ／CSSコード（コピペOK）
- 反映されないときの確認事項
- 背景色を追加したいとき
- さいごに／ブロックエディタの小技的な？
フルワイドカスタマイズの完成イメージ
まずはBefore／After画像をご覧ください。
入力したコンテンツはテーマで設定されたコンテナ（枠）の中に入ります。
入力したコンテンツをセクションごと区切りコンテナ（枠）から脱出させます。
- セクションの枠を作る
- セクション（コンテンツ表示エリア）の横幅をビューポート幅（表示領域）いっぱいに広げる
- セクションの一部に背景色をつける
HTMLでセクションの枠を作り、CSSで余白の調整と背景色をつけていきます。
自分でこのようにしたいと思っても失敗したことはないでしょうか。
実際に当サイトにもお問い合わせをいただくことがあります。
例１）セクションに背景色をつけたら両側に余白があってイマイチ…
例２）フルワイドにはできたけど、コンテンツまで左右に広がってしまいバランスが悪い…
こんな悩みを解決します！
実際に当記事のカスタマイズを反映させるとこのように完成します。
当サイトのトップページカスタマイズと組み合わせOK
トップページの作り方（コンテンツ内容）はこちらの記事で紹介しています。
当サイトのトップページは当記事（フルワイドにする方法）とこのトップページ作成の記事の内容を組み合わせて作っています！
「トップページ」と「フルワイド」を組み合わせて使えるようにコードを統一しました。（各セクションにつけたクラス名 section-wrap を合わせました）
- トップページカスタマイズでページを作成する。
- 当記事（フルワイドカスタマイズ）のCSSをコピペする。
- 背景色をつけるセクションのHTMLにクラスを追加。（section-wrapの後に半角スペースを空けてcolor-sectionを追加。背景色はCSSで設定します。）
<div class="section-wrap color-section">
<p>セクション２／背景色あり</p>
</div>/*セクション背景色*/
.color-section{
background:#FFE99A; /*カラーコードをここで設定*/
}同じコードを用いて作成したサンプルページがこちらです。
フルワイドトップページを採用している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の２つを使います！
コンテンツの幅について
通常、記事を作成するとテーマで設定された枠内にコンテンツが配置され、ビューポート（表示領域）の左右にはバランスよく余白が配置されます。（PCで表示した場合）
それぞれの幅をCSSの単位で表すとこのようになります。
- ビューポート幅（表示領域） width:100vw
- コンテンツ幅（親要素） width:100%
コンテンツ幅をフルワイド（ビューポート幅）に広げるカスタマイズをしていきます。
marginを計算してコンテンツを左右に引っ張るイメージ。
そして、幅を広げた際にびよーんと間延びしてしまうコンテンツを再び元の配置（中央）に戻すといった工程も必要になってきます。
背景色をつけて…（これは簡単）
そして、不要な余白や垂直スクロールバー分はみ出してしまう幅を調整する必要が…
うーん、いくつか工夫が必要。
それでは具体的に解説していきますね。コピペOKのコードも準備しました。
| 特定商取引法に基づく表記 | |
| サイト名 | Turicco |
| サイトURL | https://turicco.com/ |
| お問い合わせ | https://turicco.com/contact/ |
| 購入方法 | コンテンツ販売サービス、codoc(コードク)を利用しています。 詳しくは購入者向けFAQをご覧ください。 |
| 納品方法 | 記事公開 |
| 販売価格 | 500円／記事によって異なります |
| お支払い 方法 | クレジットカード、デビットカード、プリペイド型クレジットカード、Apple Pay、Google Pay、コンビニ決済 |
| ※codoc(コードク)というサービスを使っているため、クレジットカード情報を管理人が知ることはありません。ご安心ください。 | |
| 返金・キャンセルについて | codoc株式会社利用規約 第10条（返金）に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。 |
Comment