BizVektorのヘッダー画像のサイズを変更する

BizVektorのヘッダー画像のサイズは、「外観」-「ヘッダー」メニューに書かれているように950 × 250ピクセルです。

このサイズを変更する方法を紹介します。

ここでは、高さを短くして950 × 150ピクセルに変更してみます。

ヘッダー画像のサイズ設定の変更（フィルターフック）

最近のBizVektorでは、ヘッダー画像のサイズを修正できるようにフィルターフックが準備されています。たとえば、次のようなコードを子テーマのfunctions.phpに入力することで、ヘッダー画像のサイズを設定できます。

/* ヘッダー画像のサイズを変更 */
function my_biz_vektor_customheader_size() {
    return array(950, 150);
}
add_filter('biz_vektor_customheader_size', 'my_biz_vektor_customheader_size');

「array(950, 150)」が幅950px、高さ150pxを示しています。違うサイズにしたい場合は、この数字を直してみてください。

変更後、「外観」-「ヘッダー」メニューを見ると、ヘッダー画像の推奨サイズが変更されています。

ヘッダー画像のサイズ設定の変更（functions.phpを直接修正）

まず、functions.phpを開いてヘッダー画像のサイズが定義されている部分を見つけます。BizVektorのバージョン0.11.1.2では、148行目あたりです。

define('HEADER_IMAGE_WIDTH', 950);
define('HEADER_IMAGE_HEIGHT', 250);

「外観」-「テーマ編集」メニューからも変更できますが、他のファイルも編集するのでレンタルサーバーのFTPツールまたはFTPソフトとテキストエディタを使ってダウンロード、編集してください。

この250を150に変更します（別の値でも構いません）。

define('HEADER_IMAGE_WIDTH', 950);
define('HEADER_IMAGE_HEIGHT', 150);

※今回はヘッダー画像の高さを変更します。幅の変更については別の機会に紹介したいと思います。

「外観」-「ヘッダー」メニューの設定が「950×150px」に変更されます。

この時点で「950×150px」のヘッダー画像が使用可能になりますが、無駄な余白が残っているので、画像周りのデザイン変更も必要なことがわかります。

ヘッダー画像のフレームサイズの変更

ヘッダー画像を囲む枠（フレーム）はbizvektor_themes/plain/plain.cssに記述されています。BizVektorのバージョン0.11.1.2では、821行目あたりです。

#topMainBnrFrame { width:950px;min-height:250px; }

このスタイルを変更するため、次のようなCSSを子テーマのstyle.cssに記述します。

@media (min-width: 970px) {
#topMainBnrFrame { width:950px;min-height:150px; }
}

「@media (…) {…}」は、親テーマの設定にならったレスポンシブ対応のメディアクエリーです。これを省略すると、スマホからのアクセスでもヘッダー画像の幅が950pxになってしまいます。

ヘッダー画像を囲むフレームのサイズが変更され、余白も調整されます。