WebCraftLog

賢威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

↑