WordPressテーマ THE THOR（ザ・トール）
別ブログサイトのZMASAa.blogとMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。
今回は、WordPressテーマ THE THOR（ザ・トール）での「カテゴリー（ナビゲーションメニュー）ホバー時」のカスタマイズについてまとめてみました。
WordPressテーマ THE THOR（ザ・トール）カテゴリー（ナビゲーションメニュー）
以前、ウィジェット「ナビゲーションメニュー」をカスタマイズして、トップページエリアにおすすめカテゴリーと注目ワードを掲載しています。
また同じく以前、ウィジェット「ナビゲーションメニュー」をカスタマイズして、サイドバーエリアにカテゴリーを掲載しています。
現在の「おすすめカテゴリー」「注目ワード」のスタイルは、下記の様になっています。
現在の「サイドバーエリアのカテゴリー」のスタイルは、下記の様になっています。
そのカテゴリー上にマウスカーソルをホバーしたときのスタイルは、次の様になっています。
これらの「カテゴリー（ナビゲーションメニュー）」上にマウスカーソルをホバーした時のスタイルを少しだけ変更するカスタマイズを行いたいと思います。
カテゴリー（ナビゲーションメニュー）ホバー時のカスタマイズ
WordPressテーマ THE THOR（ザ・トール）での「カテゴリー（ナビゲーションメニュー）ホバー時」のカスタマイズを行います。
カスタマイズ内容
「カテゴリー（ナビゲーションメニュー）ホバー時」のカスタマイズ内容は、下記の通りです。
「スタイルシート(style-user.css)」を開き、下記のカスタマイズ内容を以前カスタマイズを行った「■おすすめカテゴリー／注目ワード」の中の「.widget.widget_nav_menu ul.menu li:hover」部分に上書きします。
.widget.widget_nav_menu ul.menu li:hover {
z-index: 9999; /*ボックス重なり順序指定 2*/
box-shadow: inset 3px 3px 0 0 #fe619a, 3px 3px 0 0 #fe619a, 3px 0 0 0 #f6a068, 0 3px 0 0 #fe619a; /*マウスホーバージ罫線変化*/
background: #fff9fc;
animation: pooyoon3 2.0s ease-in-out 1 forwards; /*アニメーション処理*/
}
@keyframes pooyoon3 { /*アニメーションpooyoon3動作内容*/
0%, 50% {
transform: scale(1.0);
}
10%, 30% {
transform: scale(1.06);
}
20%, 40% {
transform: scale(0.94);
}
}
カスタマイズ後のカテゴリー（ナビゲーションメニュー）ホバー時
今回のカスタマイズによって、「カテゴリー（ナビゲーションメニュー）ホバー時」のスタイルは、次の様になりました。
今回のカスタマイズでは、「カテゴリー」上にマウスカーソルをホバーしたとき、収縮するアニメーションを付けてみました。
画像では分かり難いので、実際にZMASAa.net トップページで「カテゴリー（ナビゲーションメニュー）ホバー時」の動作を確認してみて下さい。
最後に
「カテゴリー（ナビゲーションメニュー）」にマウスカーソルをホバーしたときのスタイルがこれまで少し寂しいと思っていたので、今回のカスタマイズでそれが解消することができました。
利用する人にとって多少動きのある方が、良い方向で印象が変わってくると思います。
コメント