外部テーマQooQを使ったブログをスマホで見ると、全ての文字が太字になってしまっている……という困った現象が起こっていませんか？
パソコンのブラウザからスマホ表示を確認しても太字になっていないのに、直接スマホで見ると太字になっていることがあるんです。
確認方法はコチラ ➡ パソコンのブラウザでスマホ表示を確認する方法
これはテーマとスマホブラウザの相性の問題のようで、おそらく太字になっていないスマホもあります。
でもスマホによっては全部太字に見えてしまっているとしたら、やっぱり嫌ですよね？
本記事ではCSSの追加でこの問題を解消する方法を解説します！
（別ブログの例）
CSSの追加方法
左のメインメニューから【テーマ】を選択し【カスタマイズ】をクリックします。
そこから【詳細設定】の【CSSを追加】を選択します。
【カスタムCSSを追加】にCSSを入力できます。
後述のCSSを入力したら保存をして、反映されているか実際にブログを確認しましょう。
QooQ太字解消のCSS
太字を解消するには以下のCSSを追加します。
/*スマホ表示の太字解消 */
@media screen and (max-width: 480px) {
body, article, section, div, p {
font-weight: 400;
}
}
これで、太字が解消されます。
見出しや太字に指定しているところには影響ありません。
以下のブログを参考にさせて頂きました。
参考ブログ様
【はてなブログ】スマホで見ると全部太字になる！？直し方🌻Minimalismのバグ現象？文字の太さのカスタマイズ
スマホ表示がスッキリ！
他のブログでは長らくQooQを使っていて、実はずっと気になっていた問題だったんです。
これでパソコンから確認した表示通りになり、見た目がスッキリしました。
もし自分のスマホでは太字になっていなくても、他のスマホで見ると太字で表示されている可能性があります。
QooQを使う際は、本記事のCSSの追加は行っておいた方が良いのではないでしょうか。
