BizVektorのカスタマイズ

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色で交互に切り替える

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

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

関連記事

スポンサーリンク