ワードプレスブログのモバイル（スマホ）だけ文字を小さくする表示する方法【THE SONICで実践してみてみた】

ワードプレスでブログ・サイトを作る際に、モバイル（スマホ）の文字だけを小さく表示したいと思ったことはありませんか？

デスクトップは文字数が多く表示できるので良いですが、モバイル（スマホ）は画面が小さいため、文字が大きいと表示できる文字数が少なくなってしまいます。

表示できる文字数が少ないと、ユーザーにスクロール操作を多数させることになってしまい、離脱される原因になりかねません。

WordPressブログでは、追加CSSを設定することで、モバイル（スマホ）表示だけ文字を小さくすることが可能です。

そのやり方をご紹介します。

本サイトで使用中のWordPressテーマ「THE SONIC」でのやり方をご紹介しますが、他のテーマでも同様に出来るハズです。

ワードプレスブログのモバイル（スマホ）だけ文字を小さくする表示する方法

ワードプレスブログでモバイル（スマホ）表示の時だけ文字フォントを小さくするためには、追加CSSで以下のコードを設定すればOKです。

「767px」より小さい幅のモバイル端末での表示の際に「16px」の文字の大きさで表示する、という意味です。

お好みに応じて、表示するフォントサイズ（「16px」の部分）や指定するモバイル端末の大きさ（「767px」の部分）を設定してください。

ワードプレステーマ「THE SONIC」の追加CSS設定方法

本サイトで使用中のワードプレステーマ「THE SONIC」での追加CSSの設定方法をご紹介します。