WordPress講座(個別相談)

BizVektor NEATでグローバルメニューのアイコンの色を変更する方法を紹介します。メニューで設定できる「キーカラー」はアイコンだけでなくサイト全体に反映されてしまうため、工夫が必要です。気になる方は参考にしてください。

BizVektor NEATでグローバルメニューのアイコン色だけを変更する

BizVektor NEATでグローバルメニューのアイコン色だけを変更する

スポンサーリンク

BizVektor NEATのアイコンの色はサイトのキーカラーと共通

BizVektorの拡張デザインスキン「NEAT」では、グローバルメニューにアイコンを付加できます。

BizVektor NEATのグローバルメニューのアイコン

BizVektor NEATのグローバルメニューのアイコン

アイコンの色は「外観」-「カスタマイズ」メニューの「NEAT 設定」‐「キーカラー」で変更できます。

グローバルメニューのアイコンの色は変更できるが…

グローバルメニューのアイコンの色は変更できるが…

ただし、この設定はアイコンの色だけでなくサイト全体のキーカラー(テーマカラー)にも反映されるので注意が必要です。

選択したキーカラーはサイト全体に反映される

選択したキーカラーはサイト全体に反映される

「アイコンの色だけ」を変更するには

サイト全体のキーカラーに影響を与えずアイコンの色だけを変更したい場合は、次のようなCSSを使う方法があります。

/* グローバルメニューのアイコン色を変更 */
#gMenu .menu li a strong::before {
    color: #b7282e;
}

「外観」-「CSSカスタマイズ」メニューまたは子テーマのstyle.cssに入力してください。

「外観」-「CSSカスタマイズ」メニューに入力した例

「外観」-「CSSカスタマイズ」メニューに入力した例

表示結果は次のようになります。

グローバルメニューのアイコン色だけを変更

グローバルメニューのアイコン色だけを変更

「color: #b7282e;」の「#b7282e」が色の設定(カラーコード)です。インターネットで検索してカラーコードを調べていただき、好きな色に変更してください。

アイコンの色を2色で交互に切り替える

アイコン色を2つ使って「赤」「青」「赤」「青」のように交互に切り替えるには、次のようなCSSを使います。

/* グローバルメニューのアイコン色(奇数) */
#gMenu .menu li:nth-child(odd) a strong::before {
    color: #b7282e;
}

/* グローバルメニューのアイコン色(偶数) */
#gMenu .menu li:nth-child(even) a strong::before {
    color: #c7dc68;
}

「color:」に指定してある「#b7282e」と「#c7dc68」が2色のアイコン色になります。好きな色に変更してください。

箇条書きのliに対して1,3,5…番目(奇数)と、2,4,6…番目(偶数)で使う色を切り替える仕組みです。たとえば、「li:nth-child(even)」は「偶数番目の子要素」という意味です。liがulの子要素だということを利用して順番などを指定することで一括でスタイルを設定できます。

表示結果は次のようになります。

アイコンの色を2色で交互に切り替える

アイコンの色を2色で交互に切り替える

あとは、いろいろとお試しください。

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

関連記事

スポンサーリンク