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

 
どうも、ジョニー（@creatorcheck）です。

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

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

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

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

では、いってみよう！

カスタマイズする理由

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

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

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

カスタマイズ スタート

「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」を記入しないと反映されませんでした。

「!important」とは？

スタイルを記述する時に、値の後にスペース（半角）を挟んで「!important」を記述すると、優先的にスタイルが適用される！というものです。

 
上記を参考にお好きにカスタマイズどうぞ。

今回参考にした記事はコチラ

まとめ（感想）

今回は「ヘッダー画像」の話でしたが、このカテゴリーでは、気の向くままにBizVektorのカスタマイズもご紹介していく予定です。

BizVektorの読み方は、「ビズベクター」じゃなくて「ビズベクトル」だよ！私は間違えた..ぐはは

本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver4.x対応版

posted with カエレバ

プライム・ストラテジー株式会社 SBクリエイティブ 2015-02-14

Amazon

楽天市場

Yahooショッピング