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

例えばコピーライト部分だけ色を変更したいといったことはないでしょうか？

実はCSSをうまく使えば1行だけ、全幅で塗りつぶしをするという表現もできます。

サンプル

当記事のフッターのみ、コピーライトの背景色が変化しているはずです。

著者

motoki

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

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

WordPressテーマ「SWELL」特化の...

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

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

全幅で背景色を変更する方法はCSSを追加するだけです。

widthやmargin等の記述に工夫が必要になります。

CSS

やり方は簡単です、下記のCSSを追加してみてください。

.copyright {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: var(--color_main);
    color: white;
    padding: 0.6em;
}

確認

当記事のフッターのみ、コピーライトの背景色が変化しているはずです。

まとめ

今回の表現はコンテンツ幅を超えて、背景色を変えたり要素を配置するときに使えます。

ぜひ試してみてください。