「font-family」で游ゴシックを指定したWordPressサイトをWindowsのChromeで表示すると、フォントが細く見える場合の対処法
CSSの「font-family」で游ゴシックを指定すると、WindowsのChromeの場合、テキストが細くかすれていて見難いと感じたことはありませんか？ 他のブラウザでは、ちょうどいいと感じる太さで游ゴシックは表示されているのですが、どうもChromeだけは… と思うのは自分だけでしょうか。
今回はWordPressサイトを制作している場合の游ゴシック問題対処法を自分なりにやってみたのでご紹介します。
WindowsのChromeの場合、テキストの太さはどのようになるかは、下図をご参照ください。赤枠のものが、font-weight:normalで青枠の部分がfont-weight:500を指定しています。赤枠の方がテキストが細すぎて少し見難くないでしょうか？
この問題、以前は@font-faceを使ったりして、解決していたのですが、Chrome62以降では効かなくなったそうです。また、font-weight:500を指定する方法もありますが、他のブラウザなどでは、太字になってほしくない場所が太字になることがあるのでちょっと困っていました。
ブラウザとユーザーエージェントを選別しclassを付与
そこで、ユーザーがサイトにアクセスした時、ブラウザやユーザーエージェントを選別してブラウザやユーザーエージェント毎にclassを付与するようにすれば、WindowsのChromeでアクセスした時だけ特定のclassが付与され、この時のみfont-weight:500を指定すれば、WindowsのChromeの時だけ、テキストが少し太くできると考えました。
ブラウザやユーザーエージェント毎にclassを指定するには、下記のコードをfunctions.phpにコピペしてください。
<body>タグについて
次に<body>タグに<?php body_class(); ?>が指定されていなかったら、下記のように指定してください。
上記設定をすれば、<body>タグに以下のようなclassが付与されます。
<body class=”home blog chrome windows”>
CSSの指定
付与されたclasschromewindowsにCSSでfont-weight:500を指定します。
これで、WindowsのChromeでアクセスした時だけ、font-weight:500を指定することができます。もちろん、他のブラウザやユーザーエージェントでアクセスがあった場合は別のclassが付与されるので、ブラウザ毎にCSSを指定することも可能です。
まとめ
細かいところなので、気になる人もいれば、 気にならない人もいるかと思います。しかしテキストの見やすさは、WebサイトのPVにも関わってくるかと思いますので、もし気になる方がいらしたら、参考にしてみてくださいね。
