WordPressで文字の大きさを変える方法｜追加CSSとブロック設定の違い

WordPressで文章や見出しの文字を大きくしたいとき、方法はいくつかあります。

ブロック設定で文字サイズを変える方法もあれば、テーマ設定で全体の文字サイズを調整する方法、追加CSSで細かく指定する方法もあります。

ただ、WordPressに慣れていないと、「どこで変えればいいの？」「本文だけ大きくしたい」「スマホだけ文字サイズを変えたい」「追加CSSとブロック設定は何が違うの？」と迷いやすいです。

ウェルカ編集長

文字サイズは、ちょっと変えるだけでサイトの印象が大きく変わります。ただし、大きくしすぎるとスマホで読みにくくなることもあります。

この記事では、WordPressで文字の大きさを変える方法を、ブロック設定・テーマ設定・追加CSSの違いに分けて、初心者向けに解説します。

WordPressで文字の大きさを変える方法は主に3つ

WordPressで文字の大きさを変える方法は、主に次の3つです。

一番手軽なのは、ブロック設定で文字サイズを変える方法です。

特定の段落や見出しだけ変えたい場合は、ブロック設定で十分なことがあります。

一方で、サイト全体の本文サイズや見出しサイズを統一したい場合は、テーマ設定や追加CSSを使う方が向いています。

ウェルカ編集長

「1か所だけ変えたい」のか、「サイト全体で統一したい」のかで、選ぶ方法が変わります。ここを分けると失敗しにくいです。

方法1：ブロック設定で文字の大きさを変える

WordPressのブロックエディターでは、段落や見出しなどのブロックごとに文字サイズを変更できる場合があります。

WordPress公式のタイポグラフィ設定では、文字サイズをプリセットから選んだり、カスタム値を指定したりできると説明されています。

公式：WordPress Documentation：Typography Settings overview

ブロック設定で変更する場合は、CSSを書かなくても管理画面から調整できるため、初心者でも使いやすい方法です。

ウェルカ編集長

まず試すなら、ブロック設定です。CSSを書かずに済むので、1か所だけ直したいときにはかなり便利です。

ブロック設定は、特定のブロックだけを調整したいときに向いています。

ただし、記事ごと・ブロックごとにバラバラに文字サイズを変えると、サイト全体の統一感が崩れやすくなります。

文章をクリックして、直接大きさを変えられるテーマもあります。

方法2：テーマ設定で文字の大きさを変える

サイト全体の本文サイズや見出しサイズを変えたい場合は、テーマ設定を確認します。

テーマによっては、管理画面から本文、見出し、ボタン、メニューなどの文字サイズを変更できる場合があります。

JIN:R、Cocoon、Lightningなどのテーマでは、テーマ独自のカスタマイズ項目が用意されていることがあります。

ウェルカ編集長

サイト全体の文字サイズを変えたいなら、いきなり追加CSSを書く前にテーマ設定を見ましょう。テーマ側で用意されている設定の方が安全なことがあります。

テーマ設定で変更した場合、サイト全体に統一して反映されることが多いため、デザインの一貫性を保ちやすくなります。

ただし、テーマによって設定項目の場所や名称が違うため、使用中テーマのマニュアルも確認しましょう。

方法3：追加CSSで文字の大きさを変える

ブロック設定やテーマ設定で変更できない部分は、追加CSSを使って文字サイズを指定する方法があります。

WordPress公式では、追加CSSを使えば、テーマファイルや子テーマを直接編集せずにCSSを追加できると説明されています。

公式：WordPress Advanced Administration Handbook：CSS

たとえば、本文全体の文字サイズを調整したい場合は、次のようなCSSを書きます。

.entry-content p {
  font-size: 16px;
}

この例では、記事本文内の段落の文字サイズを16pxに指定しています。

見出しだけを変えたい場合は、見出しに対応するセレクタを指定します。

.entry-content h2 {
  font-size: 28px;
}

ウェルカ編集長

追加CSSは細かく調整できる反面、指定を間違えると別の場所まで変わることがあります。範囲を絞って書くのが大事です。

ブロックにクラスを付けて、その部分だけ文字サイズを変える方法

特定のブロックだけ文字サイズを変えたい場合は、ブロックに追加CSSクラスを付ける方法もあります。

たとえば、ある段落だけ少し大きくしたい、注意書きだけ小さくしたい、CTA周りの文字だけ目立たせたい、といった場合に便利です。

WordPressのブロックエディターでは、ブロック設定の「高度な設定」などから追加CSSクラスを設定できる場合があります。

ウェルカ編集長

サイト全体ではなく「このブロックだけ文字サイズを変えたい」ときは、ブロックにクラスを付ける方法がかなり使いやすいです。

たとえば、ブロックの追加CSSクラスに次のように入力します。

large-lead-text

そのうえで、追加CSSに次のように書きます。

.large-lead-text {
  font-size: 20px;
  line-height: 1.8;
}

これで、large-lead-text というクラスを付けたブロックだけに文字サイズの指定が効きます。

スマホだけ文字サイズを変える方法

PCではちょうどよく見えていても、スマホでは文字が大きすぎる、または小さすぎることがあります。

スマホだけ文字サイズを変えたい場合は、追加CSSでメディアクエリを使います。

たとえば、スマホだけ本文の文字サイズを少し小さくする場合は、次のように書きます。

@media screen and (max-width: 767px) {
  .entry-content p {
    font-size: 15px;
  }
}

この例では、画面幅が767px以下のときだけ、記事本文の段落サイズを15pxにしています。

ウェルカ編集長

スマホ表示はかなり大事です。PCだけを見て文字サイズを決めると、スマホで読みにくくなることがあります。

文字サイズが反映されない原因と解決策

文字サイズを変更したのに反映されない場合、いくつかの原因が考えられます。

CSSの書き方だけでなく、テーマ設定、キャッシュ、優先順位、ブロック設定の上書きなども確認しましょう。

ウェルカ編集長

「CSSを書いたのに効かない」ときは、原因を一つずつ見ます。いきなり!importantを付ける前に、まず基本の確認です。

事業用サイトで文字サイズを変えるときの注意点

事業用サイトでは、文字サイズは見た目だけでなく、読みやすさや問い合わせ率にも関わります。

「おしゃれに見えるから小さくする」「目立たせたいから全部大きくする」といった調整は、読みにくさにつながることがあります。

ウェルカ編集長

文字サイズはデザインの話に見えますが、実際には「読まれるかどうか」に直結します。特にスマホではかなり重要です。

文字サイズは、ページ単体で見るだけでなく、サイト全体の統一感も大切です。

特に、トップページ、サービスページ、料金ページ、お問い合わせページでは、文字サイズのばらつきが信頼感に影響することもあります。

よくある質問

まとめ：文字サイズは目的に合わせて変更方法を選ぼう

WordPressで文字の大きさを変える方法は、ブロック設定、テーマ設定、追加CSSの3つが基本です。

1か所だけ変えるならブロック設定、サイト全体を整えるならテーマ設定、細かく調整するなら追加CSSが向いています。

ウェルカ編集長

文字サイズは「大きければよい」ではなく、「読みやすく、統一感があるか」が大切です。特にスマホ表示は必ず確認しましょう。

文字サイズの調整は、サイトの印象や読みやすさに大きく関わります。

変更するときは、PCだけでなくスマホ表示も確認し、サイト全体のバランスを見ながら慎重に進めましょう。

WELUCA

ウェルカ

大阪府でホームページ制作をしています。WordPress・SEO・Webマーケティングのコンテンツを発信中！