以前作成した、ローカル開発環境、めっちゃ役立ってます。
当ブログで使用しているテーマ『賢威』から先日、『賢威8』のスタンダード版が公開されました。 『賢威』を導入した…
本番環境同様のカテゴリーや記事などがそのままでは利用できないのがたまにキズですが、それは本番リリースで気付くこともあるということにしておきましょう。
Fit & Gap
今回の気になるところはこちらです。
一見して、グローバルナビを展開しただけのように見えますが実際には『Xamarin』カテゴリにマウスオーバーの状態となっています。
これだとクリックする際に「今私は『Xamarin』カテゴリを選択しているんだ」という自信が持てない作りになっています。
そこで、メニューを選択する際のユーザビリティの向上を図りたいと思います。
Solution
解決策としてはだいたい二通りではないでしょうか。
- 背景色を変更する。
- 下線を引く。
タイトルからわかるように、今回は『背景色を変更する』方法を取りました。
変更するのは『base.css』になります。
.keni-gnav_inner li ul a:hover,
.keni-gnav_inner li ul a:active,
.keni-gnav_inner li ul a:focus{
border-bottom: 0;
}
上記記載がマウスオーバー時のスタイルになります。
言葉にすると「『keni-gnav_inner』で定義されたクラスの『li』タグ内の『ul』タグ内の『a』タグにカーソルが当たったときに適用されるスタイル」という感じでしょうか。
よってここに背景色を指定してあげます。
.keni-gnav_inner li ul a:hover,
.keni-gnav_inner li ul a:active,
.keni-gnav_inner li ul a:focus{
border-bottom: 0;
background: #00858a;
}
今回は『賢威8』のデフォルトの色を指定しました。
適用した結果がこちらです。
無事、想定通りの方法で解消することが出来ました。
余談(解決策求む)
今回掲載した画像からもわかる通り、前回行ったカスタマイズで大きく表示された親メニューと子メニューの中央が若干ずれています。
『賢威7.1』から『賢威8』へ移行したことで、ページヘッダー部のグローバルナビが表示されなくなっていたことに気…
というのも、初期表示の状態で表示されているカテゴリーに子のカテゴリーが存在する場合、ドロップダウンリストであることを示す下矢印が右側に表示されます。
その下矢印が表示されることで親の表示領域が若干詰まるようなのですが、子の表示領域には影響がないので中央が若干ずれてしまいます。
CSSの設定を色々やってみたり、メニューを作成している部分を探してみたりしたのですが、解決策が見つかりませんでした。
最悪全て左寄せにしてしまって揃えるのもアリかとは思いますが、理想としては中央なのでもう少し迷走してみます。
以上です。
スポンサーリンク