カーソルを置くとグローバルメニューの背景色が変わるようにする方法（マウスホバー）｜【Cocoonカスタマイズ③】

cocoon
2024.05.25

伝えたいこと

僕のグローバルメニューは以下の写真のようでした。でも、何か味気ないです。そこで、このメニューの上にカーソルを持ってくると、背景色が変わるようにカスタマイズしようと思います。

変更の手順


「外観」→「カスタマイズ」と順にクリック

「追加 CSS」をクリック

ここに以下のプログラムを追加します。　コピー&ペーストで構いません。このコードを追加し、「公開」をクリックすれば、変更完了です！

#navi .navi-in a:hover{
	color: #f4f6f3;
	background: #515857;
	transition: 0.8s ;
}

これでカスタマイズ完了！

変更の確認

適当なブログのページを開き、デザインが変更されているか確認してみましょう！
メニューにカーソルを乗せると背景が変わっていることが確認できます。

プログラムの内容

プログラム(CSS)の内容を書いておくので、カスタマイズに役立ててください

color: #f4f6f3;

これは、マウスがメニューに乗った時の文字の色を示しています。今回は白色です。

background: #515857;

これは、マウスがメニューに乗った時の背景色を示しています。今回はグレーです。

transition: 0.8s ;

これは、マウスがメニューに乗ったときに背景と文字の色を速度のことです。今回は0.8秒かけて、徐々にデザインを変更していきます。この値が大きいほど ゆっくり変化し、この値が小さいほど すぐに変化します。

コメント