WordPress個別サポート

BizVektorでは「外観」-「カスタマイズ」メニューからグローバルメニューなどに使う色を変更できますが「キーカラー」を変更するとサイト全体の色が変わってしまいます。そこで、グローバルメニューの色だけを変更するCSSの例を紹介します。仕上がりイメージは次のようになります。

グローバルメニューの色を変更したイメージ

グローバルメニューの色を変更したイメージ

グローバルメニューの色(背景色・文字の色)を変更するCSSの例は次のようになります。子テーマのstyle.cssなどに入力してお使いください。

/* グローバルメニューの背景色 */
#gMenu {
    background: darkred !important;
}

/* グローバルメニュー項目の背景色など */
#gMenu .menu li a {
    background: darkred !important;
    color: #fff !important;
    border: none !important;
    box-shadow: unset;
    text-shadow: none;
    padding: 10px 20px;
}

/* グローバルメニューのリンク文字の色 */
#gMenu .menu li a strong,
#gMenu .menu li a span {
    color: #fff !important;
}

/* グローバルメニューのマウスオーバー時の色 */
#gMenu .menu li a:hover {
    background: #f6bfbc !important;
    color: #000 !important;
}

/* 既存の枠線などを消す */
#gMenu,
#gMenu .menu,
#gMenu .menu li a {
    border: none !important;
    box-shadow: unset;
}

強調した部分の「background」が背景色、「color」が文字の色です。自由に変更してお使いください。

主なデザインスキンの仕上がりは次のようになります。

普段は真っ白な「プレーン」のグローバルメニューにも色を付けられます。

デザインスキン「プレーン」の例

デザインスキン「プレーン」の例

「Calmly」はこんな感じになります。キーカラーとは別の色にできます。

デザインスキン「Calmly」の例

デザインスキン「Calmly」の例

「Default」はこんな感じになります。サイトのキーカラー(ここでは緑)とは別の色に設定できます。

デザインスキン「Default」の例

デザインスキン「Default」の例

「Rebuild」は次のようになります。

デザインスキン「Rebuild」の例

デザインスキン「Rebuild」の例

余白に違和感があれば、上記のCSS1行目から4行目の「グローバルメニューの背景色」を削除してみてください。次のようにスッキリしたメニューになります。

RebuildのCSS修正後

RebuildのCSS修正後

あとは自由に色などを変更してみてください。

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

関連記事

Lightningのカスタマイズ

WordPressカスタマイズ

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

WordPressプラグイン

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