今回の記事では、WordPressテーマ: 賢威7 のヘッダー画像を横幅いっぱいに広げる方法を紹介したいと思います。

ヘッダー画像を横幅いっぱいに広げると、サイト全体が一気に大きく開放的な印象になるので、風景などの写真を使う場合に特にオススメしたい方法です。

実は WordPress のテーマによっては横幅を広げるのにPHPコードの編集が必要になるものもありますが、賢威7ではとても簡単に横幅を広げることができます。

この記事の文章量の少なさが気になってしまうくらい、ほんと一瞬です。

カスタマイズ前

↓ ヘッダー画像はコンテンツと同じ横幅
header-banner-before

カスタマイズ後

↓ ヘッダー画像が横幅100%になった
header-banner-after

1. CSS ファイルを編集

親テーマ(賢威自体)の base.css や、子テーマの style.css など、お好みのCSSファイルに以下のコードを追加します。

.main-image-in {
    width: 100%;
}

これで完成です!

気分に合わせてお手軽にカスタマイズできますね。

header-banner-after