WordPress個別サポート

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

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

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

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

スポンサーリンク

WordPressテーマ「LOTUS (TCD039)」

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

ヘッダーロゴの高さを調整するには、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に)

ヘッダーロゴの幅の調整

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

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

ヘッダーロゴと連絡先

ヘッダーロゴと連絡先

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

#header #headContact { width:50%; }

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

#header #headContact { width:30%; }

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

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

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

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

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

関連記事

WordPressカスタマイズ

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

WordPressプラグイン

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