Question
デザイン見出しの文字サイズを変更した際のスマホ表示に関して
- s show sakamoto
-
デザイン見出しの文字サイズを以下のマニュアルに沿って変更した際、PC上の表示では反映されるのですが、スマホだと文字サイズが変更されていないように思われます。
問題となるページ : https://resigrit.co.jp/shogakko-juken_spot/shougakkoujuken_interview_taboo/
＜マニュアル＞
https://jinr.jp/manual/design-title/
スマホのデザイン見出しの文字サイズを変更する方法がございましたら、ご教授いただけますと幸いです、- WP 6.6
- PHP 8.2.x
- JIN:R 1.3.5
- Xserver
- GoogleChrome
こんにちは！
2024/08/21 18:16詳細ありがとうございます！
こちらで検証した感じですと、スマホ側でも変更されますね、、、
キャッシュ削除をして変化がなければ、実際のサイトのURLをご共有いただけますか？？
また、現在選んでいる文字サイズもご共有いただけますと幸いです。
よろしくお願いいたします！
お世話になっております。
2024/08/21 19:13キャッシュを削除したのですが、改善されませんでした。
質問を修正してURLを添付いたしました。
記事の一番上のデザイン見出し（h2）になります。
文字サイズは「18px」に設定しています。
PC上では反映されているのですが、スマホ上だと変わりません。
上のキャプチャが「18px」に設定しているスマホ上の表示です。
下のキャプチャ はデフォルト設定のままです。
ですが、どちらも文字の大きさが変わりません。
よろしくお願いします。
URLなどありがとうございます！
2024/08/23 10:37スマホはデフォルトで18pxなので、今回のように18pxの設定をしても変化は無いと思います...！
（※実際にはユーザーさんそれぞれの端末設定が影響する場合もありますので、デフォルト表示が18pxではない場合もあり）
21pxの設定にしていただくと変化がわかるかもしれませんね、、
ご確認よろしくお願いいたします！
ご教示いただきありがとうございます。
2024/08/23 14:01スマホの文字サイズだけを変更する機能などはございますか。
設定にもよるかもしれませんが、追加CSSで以下のコードを書くとどうでしょうか...？
2024/08/25 14:51@media (max-width: 551px) {
#mainContent .b--jinr-h2rich .a--h2rich-maincopy {
font-size: 16px!important;
}
}
16の数字が文字の大きさです！
よろしくお願いいたします！
ありがとうございます。
2024/08/26 13:35文字サイズを変更できました。
追加で質問があります。
2024/08/26 18:08いただいたコードだと、
デザイン見出しのh2だけでなく、デザイン見出しh3の大きさも変化されてしまいます。
デザイン見出しのh2だけ変えるにはどうしたらよろしいでしょうか。
こちらのコードでいかがでしょうか...？
2024/08/29 14:35@media (max-width: 551px) {
#mainContent .b--jinr-h2rich h2.a--h2rich-maincopy {
font-size: 16px!important;
}
}
ご確認お願いいたします！
ありがとうございます。
2024/08/29 17:51同様にスマホのデザイン見出しのh3だけ変える方法に関してもご教示いただけますと幸いです。
お手数をおかけしますが、よろしくお願い申し上げます。
@media (max-width: 551px) {
2024/08/31 14:24#mainContent .b--jinr-h2rich h3.a--h2rich-maincopy {
font-size: 16px!important;
}
}
で対応できると思います！