賢威7のヘッダー画像を横幅いっぱいに広げる方法

  • Google+
  • B!はてブ
  • Pocket
  • 今回の記事では、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