BizVektorのカスタマイズ

BizVektorのテーマオプションで追加できるヘッダーロゴは高さが60pxに縮小されるため、大きめのロゴを追加すると次のような感じで微妙に小さくなってしまいます。

高さ60pxに縮小されたヘッダーロゴ

高さ60pxに縮小されたヘッダーロゴ

大きいヘッダーロゴを追加したい方のためにCSSの調整方法を紹介します。

スポンサーリンク

ヘッダーロゴの高さの調整

ヘッダーロゴの高さを調整するには、bizvektor_themes/plain/plain.cssに記述された次のスタイルを子テーマのstyle.cssにコピーして調整します。

BizVektorバージョン1.0.0でbizvektor_themesフォルダはdesign_skinsフォルダに変更されています。
#header #site-title a img { max-height:60px;margin-top:3px; }

「max-height:60px;」を「max-height:100px;」にすればロゴ画像の高さが最大100pxになります。「margin-top:3px;」(上の余白)は調整不要であれば削除して大丈夫です。

#header #site-title a img { max-height:100px; }

調整後は次のようになります。

調整後のロゴ画像

調整後のロゴ画像(最大の高さを100pxに)

バージョンやデザインスキンによって書き方が異なる場合があります。たとえば、デザインスキン「Rebuild」の場合は次のようになります。

#header .innerBox #site-title img { max-height:100px; }

ヘッダーロゴの幅の調整

ヘッダーロゴの幅は制限されていないので自由なサイズで作成できますが、右隣にある連絡先の領域に「width: 50%;」が指定されているので注意が必要です。

解像度にもよりますが、たとえばヘッダーロゴの幅が500pxくらいを超えるとヘッダーロゴと連絡先が横並びになりません。

ヘッダーロゴと連絡先

ヘッダーロゴと連絡先

連絡先の幅が50%に設定されているためです。

#header #headContact { width:50%; }

これを必要に応じて調整すれば幅の広いヘッダーロゴと連絡先が横並びになります。

#header #headContact { width:30%; }

調整結果は次のようになります。

幅の広いヘッダーロゴと連絡先を横並びに

幅の広いヘッダーロゴと連絡先を横並びに

このようにして貴社のロゴサイズに合わせてBizVektorの子テーマのCSSを調整してください。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
細かい質問からCSSやPHPのカスタマイズ、トラブル対応まで、この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
WordPress個別サポートの特徴
  • 最短で本日中に問題解決できます
  • 見積もり無料・料金は終了後の後払いです
  • 銀座教室・スカイプ・出張またはメールで対応します
カスタマイズがうまくいかないときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
こんなときはご相談ください(相談・見積もり無料)
  • サイトのデザインをカスタマイズしたい
  • CSS・PHPのカスタマイズがうまくいかない
  • 引っ越し(サーバー移転)したい
  • サイトをSSL対応(https://)したい
WordPress講座の問い合わせ先
WordPress講座申し込み
メールで問い合わせ

関連記事

スポンサーリンク