タイトルの『中央軸がズレてしまう件』に関しては過去の記事をご参照ください。
以前作成した、ローカル開発環境、めっちゃ役立ってます。 本番環境同様のカテゴリーや記事などがそのままでは利用で…
既存のCSSに定義を加えるだけで何とかできないか模索してみましたが、メニューを表示している箇所の階層構造に手を出す勇気が出ませんでした。
そんな折、いろいろと調べているうちに『Menu Image』というグローバルナビにアイコンを表示させるプラグインの紹介記事を発見しました。
賢威8のグローバルメニューにプラグインを使ってアイコンを表示する方法を解説
根本的な解決策ではありませんが、結果として問題となっている点をほんの少し解消することが出来ましたのでご紹介したいと思います。
プラグインインストールから使い方までは前述の記事をご参照ください。
最新のWordPressバージョンでの動作確認は保証されていないようですが、2019年6月26日現在では動作確認できました。
アイコン画像は下記サイトから探しました。
6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO
余談ではありますが、上記サイトではアイコン画像の色の指定が出来る為、大変便利です。
ただし、反転画像を作成することはWindows標準機能を使ってもできません。
そのため、今回はデフォルト画像として『黒色:rgb(0,0,0)』、マウスオーバー時の画像として『賢威8デフォルト色:rgb(0,133,138)』を用意しました。
またまた話が逸れますが、CSSを眺めていると色の指定が『RGB』ではなく、『カラーコード』での指定となっており、前述のサイトで色の指定を行うためには変換が必要になります。
色指定の変換に関しては下記サイトを利用させて頂いております。
WEBブラウザ上で動作する、RGB値とHTML・CSSなどの色指定で使用するカラーコードを相互変換するシンプルなツール。16進数カラーコードとRGBを変換する計算式の解説も。
話を戻しますが、プラグインを適用し、画像の設定を行った後の表示がこちらになります。
ちょっとカスタマイズしている感じがいいですね。
マウスオーバーした時の表示がこちらです。
プラグインの設定でアイコンサイズを『24*24』にしているため、4pxのズレはありますがそれほど中央軸の違和感なく表示できるようになりました。
しかし、ここで気になったのがマウスオーバー時にアイコン画像は切り替わるのに、ラベル表示は切り替わらない点です。
ということで、マウスオーバー時にラベルも合わせて表示を切り替えるように変更してみました。
変更するのは『base.css』の下記の箇所になります。
.keni-gnav_inner li a:hover,
.keni-gnav_inner li a:active,
.keni-gnav_inner li a:focus{
border-bottom: 3px solid #05a5ab;
}
ここに文字色の定義を追加します。
.keni-gnav_inner li a:hover,
.keni-gnav_inner li a:active,
.keni-gnav_inner li a:focus{
border-bottom: 3px solid #05a5ab;
color: #05a5ab;
}
指定した色は『賢威8』のデフォルト色です。
色だけに色々デザイン模索してみたのですが、中学時代から『ピカソ』と呼ばれていた私には今も変わらず前衛的なセンスしかなかったため、親和性の高い色を選びました。
適用した結果がこちらです。
グローバルナビの選択状態がより分かりやすくなりました。
『Menu Image』プラグインの動作保証がなされないままであれば、暫定的な対処となりますが、ひとまずはこれで行こうと思います。
以上です。
スポンサーリンク