WordPress個別サポート

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

BizVektorのヘッダー画像のサイズ設定

BizVektorのヘッダー画像のサイズ設定(「外観」-「ヘッダー」)

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

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

スポンサーリンク

WordPressテーマ「LOTUS (TCD039)」

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

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

/* ヘッダー画像のサイズを変更 */
function my_biz_vektor_customheader_size() {
    return array(950, 150);
}
add_filter('biz_vektor_customheader_size', 'my_biz_vektor_customheader_size');
functions.phpを編集するときは画面が真っ白になることを想定して必ずFTPツールを使うようにしてください。「外観」-「テーマの編集」メニューで編集するのは危険です。不安な方はWordPress個別サポートにご相談ください。作業をサポートします。

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

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

ヘッダー画像のサイズが変更される

ヘッダー画像のサイズが変更される

以下、ヘッダー画像のサイズ設定の変更(functions.phpを直接修正)は古いバージョンのBizVektorの方法です。上記の設定でうまくいった方は、ヘッダー画像のフレームサイズの変更に進んでください。

ヘッダー画像のサイズ設定の変更(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行目あたりです。

BizVektorバージョン1.0.0でbizvektor_themesフォルダはdesign_skinsフォルダに変更されています。
#topMainBnrFrame { width:950px;min-height:250px; }

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

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

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

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

ヘッダー画像のフレームサイズの修正後

ヘッダー画像のフレームサイズの修正後

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート