WordPressでフォントサイズを簡単に変更する方法

フォントサイズは、サイトのコンテンツを分かりやすく、読みやすく、視覚的に魅力的なものにする上で重要な権限グループです。

ブログ、eコマースストア、ビジネスサイトなど、WordPressでフォントサイズを調整する方法を知っていれば、ブランドに一致するようにデザインをカスタマイズし、ユーザーエクスペリエンスを向上させることができます。

WPBeginnerでは、10年以上にわたってWordPressで記事を書いてきました。この間、私たちは常に読みやすく、読者がアクセスしやすいコンテンツを作ることを優先してきました。これには、読みやすいフォントサイズを選択しながらも、見た目がきれいで魅力的であることも含まれます。

この投稿では、WordPressの投稿やテーマのフォントサイズを簡単に変更する方法を紹介します。

WordPressでフォントサイズを変更する理由

WordPressサイトのフォントサイズを変更することで、コンテンツの読みやすさを向上させ、ユーザーが読み進めやすくすることができます。

さらに、フォントサイズを大きくすることで、WordPressブログの重要な情報を強調することができます。

例えば、サイトでアフィリエイト商品を紹介している場合、フォントサイズを大きくすることで、商品をより目立たせることができます。また、モバイル端末からサイトにアクセスしている閲覧者にとっても、コンテンツをより読みやすくすることができます。

それでは、WordPressでフォントサイズを簡単に変更する方法を見ていきましょう。

このチュートリアルでは、複数の方法について説明しますので、以下のリンクからお好きな方法にジャンプしてください：

方法1：見出しを使用してフォントサイズを変更する方法

見出しを使用してフォントサイズを変更する簡単な方法をお探しなら、この方法がお勧めです。

コンテンツに見出しを使うのは、大きめのフォントでユーザーの注意を引くのに最適な方法です。

ほとんどのWordPressテーマでは、見出しは通常の本文よりも大きなフォントで表示され、投稿やページをセクションに分割することができます。

検索エンジンは適切な見出しを通常の段落テキストよりも重視するため、見出しはサイトのSEO対策にも最適です。

WordPress初期設定ブロックエディターで見出しを追加する方法

まず、WordPressのブロックエディターで新規投稿またはページを開きます。

画面左上の「ブロックを追加」（＋）ボタンをクリックすると、ブロックメニューが表示されます。

ここから、見出しブロックを見つけてページ/投稿に追加する必要があります。

初期設定では、ブロックは見出し2に設定されます。

小見出しを追加するのであれば、「見出し2」オプションに先頭に固定表示するのが理にかなっています。

ただし、これを変更したい場合は、「H2」のドロップダウンメニューをクリックするだけで、別のサイズを選択することができる。

また、画面右のツールバーにあるブロック設定で見出しサイズを変更することもできます。

見出しの色や外観、大文字小文字などもカスタマイズできます。

設定が完了したら、忘れずに「更新」または「公開」ボタンをクリックして、設定を保存してください。

クラシックエディターで見出しを追加する方法

WordPressの古いクラシックエディターを使用している場合は、段落ドロップダウンメニューを使用して見出しを追加することができます。

まず、見出しにしたいテキストをマウスで選択します。

次に、左上にある「段落」ドロップダウンメニューをクリックし、見出しのサイズを選択します。これでフォントサイズを見出しに変更することができました。

ただし、クラシックエディターでは、異なる見出しスタイルのサイズやフォントカラーを変更する権限がありませんので、ご注意ください。

そうしたい場合は、テーマのスタイルシート（style.css）を変更する必要があります。

最後に、「更新」または「公開」ボタンをクリックして変更を保存します。

方法2：ブロックエディターでテキストのフォントサイズを変更する

段落ブロックのテキストの初期フォントサイズを変更したい場合は、この方法をご利用ください。

まず、Gutenbergエディターで既存のページ/投稿を開く必要があります。

パラグラフブロックをクリックし、画面右側のブロックパネルから「スタイル」タブに切り替えます。

ここから、「Typography」セクションからフォントサイズを選択する必要があります。

スモール、ミディアム、ラージ、エクストララージのオプション設定が可能です。

テキストを元のサイズに戻したい場合は、タイポグラフィ設定の横にある三点鎖線のメニューをクリックすることでも可能です。

新しいドロップダウンメニューが表示されますので、「リセット」設定をクリックしてください。

その他、ドロップキャップ、文字組み、スペーシング、外観なども同じドロップダウンメニューで追加できる。

その後、’更新’または’公開’ボタンをクリックして変更を保存します。

これらのオプションは、WordPressの古いクラシックエディターでは利用できないことを覚えておいてください。これらを使いたい場合は、切り替えを検討してください。

方法3：プラグインを使ってフォントサイズを変更する

プラグインを使ってフォントサイズを変更したい場合は、この方法を使うことができる。

まず、Advanced Editor Toolsプラグインをインストールして有効化する必要があります。詳しい手順については、WordPressプラグインのインストール方法についての初心者ガイドをご覧ください。

プラグインを有効化すると、フォントサイズやテキスト書式をよりコントロールできるようになります。また、選択したフォーマット機能をすべて備えた新しい「クラシック・パラグラフ」ブロックが追加されます。

有効化したら、WordPressの管理サイドバーから設定 ” 高度なエディターツールのページに移動します。

そこで、「未使用のボタン」セクションから「クラシック段落」ブロックに書式機能を簡単にドラッグ＆ドロップできる。

これらの機能には、フォントサイズ、フォントファミリー、コピー、下付き文字、顔文字、ソースコードなどが含まれます。

オプション」セクションまでスクロールダウンし、「フォントサイズ」オプションをチェックすると、より多くのフォントサイズにアクセスできます。

その後、「変更を保存」ボタンをクリックするだけで、設定が保存されます。

クラシックエディターでプラグインを使用している場合は、ページ上部から「クラシックエディター」タブに切り替える必要があります。

そこに着いたら、ブロックエディターと同じ操作をする必要がある。

変更後、本当に〜してもよいですか？

さて、プラグインの動作を確認するには、WordPressダッシュボードから新規または既存のページ/投稿を開く必要があります。

画面左上の「ブロックを追加」（＋）ボタンをクリックすると、ブロックメニューが表示されます。

ここからクラシック・パラグラフ・ブロックを見つけてページに追加する。

フォントサイズ」のドロップダウンメニューで、「クラシック段落」ブロックのテキストサイズを変更できるようになりました。

最後に「更新」または「公開」をクリックして、投稿やページの設定を保存します。

方法4：フルサイトエディターを使ってサイト全体のフォントサイズを変更する。

もしあなたがブロックテーマを使っているのであれば、この方法が適している。ほとんどのブロックテーマにはグローバルスタイル機能がビルトインされており、コーディングなしでサイト全体のタイポグラフィサイズをコントロールできる。

そのためには、WordPressダッシュボードから外観 ” エディターページにアクセスし、右上の「スタイル」アイコンをクリックします。新しいパネルが開きますので、そこで「Typography」オプションを選択してください。

サイドバーに新しい設定が表示されたら、「フォント」セクションからサイト全体のフォントタイプを簡単に変更できます。

その後、「要素」セクションまでスクロールダウンし、「テキスト」タブを選択する。

サイト上のすべてのテキストのフォントサイズ、種類、間隔を変更できるようになりました。

それが終わったら、「要素」セクションに戻って、見出し、リンク、キャプション、ボタンのフォントサイズをすべて変更することができます。

それでも満足できない場合は、サイトのフォントサイズのプリセットを完全に変更することができる。

これらのプリセットは、small、medium、largeなど、さまざまなテキストオプションの標準サイズを定義します。例えば、サイト上の任意の場所でフォントサイズとして「小」を選択すると、自動的に0.9レムに設定される場合があります。

ただし、プリセットをカスタマイズして、「small」が代わりに1 remを意味するようにすることもできる。これにより、好みに応じてフォントサイズを柔軟に調整することができます。

そのためには、一番下にある「フォントサイズ・プリセット」オプションをクリックしてください。

新しい画面が開いたら、サイト全体のフォントサイズのプリセットを簡単に編集できます。

最後に「保存」ボタンをクリックして設定を保存します。これで、サイトエディターを使ってサイト全体のフォントサイズを変更することができました。

方法5：WPCodeを使ってサイト全体のフォントサイズを変更する

この方法は、サイト全体のフォントサイズを変更したいが、ブロックテーマを使用していない場合に適しています。

WPCodeを使ってサイトにCSSコードを挿入すれば、簡単にこの機能を追加できます。

WordPressのコードスニペットプラグインの中で最も優れており、サイトにコードを追加するのがとても簡単で安全です。

まず、WPCodeプラグインをインストールし、有効化する必要があります。詳しい手順は、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

注：WPCodeにはチュートリアルに使える無料プランがあります。しかし、プロバージョンにアップグレードすると、条件ロジック、コードスニペットのクラウドライブラリなど、より多くの機能を利用できるようになります。

有効化したら、WordPressの管理サイドバーからCode Snippets ” + Add Snippetのページにアクセスしてください。

カスタムコードを追加する（新規スニペット）」設定の下にある「スニペットを使用する（Use Snippet）」ボタンをクリックします。

カスタムスニペットの作成」ページが表示されるので、まずはコードスニペットにタイトルを付けます。

その後、画面右隅の「コードタイプ」ドロップダウンメニューから「CSSスニペット」オプションを選択します。

次に、以下のカスタムCSSコードを「コードプレビュー」ボックスにコピー＆ペーストします：

p {
font-size:16px;
}

それができたら、CSSコードの「font-size」行の横に希望のテキストサイズを追加するだけです。

このように見えるはずだ。

その後、「インサーター」セクションまでスクロールダウンし、「自動挿入」モードを選択する。

有効化したコードは、あなたのサイトで自動的に実行されます。

最後に、ページの一番上までスクロールして戻り、「Inactive」スイッチを「Active」に切り替える。

その後、「Save Snippet」ボタンをクリックしてコードを実行する。

これでWordPressサイトのフォントサイズの変更は完了です。

ボーナス：WordPressで文字色を変更する

サイズだけでなく、サイトの文字色を変えることで、コンテンツをより読みやすく、視覚的にアピールすることができます。また、ブランディングを強化し、重要な情報を強調することもできます。

テキストカラーを変更するには、ブロックエディターでブログ投稿を開き、段落ブロックを選択する必要があります。そうしたら、ブロックパネルから「スタイル」タブに切り替え、「テキスト」オプションをクリックします。

これでカラーピッカーツールが開き、コンテンツのテキストカラーを選択することができます。

サイト全体のテキストの色を変更したい場合は、市場で最高のWordPressコードスニペットプラグインであるWPCodeを使用することができます。

有効化したら、WordPressの管理サイドバーからCode Snippets ” + Add Snippetページにアクセスし、’Add Your Custom Code’オプションの下にある’Use Snippet’をクリックするだけです。

そこでコードタイプとして「CSSスニペット」を選択し、「コードプレビュー」ボックスに以下のコードをコピー＆ペーストしてください：

p { color:#990000; }

サイトの見出しに別の色を使いたい場合は、h1、h2、h3、または同様のセレクタを使用する必要があります。

最後に「Save Snippet」ボタンをクリックし、「Inactive」スイッチを「Active」に切り替える。

これで、サイト全体の文字色を変更することができました。詳しい手順については、WordPressで文字色を変更する方法のチュートリアルをご覧ください。

動画チュートリアル

文章での説明が苦手な方は、代わりに動画をご覧ください：

WordPressでフォントサイズを簡単に変更する方法について、この投稿がお役に立てば幸いです。WordPressでカスタマイザーを使用する方法や、WordPressサイトでGoogleフォントを無効化する方法についてのチュートリアルもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.