【一部のみ画面幅いっぱい】背景の色が違う所だけ幅を広げるCSS

Webデザイン
2021.11.01
この記事は約8分で読めます。

WordPressのブロックエディタ「Gutenberg」のカラムブロックをカスタムして、一部の背景色だけ画面幅いっぱいにする方法を紹介します。

スポンサーリンク

【予備知識】カラムブロック

ブロックエディタ「Gutenberg」のカラムブロックとは、ブロックを横に並べる時に使うブロックです。

画面が大きなデバイスでは、本文を横に分割することができ、スマホなど画面の小さなデバイスで表示する場合は、縦並びになります。

スポンサーリンク

【カラムブロック】

【見本と注意点】

まずは見本から。

ここが画面幅いっぱい（100%）になっています。

サイドバーを利用していると重なってしまうので、表示が崩れてしまいます。

なので、紹介する方法は、HOMEや事業紹介など1カラムのページで使ってください。
（サイドバーを表示しているページで画面いっぱいにするケースは考えにくいですが…）

  • サイドバーを表示しているページでは使わない。

【構成・クラス設定】

カラムブロックの構成

  • 構成
    カラム = 赤（class=”column1″）
    　→ 1カラム = 青（class=”column2″）
    　　→ 白抜きボックス = 白
    　　　→ 段落 = 白文字

カラムには、それぞれCSSクラスを指定しています。

CSSクラスは、画面左のブロックメニュ最下部で設定します。

  • CSSクラスの指定方法
    →画面左部ブロックメニュー
    　→ 高度な設定
    　　→ 追加CSSクラス

背景色はcolumn1で設定し、column2はデフォルトでOKです。

  1. 構成
    カラム = 赤（class=”column1″）
    　→ 1カラム = 青（class=”column2″）
    　　→ 白抜きボックス = 白
    　　　→ 段落 = 白文字
  2. CSSクラスを指定
    画面左部ブロックメニュー
    　→ 高度な設定
    　　→ 追加CSSクラス
  3. 背景色
    カラム：色を指定
    1カラム：デフォルト（無色）
スポンサーリンク

【CSS】見た目を調整

CSSを使って、カラムブロックの見た目を調整します。

書き込む場所は、

特定のページのみで使う場合：ページの編集画面下部のカスタムCSS

サイト全体に反映させたい場合：テーマエディター → style.css

CSS

/* 特定のカラムを画面幅いっぱいにするCSS */
.column1
{
margin: 0 calc((100% - 100vw) / 2);
padding: 0 29px 1em;
}
.column2
{
margin: 0 calc((100% - 100vw) / 2);
padding: 25px calc((100vw - 1196px) / 2) 15px;
}

CSSの内容

css意味
■.column1{○カラムに適用
margin: 0 calc((100% – 100vw) / 2);　外側の余白 上下0、左右（画面幅100％-viewport100%）/2
padding: 0 29px 1em;　内側の余白 上0、左右 29px、下1文字分
}○カラムに適用 ここまで
■.column2{△1カラムに適用
margin: 0 calc((100% – 100vw) / 2);　外側の余白 上下0、左右（画面幅100％-viewport100%）/2
padding: 25px calc((100vw – 1196px) / 2) 15px;　内側の余白 上25px、左右（viewport100%-コンテンツ全体の幅）/15
}△1カラムに適用 ここまで

.column2 のpaddingはサイトのコンテンツ幅に合わせて変更してください。

  • CSSで見た目を調整
    • 書き込む場所
      特定のページのみで使う場合：ページの編集画面下部のカスタムCSS。
      サイト全体に反映させたい場合：テーマエディター→style.css。
    • CSS
      .column2 のpaddingはサイトのコンテンツ幅に合わせて変更する。

【反映されない場合】確認ポイント

追加したCSSが反映されない場合、よくあるミスとして以下が考えられます。

  • ブロック
    • クラス属性の設定
      設定したクラス属性の設定は抜けていませんか？
    • 文字の打ち間違い
      スペースやアルファベット、記号などを全角で入力している箇所はありませんか？
  • CSS
    • クラス属性の指定
      設定したクラス属性とCSSのクラス指定は一致していますか？
    • 文字の打ち間違い
      スペースやアルファベット、記号などを全角で入力している箇所はありませんか？
  • ブラウザ
    • キャッシュの影響
      ブラウザ設定からキャッシュをクリアしてください。

【応用】カラムをずらす

CSSの値をいじると、カラムをずらすこともできます。

column2を左上にずらす

/* 特定のカラムを画面幅いっぱいにして、column2を左上にずらすCSS */
.column1
{
margin: 0 calc((100% - 100vw) / 2);
padding: 0 29px 1em;
}
.column2
{
margin: -80px calc((100% - 70vw) / 2)  0 calc((100% - 100vw) / 2) ;
padding: 25px calc((100vw - 1196px) / 2) 15px;
}
css意味
■.column1{○カラムに適用
margin: 0 calc((100% – 100vw) / 2);　外側の余白 上下0、左右（画面幅100％-viewport100%）/2
padding: 0 29px 1em;　内側の余白 上0、左右 29px、下1文字分
}○カラムに適用 ここまで
■.column2{△1カラムに適用
-80px calc((100% – 70vw) / 2) 0 calc((100% – 100vw) / 2)　外側の余白 上-80px、 右（画面幅100％-viewport70%）/2、下0、左（画面幅100％-viewport100% /2
padding: 25px calc((100vw – 1196px) / 2) 15px;　内側の余白 上25px、左右（viewport100%-コンテンツ全体の幅）/15
}△1カラムに適用 ここまで

緑文字の-80pxを書き換えると上下します。

column2（白いカラム）を右に向かって伸ばすには、70%を書き換えます。

column2を右上にずらす

/* 特定のカラムを画面幅いっぱいにして、column2を右上にずらすCSS */
.column1
{
margin: 0 calc((100% - 100vw) / 2);
padding: 0 29px 1em;
}
.column2
{
margin: -80px calc((100% - 100vw) / 2)  0 calc((100% - 70vw) / 2);
padding: 25px calc((100vw - 1196px) / 2) 15px;
}
css意味
■.column1{○カラムに適用
margin: 0 calc((100% – 100vw) / 2);　外側の余白 上下0、左右（画面幅100％-viewport100%）/2
padding: 0 29px 1em;　内側の余白 上0、左右 29px、下1文字分
}○カラムに適用 ここまで
■.column2{△1カラムに適用
-80px calc((100% – 100vw) / 2) 0 calc((100% – 70vw) / 2)　外側の余白 上-80px、 右（画面幅100％-viewport100%）/2、下0、左（画面幅100％-viewport70% /2
padding: 25px calc((100vw – 1196px) / 2) 15px;　内側の余白 上25px、左右（viewport100%-コンテンツ全体の幅）/15
}△1カラムに適用 ここまで

緑文字の-80pxを書き換えると上下します。

column2（白いカラム）を左に向かって伸ばすには、70%を書き換えます。

スポンサーリンク

【まとめ】カラムブロックを使って、一部の背景色だけ画面幅いっぱいにした。

カラムブロックを利用して、一部の背景色だけ画面幅いっぱいにするカスタマイズを行いました。

投稿ページでは使いどころがない方法ですが、Webサイト風にしているページでは良いアクセントになると思います。

応用のずらした表示も使いこなせれば、ワンランク上のデザインにすることもできるので是非試してみてください。

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