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

フォントサイズは、ウェブサイトのコンテンツを明確で読みやすく、視覚的に魅力的にするために重要な役割を果たします。

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

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

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

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

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

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

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

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

このチュートリアルでは複数の方法について説明しますので、以下のリンクを使用して希望する方法にジャンプできます。

• 方法1：見出しを使用してフォントサイズを変更する方法
• 方法2：ブロックエディターでテキストのフォントサイズを変更する
• 方法3：プラグインを使用してフォントサイズを変更する
• 方法4：フルサイトエディターを使用してサイト全体のフォントサイズを変更する
• 方法5：WPCodeを使用してサイト全体のフォントサイズを変更する
• ボーナス：WordPressで文字色を変更する
• 動画チュートリアル

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

見出しを使用してフォントサイズを簡単に変更したい場合は、この方法が最適です。

コンテンツで見出しを使用することは、より大きなフォントサイズでユーザーの注意を引くための優れた方法です。

ほとんどのWordPressテーマでは、見出しは通常の本文テキストよりも大きなフォントになっており、投稿やページをセクションに分割できます。

見出しは、検索エンジンが通常の段落テキストよりも適切な見出しを重視するため、ウェブサイトのSEOを改善するのにも役立ちます。

WordPressのデフォルトブロックエディターで見出しを追加する方法

まず、WordPressのブロックエディターで新しい投稿またはページを開く必要があります。WordPressブロックエディター。

そこに着いたら、画面左上の「ブロックを追加」（+）ボタンをクリックして、ブロックメニューを開きます。

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

デフォルトでは、ブロックは「見出し 2」に設定されます。

サブヘッディングを追加する場合は、「見出し 2」オプションを選択するのが理にかなっています。

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

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

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

完了したら、「更新」または「公開」ボタンをクリックして設定を保存することを忘れないでください。

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

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

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

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

ただし、クラシックエディターでは、さまざまな見出しスタイルのサイズやフォントの色を変更できないことに注意してください。

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

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

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

段落ブロックのテキストのデフォルトフォントサイズを変更したい場合は、この方法が最適です。

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

そこに着いたら、いずれかの段落ブロックをクリックし、画面右側のブロックパネルから「スタイル」タブに切り替えます。

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

必要に応じて、小、中、大、特大のオプションを選択できます。

テキストを元のサイズに戻したい場合は、タイポグラフィ設定の隣にある3つの点のメニューをクリックして行うこともできます。

これにより新しいドロップダウンメニューが開き、「リセット」オプションをクリックする必要があります。

それ以外にも、同じドロップダウンメニューを使用して、ドロップキャップ、文字の大文字/小文字、スペーシング、外観などを追加できます。

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

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

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

プラグインを使用してフォントサイズを変更したい場合は、この方法を使用できます。

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

有効化すると、プラグインはフォントサイズやテキストの書式設定、その他のさまざまな機能に対するより多くの制御を提供します。選択した書式設定機能をすべて備えた新しい「クラシック段落」ブロックが追加されます。

アクティベートしたら、WordPress管理サイドバーから設定 » 高度なエディターツールページに移動してください。

そこに着いたら、「未使用ボタン」セクションから「クラシック段落」ブロックにフォーマット機能を簡単にドラッグアンドドロップできます。

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

それが完了したら、「オプション」セクションまでスクロールし、「フォントサイズ」オプションをチェックして、より多くのフォントサイズにアクセスします。

その後、「変更を保存」ボタンをクリックして設定を保存してください。

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

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

変更を加えたら、「変更を保存」ボタンをクリックすることを忘れないでください。

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

そこに着いたら、画面左上の「ブロックを追加」（+）ボタンをクリックして、ブロックメニューを開きます。

ここから、クラシック段落ブロックを見つけてページに追加します。

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

最後に、「更新」または「公開」をクリックして、投稿またはページの Сеттинг を保存します。

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

ブロックテーマを使用している場合は、この方法が適しています。ほとんどのブロックテーマには、コーディングなしでウェブサイト全体のタイポグラフィサイズを制御できるグローバルスタイル機能が組み込まれています。

WordPressダッシュボードの外観 » エディターページにアクセスし、右上隅にある「スタイル」アイコンをクリックします。新しいパネルが開くので、「タイポグラフィ」オプションを選択します。

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

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

これで、ウェブサイト全体のすべてのテキストのフォントサイズ、種類、スペーシングを変更できるようになりました。

完了したら、「Elements」セクションに戻って、すべての見出し、リンク、キャプション、ボタンのフォントサイズを変更できます。

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

これらのプリセットは、小、中、大などのさまざまなテキストオプションの標準サイズを定義します。たとえば、ウェブサイトのどこかでフォントサイズとして「小」を選択すると、自動的に0.9 remに設定される場合があります。

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

これを行うには、下部にある「フォントサイズプリセット」オプションをクリックするだけです。

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

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

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

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

この機能は、CSSコードを挿入して、WPCodeを使用してウェブサイトに追加することで簡単に追加できます。

これは市場で最高のWordPressコードスニペットプラグインであり、ウェブサイトにコードを追加するのが非常に簡単で安全です。

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

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

有効化したら、WordPress管理画面のサイドバーから Code Snippets » + Add Snippet ページに移動してください。

そこに着いたら、「カスタムコードを追加（新規スニペット）」オプションの下にある「+カスタムスニペットを追加」ボタンをクリックします。

次に、画面に表示されるオプションのリストから、コードの種類として「CSSスニペット」を選択する必要があります。

これにより、「カスタムスニペットの作成」ページに移動します。ここで、コードスニペットにタイトルを付けることから始めることができます。

例えば、「サイト全体のフォントサイズを変更する」というタイトルを使用しました。

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

p {
font-size:16px;
}

それが完了したら、「font-size」の行の隣に目的のテキストサイズを追加するだけです。

このようになります。

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

コードはアクティベートされると、サイト上で自動的に実行されます。

最後に、ページの上部までスクロールし、「非アクティブ」スイッチを「アクティブ」に切り替えます。

その後、「スニペットを保存」ボタンをクリックしてコードを実行します。

これで、WordPressサイトのフォントサイズを正常に変更できました。

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

サイズ以外にも、コンテンツをより読みやすく視覚的に魅力的にするために、ウェブサイトのテキストの色を変更することも検討できます。また、ブランディングを強化し、重要な情報を強調するのに役立ちます。

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

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

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

有効化したら、WordPress管理画面のサイドバーから コードスニペット » スニペットを追加 ページにアクセスし、「カスタムコードを追加」オプションの下にある「スニペットを使用」をクリックするだけです。

これにより、「カスタムスニペットの作成」ページに移動します。ここで、コードの種類として「CSSスニペット」を選択し、次のコードを「コードプレビュー」ボックスにコピー＆ペーストする必要があります。

p { color:#990000; }

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

最後に、「スニペットを保存」ボタンをクリックし、「非アクティブ」スイッチを「アクティブ」に切り替えます。

これで、ウェブサイト全体のテキストの色を正常に変更できました。詳細な手順については、WordPress のテキストの色を変更する方法に関するチュートリアルをご覧ください。

動画チュートリアル

文章での説明が苦手な場合は、代わりにこちらの動画をご覧ください。

この記事がWordPressのフォントサイズを簡単に変更する方法を学ぶのに役立ったことを願っています。また、WordPressでカスタムフォントを使用する方法に関するガイドや、WordPressウェブサイトでGoogleフォントを無効にする方法に関するチュートリアルもご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。