シェアする

  • このエントリーをはてなブックマークに追加

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

シェアする

  • このエントリーをはてなブックマークに追加
  • 19
bizvektor-header-image-customize-00-web


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

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

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

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

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

では、いってみよう!johnny-c

カスタマイズする理由

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

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

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

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

bizvektor-header-image-customize-01-web

カスタマイズ スタート

「style.css」をいじる

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

バックアップしてから作業してね!johnny-c
/*ヘッダー画像のカスタマイズ 開始 */
/* 画像フレームの幅を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のカスタマイズもご紹介していく予定です。

johnny-tubuyaki

BizVektorの読み方は、「ビズベクター」じゃなくて「ビズベクトル」だよ!私は間違えた..ぐはは
【BizVektor】トップ(ヘッダー)画像の横幅を画面にフィットさせる方法!
この記事をお届けした
クリエイターチェックの最新ニュース情報を、
いいねしてチェックしよう!
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク