お買い物忘れはありませんか?Amazon

Cocoonでもフルワイドにできる!セクション背景色をつけてトップページ作成

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

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

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

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

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

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

スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー33
  • ワードプレスで2サイトを運営しています
はっちゃん
です
プロフィール

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

まずはBefore/After画像をご覧ください。

Before

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

After

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

カスタマイズ内容
  1. セクションの枠を作る
  2. セクション(コンテンツ表示エリア)の横幅をビューポート幅(表示領域)いっぱいに広げる
  3. セクションの一部に背景色をつける

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

自分でこのようにしたいと思っても失敗したことはないでしょうか。

実際に当サイトにもお問い合わせをいただくことがあります。

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

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

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

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

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

スポンサーリンク

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

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

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

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

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

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

スポンサーリンク

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

当サイト以外にもフルワイドトップページを採用しているCocoonサイトを紹介します。

配色の使い方等、フルワイドのイメージを膨らませてくださいね。

koikenote

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

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

さらば、思うだけ

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

雨止み屋ブログ

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

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

はるのとなり

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

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

このように、フルワイドにすることで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つを使います!

スポンサーリンク

コンテンツの幅について

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

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

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

コンテンツ幅をフルワイド(ビューポート幅)に広げるカスタマイズをしていきます。

marginを計算してコンテンツを左右に引っ張るイメージ。

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

背景色をつけて…(これは簡単)

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

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

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

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

Comment

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