BizVektorのカスタマイズ

BizVektorで画面最上部に表示されるキャッチフレーズのスタイルを変更する方法を紹介します。現在は次のようなイメージです。

BizVektorのキャッチフレーズ

BizVektorのキャッチフレーズ

次のように変更することができます。

BizVektorのキャッチフレーズのスタイルを変更

BizVektorのキャッチフレーズのスタイルを変更(デザインパターン「プレーン」の場合)

キャッチフレーズのidは「headerTop」です。headerTopに対してCSSを設定すると背景色や枠線(上)のスタイルを変更することができます。

ただし、キャッチフレーズのフォントはBizVektorのスタイルシート(bizvektor_themes/plain/plain.css)の中で「#headerTop #site-description」というCSSセレクタで指定されているので、フォント設定を変更する場合は設定を上書きできるように同じCSSセレクタで指定します(同じセレクタでなくても上書きはできます)。

BizVektorバージョン1.0.0でbizvektor_themesフォルダはdesign_skinsフォルダに変更されています。
/* キャッチフレーズの背景色・枠線(上)を設定 */
#headerTop {
    background-color: #006600;
    border-top-color: #009900;
}

/* キャッチフレーズのフォント設定 */
#headerTop #site-description {
    color: #ffffff;
    font-size:10px;
}

キャッチフレーズの背景色、フォントなどが変更されます。

キャッチフレーズのスタイルの変更後

キャッチフレーズのスタイルの変更後

キャッチフレーズが不要であれば次のCSSで非表示にすることができます。

/* キャッチフレーズを非表示に */
#headerTop {
    display:none;
}

キャッチフレーズが消えます。

ヘッダー上のキャッチフレーズが消える

ヘッダー上のキャッチフレーズが消える

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

WordPress個別サポートへの問い合わせWordPress個別サポートの申し込み

関連記事

スポンサーリンク