Amazon欲しいものリスト 連携してみた

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

thesonic-line

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

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

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

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

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

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

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

thesonic-line

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

モバイルだけ文字を小さく表示する追加CSS

@media (max-width: 767px) {
.entry-content {
font-size: 16px;
}
}

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

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

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

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

THE SONICでの追加CSSの設定方法
  1. STEP

    ダッシュボードメニューの外観からカスタマイズを選択する

    thesonic-googleanalytics2
  2. STEP

    表示されるメニューの一番下の追加CSSを選択し、内部に追加CSSコードを入力します。

    thesonic-css1
ノビ

ノビ

昼は会社員
夜はサイト運営&投資活動

夜の活動収益でほぼ暮らしてます(汗)

WordPressテーマ「THE SONIC」
発売前βテストに参加!

最高のWordPressテーマです
本サイトでも稼働中!

FOLLOW

カテゴリー:
関連記事