【BizVektor】トップ（ヘッダー）画像の横幅を画面にフィットさせる方法！

どうも、ジョニーです。

私も他のサイトで使用しているテーマ【BizVektor】のカスタマイズした箇所の備忘録です。（ちょいちょい書いていきます）

同じ箇所でも、サイトによって様々なカスタマイズ方法がありますよね。一概にどれが良いとは言い切れない。

これは当ブログでのカスタマイズなので、ご自身のやり方に合ったものを参考にしてくださいね！

使用するにしても、カスタマイズするにしても、自己責任でお願いします。

では、いってみよう！

カスタマイズする理由
カスタマイズスタート
1. 「style.css」をいじる
2. 「!important」とは？
まとめ（感想）

カスタマイズする理由

デフォルトでは横長の画像を使用しているのですが、もっとインパクトをつけたかったのでカスタマイズします。せっかくなので画面いっぱいにフィットするようにします。

デフォルトではこんな感じ ↓

bizvektor-header-image-customize-02r-web

仕上がりイメージはこんな感じ ↓

カスタマイズスタート

「style.css」をいじる

style.cssに下記のコードを加えます。

バックアップしてから作業してね！

/*ヘッダー画像のカスタマイズ 開始 */
/*　画像フレームの幅を100%に　*/
#topMainBnrFrame {
    width: 100%;
    height: auto;
}
 
/*　画像幅を100%に　*/
#topMainBnr img {
    width:100% !important;
}
 
/*　画像の枠線を削除　*/
#topMainBnrFrame .slideFrame {
    border:none;
}
 
/*　画像の位置調整　*/
#topMainBnrFrame .slideFrame img {
    left: 0px;
}
 
/*　画像の余白を削除　*/
#topMainBnr {
    padding:1px 0px;
}
 
/*ヘッダー画像のサイズ定義を変更した場合 */
@media (min-width: 970px) { /*　BizVektorのレスポンシブ設定による　*/
    /*　画像フレームの最小の高さを設定　*/
    #topMainBnrFrame {
        min-height: 200px;
    }
}
 
/*　画像フレームの背景色・影を消す　*/
#topMainBnr,
#topMainBnrFrame {
    background-color:transparent;
    box-shadow:none;
    border:none;
}
/*ヘッダー画像のカスタマイズ 終了 */

※サイズ指定するときは「!important」を記入しないと反映されませんでした。