メニューのフォントについて

[うみ]

フォントを変えたくて、プラグインを入れてページ全体のフォントは変えることができました。ですが、

ハンバーガーメニューを押すと出てくるメニューリンクのフォントを変えることができませんでした。

自分で調べてみましたが、なかなか答えが出ませんでした。

大変恐縮ですが、ご教示いただけないでしょうか。

リンクのフォントとサイズを変更したいと思っています。

欲を言えば、リンクの左側につく-ハイフンのマークも消したいのですが可能でしょうか。

[佐高]

プラグインがどのような影響を与えているのかが分かりかねるので、もしかしたらうまくいかないかもしれません。察するにWEBフォントを導入するプラグインかと思うので、多分いけるとは思います。

ざっくり見たところ、該当部分は「.header .nav li a」のようなので、そこのfont-familyを変えてCSSを記述すれば変えられると思います（こちらのローカル環境下では変更できました）。
もしフォントがわからない場合は検証ツールなどを使用されるといいと思います。

下記のものは参考まで（EASELのbodyに指定されているフォント群なので、このままだと変化しません）

.header .nav li a {
font-family: “Avenir”, “Helvetica Neue”, “Helvetica”, “Arial”, “Hiragino Sans”, “ヒラギノ角ゴシック”, YuGothic, “Yu Gothic”, “メイリオ”, Meiryo, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif;
}

また、リンクの左側につくハイフンマークはそれの擬似要素としてついているものなので、

.header .nav li a:before {
display: none;
}

で消えると思います。

もしかしたらきちんとレスポンシブに対応した記述にした方がいいのかもしれないですが、少し見た感じではそのままで大丈夫そうでした。もし気になるようでしたらご対応ください。

うまくカスタマイズできることを願っております。

[うみ]

とても親切に対応していただき、ありがとうございます！

おかげさまで希望通りのデザインに変更することができました。本当にありがとうございます。

ちなみに@importで好きなフォントに変更しました。サイズも変えられました。

cssを教えていただき、ありがとうございました！解決できてスッキリしました。

感謝いたします。

[投稿者]

投稿