WordPress│1行だけ全幅で背景色を変更する方法

本文の幅を変えず、1行の背景だけを左右へ広げるCSSです。要素を100vwにするとスクロールバー幅やpaddingの影響で横スクロールが出ることがあります。この例は背景と同じ色の影を左右へ伸ばし、上下をclip-pathで切り取ります。

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

動く見本

見本は枠の幅で背景を止めています。画面幅まで広がるかは設置先の親要素によります。親にoverflow:hiddenやclip-pathがある場合は、その位置で切り取られます。

貼り付けるHTMLとCSS

対象ブロックの追加CSSクラスにwaza-wide-bandを指定します。HTMLで配置する場合は次の例を使います。CSSは子テーマのスタイルシートまたは追加CSSへ貼り付けます。

<p class="waza-wide-band">コピーライトなどのテキスト</p>

.waza-wide-band {
  background: #344c45;
  color: #fff;
  padding: 0.6em 1em;
  box-shadow: 0 0 0 100vmax #344c45;
  clip-path: inset(0 -100vmax);
}

背景色を変更するときはbackgroundとbox-shadowの色をそろえます。copyrightなどテーマ共通のクラスを直接指定せず、適用したい要素だけへ追加クラスを付けてください。この見本は本サイトのフッターを変更しません。

確認と戻し方

PCとスマホでページ全体に横スクロールが出ないこと、長い文章の折り返し、左右の背景、隣接する要素との重なりを確認します。影の部分はレイアウト上の幅を持ちません。リンクを入れる場合はキーボードフォーカスが切れないかも確認してください。

影を切り取る都合で上下にはみ出す装飾には向きません。背景と一緒に画像やボタン自体を全幅へ広げたい場合は、テーマの全幅ブロックを使います。戻すときは追加CSSクラスと、このクラスのCSSを削除します。旧100vw版とは方式が異なるため、両方を重ねて適用しないでください。

よくある質問：WordPressで1行だけ全幅で背景色を変更するとき

この方法では、何ができますか？

記事では、本文の幅を変えず、1行の背景だけを左右へ広げるCSSです。この例は、背景と同じ色の影を左右へ伸ばし、上下をclip-pathで切り取ります。

要素を100vwにする方法と、何が違いますか？

記事では、要素を100vwにすると、スクロールバー幅やpaddingの影響で横スクロールが出ることがあります。この方法は影を使うので、旧100vw版とは方式が異なり、両方を重ねて適用しないでください。

クラスは、どう指定しますか？

記事では、対象ブロックの追加CSSクラスにwaza-wide-bandを指定します。HTMLで配置する場合は、掲載の例を使います。CSSは子テーマのスタイルシートまたは追加CSSへ貼り付けます。copyrightなどテーマ共通のクラスを直接指定せず、適用したい要素だけへ追加クラスを付けます。

背景色を変えるときは、何に気をつけますか？

記事では、背景色を変更するときは、backgroundとbox-shadowの色をそろえます。

画面の端まで背景が広がらないことはありますか？

あります。記事では、画面幅まで広がるかは設置先の親要素によります。親にoverflow:hiddenやclip-pathがある場合は、その位置で切り取られます。

どんな装飾には向きませんか？

記事では、影を切り取る都合で、上下にはみ出す装飾には向きません。背景と一緒に画像やボタン自体を全幅へ広げたい場合は、テーマの全幅ブロックを使います。

公開前に、何を確認しますか？

記事では、PCとスマホでページ全体に横スクロールが出ないこと、長い文章の折り返し、左右の背景、隣接する要素との重なりを確認します。影の部分はレイアウト上の幅を持ちません。リンクを入れる場合は、キーボードフォーカスが切れないかも確認します。

元に戻すには、どうしますか？

記事では、追加CSSクラスと、このクラスのCSSを削除します。