SWELL文字サイズ変更＆フォント拡大設定まとめ｜ブログが読みやすくなる7つの工夫

SWELLで作ったブログの文字が「なんだか小さいな」「ちょっと読みづらいな」と感じていませんか。

この記事では、SWELLの文字サイズを変更する具体的なやり方と、フォントサイズを自然に拡大するための考え方を、できるだけ手順ベースでまとめていきます。

SWELLで文字サイズを変更するときの基本パターン

どこで文字サイズを変えたいか整理しよう

いきなり細かい設定画面に入る前に、「どの場面の文字を変えたいのか」をざっくり決めておくのがおすすめです。よくあるケースを表にまとめると、こんな感じです。

目的	おすすめの方法	難易度の目安
サイト全体の本文を少しだけ大きくしたい	カスタマイザーで基本のフォントサイズを調整	かんたん
記事の一部だけ文字を大きくしたい	ブロックエディタのタイポグラフィ設定やSWELLのフォントサイズ機能	かんたん
PCとスマホで文字サイズを分けて調整したい	カスタマイザーのデバイス別設定やCSS	ふつう
もっと大きく、細かくフォントサイズをコントロールしたい	追加CSSでfont-sizeを指定	少しむずかしい

ざっくりまとめると、

• 全体の雰囲気を変えたいときはカスタマイザー
• 特定の段落や一部の文字だけ変えたいときはブロックエディタやSWELLの機能
• それでも足りないと感じたらCSSで調整

という順番で考えると、あまり難しく考えずに進められます。

私も最初は「どうせ後でCSSで全部いじるから」と思っていたのですが、実際はカスタマイザーとブロックの設定だけで十分なことがほとんどでした。まずは、テーマ側が用意してくれている機能を素直に使い切るイメージで触っていきましょう。

カスタマイザーでSWELLの文字サイズを変更する方法

本文フォントサイズを一括で変更する手順

まずは、本文の基本となる文字サイズを一括で変える流れを整理しておきます。実際のメニュー名は環境によって多少違う場合もありますが、大まかな進み方は次のようなイメージです。

手順	操作内容	ポイント
1	WordPress管理画面の「外観」を開く	SWELLを有効化している状態で行います
2	「カスタマイズ」をクリック	ここでサイト全体の見た目を調整します
3	「サイト全体」や「基本デザイン」に相当する項目を開く	テーマ設定の中でも、文字に関する項目が集まっています
4	本文用のフォントサイズの項目を調整する	スライダーや数値入力で文字サイズを変えられます
5	プレビューを確認しながら、違和感がないサイズに調整する	本文だけでなく、見出しとのバランスもチェックしましょう

ここで変えた文字サイズは、特別な指定をしていない本文部分に広く効いてきます。いわゆる「標準の文字サイズ」を動かすイメージですね。

感覚的には、PC表示だと16〜18pxくらいを目安にしておくと、極端に読みづらくなることは少ないです。いきなり大きくしすぎず、1〜2pxずつ動かしてみて、「画面に出てくる文字数」と「読みやすさ」のバランスを見ながら決めていくと失敗しにくいと感じています。

カスタマイザーでPCとスマホの文字サイズを分ける

SWELLは、PCとスマホでフォントサイズを分けて調整できるようになっています。同じサイズにしていても、画面の大きさが違うだけで印象がガラッと変わるので、ここはぜひ活用したいところです。

よくあるパターンとしては、

• PCではちょうどよくても、スマホだと少し大きく感じてしまう
• アクセスの多くがスマホなので、スマホで読みやすいサイズを優先したい

といったケースです。

カスタマイザーの中に、PC用とスマホ用で分かれている文字サイズの項目があれば、そこでそれぞれ調整できます。もし分かれていない場合でも、プレビュー画面をPC・スマホ表示で切り替えながら、「どちらでもストレスなく読めるか」を確認しておくと安心です。

私のやり方としては、まずPC側で「ちょうどよさそう」なサイズを決めてから、スマホ表示に切り替え、スマホだけ少し控えめなサイズにしておく、という流れが多いです。

ブロックごとにSWELLのフォントサイズを拡大する方法

段落ブロックのタイポグラフィ設定で変える

まずは、Gutenberg（ブロックエディタ）の標準機能である「タイポグラフィ」を使った調整方法です。フォントサイズを変えたい段落ブロックを選び、右側の設定パネルからサイズを変更できます。

基本的な流れは次のとおりです。

• 変更したい段落ブロックをクリックする
• 右サイドバーの「タイポグラフィ」や「文字」に関する項目を開く
• 「S / M / L / XL / XXL」などのプリセットを選ぶ、もしくは数値入力する
• プレビューで見ながら、周りの文章とのバランスを確認する

ここではブロック単位で文字サイズを変えられるので、

• 「まとめ」だけ少し大きめにしたい
• 注意書きの段落を目立たせたい

といったときに使いやすいです。

個人的には、「見出しほど強くはしたくないけど、普通の本文よりは目立たせたい」という場面でよく使っています。フォントサイズの拡大をCSSに任せきりにするのではなく、このタイポグラフィの設定も併せて使うと、細かい表情をつけやすいです。

SWELL独自のフォントサイズ機能の使い分け

SWELLには、テキストを選択したときに使える独自のフォントサイズ機能も用意されています。文章の一部だけを極端に小さくしたり大きくしたりしたいときに、かなり便利な機能です。

ここで一度、よく使う3つの方法の違いを整理してみます。

方法	変更できる範囲	向いている用途	難易度
タイポグラフィ	ブロック全体	段落ごとにフォントサイズを変えたいとき	かんたん
SWELLのフォントサイズ機能	選択した文字だけ	文中の一部分だけ極小・特大にしたいとき	かんたん
CSS	タグやクラス単位でサイト全体	見出しやメニューなど、同じ種類の文字をまとめて調整したいとき	少しむずかしい

例えば、私がよくやる組み合わせはこんな感じです。

フォントサイズを変更する方法が複数あるとややこしく感じますが、「どのくらいの範囲に効かせたいか」で使い分けると、頭の中も整理しやすくなります。

PC・スマホ別にSWELLのフォントサイズを変更するコツ

カスタマイザーでPC・スマホの文字サイズを分けるときの目安

PCとスマホを同じ文字サイズにしてしまうと、どちらか片方だけ「読みにくいな」と感じやすくなります。あくまで目安ですが、私は次のようなバランスを意識して調整しています。

表示デバイス	本文フォントサイズの目安	コメント
PC	16〜18px程度	画面との距離があるので、少し大きめでも読みやすい
タブレット	16〜18px程度	PCとほぼ同じ設定でも問題ないことが多い
スマホ	15〜17px程度	画面が小さいぶん、少し抑えめにするイメージ

もちろん、フォントの種類や行間、文章量などによっても最適な値は変わります。あくまでも「おおよそのスタート地点」として参考にしてもらえればと思います。

実際に調整するときは、

• PC表示で、1行あたりの文字数と改行の具合を確認する
• スマホ表示に切り替え、1画面あたりの行数やスクロールのしやすさを見る
• 見出しだけ極端に大きくなっていないか、本文とのメリハリがついているかをチェックする

といったポイントを見てあげると、極端な失敗は起きにくいです。自分の目だけだと慣れてしまうので、家族や友人に実機で見てもらうと、新しい発見があることも多いです。

CSSでレスポンシブにフォントサイズを変更する考え方

もう一歩踏み込んで、CSSでデバイスごとに文字サイズを変えたい場合は、「画面幅によってスタイルを切り替える」という考え方を押さえておくと理解しやすいです。

具体的な書き方はここでは細かく触れませんが、イメージとしては、

という流れです。

CSSに慣れていないときは、すべてをコードで調整しようとすると難しく感じます。まずはカスタマイザーだけでできるところまで調整してみて、「ここだけはどうしても足りない」という部分が見えてきたら、そのピンポイントをCSSで補うイメージで進めるのが現実的だと思います。

CSSでSWELLの文字サイズを大きく拡大する方法

本文の文字サイズをCSSで上書きするときの考え方

カスタマイザーでは一定の範囲でしか文字サイズを変えられないこともあり、もっと大きくしたい・細かく調整したいと感じる場面もあると思います。その場合に検討したいのが、CSSでの上書きです。

よくあるケースとしては、

• 本文の文字サイズをもう少しだけ大きくしたい
• フォントサイズを変えると同時に、行間（line-height）も調整したい

といった場面です。

考え方としては、

といった流れになります。

CSSは、親テーマのファイルを直接いじるよりも、追加CSSや子テーマ側にまとめて書いておいたほうが、テーマのアップデート時にも安心です。どこに何を書いたかメモを残しておくと、あとから見直すときにも迷いません。

パーツ別にフォントサイズを変えるときに使う場所の例

「本文だけでなく、タイトルやメニュー、メインビジュアルの文字も少し大きくしたい」という場合は、パーツごとにCSSでフォントサイズを調整していきます。よく触ることが多い場所をまとめると、だいたい次のようになります。

パーツ	よく調整する場所の例	目的
記事タイトル	投稿ページのタイトル部分	記事の顔となる文字を一回り大きくして目立たせる
見出し	h2・h3などの見出しタグ	本文とのメリハリをつけて、読み進めやすくする
ヘッダーメニュー	グローバルナビのテキスト	メニュー項目を少しだけ大きくしてタップしやすくする
メインビジュアル	トップのキャッチコピーやサブコピー	ブログの雰囲気を決める文字を印象的に見せる

具体的なクラス名は、ブラウザの検証ツールなどで確認しながら進める必要がありますが、いきなりあちこち触るのではなく、まずは「ここだけ」という場所に絞って調整していくのがおすすめです。

私も、ヘッダーメニューの文字を大きくしたときに、スマホ表示でメニューが折り返されてしまい、レイアウトを崩したことがあります。最初は、1パーツずつ、少しずつフォントサイズを拡大していくと、そういったトラブルも減らせます。

読みやすさを保つSWELL文字サイズ変更のポイント

文字サイズと行間・余白のバランスを意識する

フォントサイズを変更するときによくあるのが、文字だけ大きくして、行間や余白がそのままになってしまうパターンです。そうすると、

• 文字がギュッと詰まって見えて、息苦しい印象になる
• 見出しと本文の違いが分かりづらくなり、文章の区切りがぼやける

といった状態になりやすいです。

フォントサイズを変えるときは、

• 本文の文字を大きくしたら、line-heightも少し広げてあげる
• 見出しの上下の余白を適度にとり、「ここから新しいブロックが始まる」と分かるようにする
• スマホでは、文字サイズだけでなく行間や段落の余白も意識して、詰まりすぎないようにする

といったことを意識してあげると、ぐっと読みやすくなります。

私の感覚では、

• 本文は「やや大きめ、行間も少し広め」
• 見出しは「本文より大きく、上下の余白をしっかりとる」

くらいの雰囲気にしておくと、ニュースサイトよりも少しゆったりした、ブログらしい読みやすさに落ち着きやすいと感じています。

ブログのタイプ別におすすめのフォントサイズを考える

最後に、ブログのタイプごとにフォントサイズの目安を簡単に整理しておきます。あくまで私の経験ベースですが、「どのくらい文字サイズを拡大するか」を考えるときの参考になると思います。

ブログのタイプ	本文フォントサイズの目安	見出しフォントサイズの目安	コメント
雑記ブログ	16〜18px程度	本文の約1.4〜1.6倍	記事のテーマがバラバラになりやすい分、読みやすさ重視にしやすい
解説・ハウツー系ブログ	17〜18px程度	本文の約1.3〜1.5倍	スマホで読む人が多い前提で、ほんの少し大きめに設定
文字数少なめのシンプルなブログ	18〜20px程度	本文の約1.2〜1.4倍	情報量が少ない分、フォントサイズを拡大してゆったり見せるのもあり

大事なのは、「誰に読んでもらいたいブログなのか」「どのデバイスからのアクセスが多いのか」を意識することだと思っています。SWELLで文字サイズを変更するときも、こういった視点を少しだけ頭の片隅に置いておくと、選ぶ数字が変わってきます。

よくある質問（SWELLの文字サイズ変更・フォントサイズ拡大）

Q1. すでに公開した記事の文字サイズを一括で変更できますか？

A. 完全に「全部まったく同じ状態」に揃えることは難しいですが、多くの部分はまとめて変更できます。

具体的には、

• カスタマイザーで基本のフォントサイズを調整する
• CSSでpタグや見出しタグにfont-sizeを指定して、ベースとなるサイズを上書きする

といった方法を組み合わせることで、特別な装飾をしていない本文や見出しの多くは、一気に雰囲気を変えられます。

ただし、

• ブロック単位でタイポグラフィをいじっている部分
• SWELLのフォントサイズ機能で個別に調整した部分

などは、そちらの指定が優先される場合があります。大きく設定を変えたときは、特にアクセスが多い記事だけでもざっと読み返して、崩れがないか確認しておくと安心です。

Q2. フォントサイズを拡大しすぎると、SEOに悪影響はありますか？

A. 「フォントサイズを大きくしたからSEOでマイナス」という話ではありませんが、読みづらいレイアウトになってしまうと、結果的に評価に響く可能性はあります。

例えば、

• 文字が大きすぎて、1画面あたりのテキスト量が極端に少ない
• 見出しと本文の差が小さく、ページの構造が分かりにくい

といった状態だと、読み手が途中で疲れてしまうこともあります。

SWELLで文字サイズを変更するときは、

• フォントサイズを拡大しても、全体として読みやすいバランスになっているか
• スマホで実際にスクロールしたときに、ストレスなく読み進められるか

といった視点で確認しておけば、必要以上に心配する必要はないかな、というのが私の実感です。

Q3. CSSが苦手なのですが、カスタマイザーとブロックだけで足りますか？

A. 一般的なブログ運営であれば、カスタマイザーとブロック、そしてSWELLのフォントサイズ機能だけで足りる場面が多いです。

整理すると、

• 全体の基本的な文字サイズ → カスタマイザー
• 段落ごとの強弱や大きさ → ブロックエディタのタイポグラフィ
• 文中の一部分だけ強く見せたい → SWELLのフォントサイズ機能

という使い分けだけでも、かなり細かくコントロールできます。

CSSは、どうしても「ここだけは設定画面からいじりづらい」という部分が出てきたときに、ピンポイントで覚えていくくらいのスタンスでも十分だと思います。いきなりすべてをコードでやろうとしなくて大丈夫です。

まとめ：自分のサイトに合ったSWELL文字サイズに変更しよう

この記事のポイントを振り返っておきます

今日できる最初の一歩としては、カスタマイザーで本文のフォントサイズを1〜2pxだけ動かしてみて、PCとスマホの両方でどう見えるかチェックしてみるのがおすすめです。

そのうえで、「ここはもう少し大きくしたい」「ここはこのままで良さそう」といった感覚がつかめてきたら、ブロックごとの調整やSWELLのフォントサイズ機能を少しずつ使ってみてください。

SWELLの文字サイズ変更やフォントサイズ拡大は、一度バランスが決まってしまえば、あとはそれに合わせて記事を書くだけなので、だんだん悩まなくなってきます。この記事が、自分のブログにとってちょうど良い文字サイズを見つけるきっかけになればうれしいです。