THE SONIC カスタマイズ

【THE SONIC WPテーマ】PC閲覧時ヘッダーメニューのホバーカラーを変更する方法

2 min

この記事のターゲット!

先日発売されたWordPressテーマTHE SONIC」の小手先カスタマイズの一つ!

今回もヘッダーに焦点をあててみたいと思います。

前回のヘッダーの背景を白にする方法を行って、PC閲覧時にヘッダーメニューのホバーカラーに変化がなくなってしまったあなたや、元々ホバーカラーを変更したかったあなたに捧げます!

それでは、PC閲覧時ヘッダーメニューのホバーカラーを変更する方法を解説致します。

PC閲覧時ヘッダーメニューのホバーカラーを変更する方法

初期設定だと、PCで閲覧時にヘッダーメニューをホバーすると少し薄めのホワイトになるのですが、前日の「ヘッダーの背景を白にする方法」でヘッダーの背景をホワイトにしていると、全くホバーカラーが変更されないため、閲覧者に不親切です。

そこで、ヘッダーメニューのホバーカラーを変更するコードをCSSに追記します。

ここで変更点は、以下の一つです!

  • ヘッダーメニューのホバーカラーを指定

またCSSに追加していくにあたり、その前に注意事項を一つ!

カスタマイズする際は、必ずバックアップを取ってから行いましょう!またTHE SONICの子テーマが適応されていることを前提としています。

CSSの追加方法

CSSの追加方法は以下の通りです。

  • ローカル環境でカスタマイズしたCSSをFTPソフトでファイル転送する
  • 管理画面 外観 > テーマエディター からCSSを追加する
  • 管理画面 外観 > カスタマイズ > 追加CSS にCSSを追加する

3つの方法がありますが、個人的にはローカル環境でカスタマイズしたCSSをFTPソフトでファイル転送させる方法をおすすめします。

初期設定等は面倒なのですが、一度設定するとリカバリーしやすいというメリットが最大の理由です。

ただし、少ないコードでのカスタマイズであれば、管理画面 外観 > カスタマイズ追加CSS にCSSを追加する方法が便利です。

PC閲覧時ヘッダーメニューのホバーカラーを変更するカスタマイズ

それでは、PC閲覧時ヘッダーメニューのホバーカラーを変更するカスタマイズを解説致します。

CSSに次のコードを追加します。

.nav-style-def .menu-item:hover {
    background-color: #d2e0e4;
}

上記のカラーコードは、当サイトカラーです。2020年4月現在

この上記の#以降のカラーコードをお好みのカラーに変更して下さい。

カラーコードの確認は、原色大辞典さんがおすすめです!

PC閲覧時ヘッダーメニューのホバーカラーを変更する方法 あとがき

ヘッダーの背景を白にされている方は、ヘッダーメニューのホバーカラーも変更しないと、ホバー時にカラーが変化しません。

たった3行のコードなので、気分転換に変更するのもいいかもしれませんね!

以上、「THE SONIC」の小手先カスタマイズの一つ「PC閲覧時ヘッダーメニューのホバーカラーを変更する方法」でした。

こちらも読まれています
gozi

gozi

様々な気になるもの…「MacやiPhone、家電やWordpressのカスタマイズなど…」を綴った雑記ブログ

FOLLOW

カテゴリー:
関連記事