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

現在当ブログで使用しているテーマは「SWELL」になります。

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

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

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

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

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

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

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

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

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

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

CSSの追加方法

CSSの追加方法は以下の３つです。

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

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

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

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

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

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

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

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

上記のカラーコードは、2020年４月頃に当サイトで使用していたカラーです。

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

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

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

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

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

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

あわせて読みたい

【THE SONIC WPテーマ】ヘッダーの背景だけを白にする方法 WordPressテーマ「THE SONIC」のヘッダーをメインカラーを変更せずに白に変更する方法を解説致します。

あわせて読みたい

【THE SONIC WPテーマ】見出しh2の幅をコンテンツ枠ギリギリまで広げる方法 WordPressテーマ「THE SONIC」の見出しh2の幅をコンテンツ枠ギリギリまで広げる方法を解説致します。

あわせて読みたい

【THE SONIC WPテーマ】キャッチフレーズをモバイルだけ消す方法！ この記事のターゲット！ サイトのキャッチフレーズをパソコンは表示したいけど、モバイルのみ消したいという方 2020年3月29日に販売されたWordPressテーマ「THE SONIC」…

あわせて読みたい

【CSSの追加方法】WordPressテーマでカスタマイズする方法 WordPressテーマのカスタマイズに必要不可欠な「CSSの追加方法」を解説致します。