
どうも、ジョニーです。
私も他のサイトで使用しているテーマ【BizVektor】のカスタマイズした箇所の備忘録です。(ちょいちょい書いていきます)
同じ箇所でも、サイトによって様々なカスタマイズ方法がありますよね。一概にどれが良いとは言い切れない。
これは当ブログでのカスタマイズなので、ご自身のやり方に合ったものを参考にしてくださいね!
使用するにしても、カスタマイズするにしても、自己責任でお願いします。
では、いってみよう!![johnny-c]()

カスタマイズする理由
デフォルトでは横長の画像を使用しているのですが、もっとインパクトをつけたかったのでカスタマイズします。せっかくなので画面いっぱいにフィットするようにします。
デフォルトではこんな感じ ↓
仕上がりイメージはこんな感じ ↓
カスタマイズ スタート
「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のカスタマイズもご紹介していく予定です。

BizVektorの読み方は、「ビズベクター」じゃなくて「ビズベクトル」だよ!私は間違えた..ぐはは
本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver4.x対応版
posted with カエレバ
プライム・ストラテジー株式会社 SBクリエイティブ 2015-02-14