以前作成した、ローカル開発環境、めっちゃ役立ってます。

本番環境同様のカテゴリーや記事などがそのままでは利用できないのがたまにキズですが、それは本番リリースで気付くこともあるということにしておきましょう。

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』のデフォルトの色を指定しました。

適用した結果がこちらです。

無事、想定通りの方法で解消することが出来ました。

余談(解決策求む)

今回掲載した画像からもわかる通り、前回行ったカスタマイズで大きく表示されたメニューと子メニューの中央が若干ずれています。

というのも、初期表示の状態で表示されているカテゴリーに子のカテゴリーが存在する場合、ドロップダウンリストであることを示す下矢印が右側に表示されます。

その下矢印が表示されることで親の表示領域が若干詰まるようなのですが、子の表示領域には影響がないので中央が若干ずれてしまいます。

CSSの設定を色々やってみたり、メニューを作成している部分を探してみたりしたのですが、解決策が見つかりませんでした。

最悪全て左寄せにしてしまって揃えるのもアリかとは思いますが、理想としては中央なのでもう少し迷走してみます。

以上です。

スポンサーリンク