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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ヘッダーブロックを追加

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

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

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

見出しを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スニペットを選択

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

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

フォントサイズコードのタイトルを入力してください

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

p {
font-size:16px;
}

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

このようになります。

フォントサイズのコードを貼り付けます

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

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

挿入方法を選択

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

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

フォントサイズコードを保存

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

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

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

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

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

テキストの色を変更する

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

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

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

p { color:#990000; }

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

カスタムコードを使用したテキストカラーの変更

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

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

動画チュートリアル

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

WPBeginnerを購読する

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

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

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

180 CommentsLeave a Reply

  1. これに関するTinyMCEプラグインの提案をありがとうございます。非常にシンプルで、うまく機能します。感謝しています!

  2. 本当に役立ちます。私のサイトもフォントサイズが小さいという問題を抱えています。style.cssで解決する方法はありますか?

  3. OMG。あなたは素晴らしいです。そのプラグインはとてもシンプルで、まさに私が求めていたものでした。ありがとう

  4. 素晴らしいチュートリアルをありがとうございます。とても落ち着いた声で、明瞭で理解しやすいです。感謝しています!

  5. 残念ながら、これは有料アカウントのみで利用可能です。WordPress.com を使用している場合、ダッシュボードにプラグインタブはありません。
    「WordPress.com では、最も人気のあるプラグイン機能をサイトに自動的に含んでいます。そのため、WordPress.com ユーザーはダッシュボードにプラグインタブを見つけることはありません。」

    • 実際には、WordPress.com の有料アカウントとは異なる WordPress.org アカウントでのみ利用可能です。「WordPress」という言葉の後に .com が付いていない場合は、自己ホスト型の .org を指していると想定して問題ありません。WPBeginner のヒントとチュートリアルはこれらを対象としています。.com を使用している方には混乱しやすいかもしれませんが、この2つは実際には非常に異なるものです。ヘルプを探す際は、検索用語に「wordpress.com」を含めることで、より良い結果が得られます。

  6. TinyMCE を何度かダウンロードしようとしましたが、成功しませんでした。ファイルを開こうとすると、すべてアラビア語(文字がそのように見えます!)で書かれているように見えます。Wordpress には初めてで、ウェブサイトを立ち上げて稼働させたいのですが、他に何か提案はありますか。ありがとうございます!

  7. コメントを公開していただきありがとうございます。他のコメントで、Wordpress.org では TinyMCE やプラグインを使用できないことがわかりました。

    段落の見出しについては、まだよくわかりません。そのボタンはありますが、ドロップダウンメニューなどを表示させることができなかったようです。

    WP に不満を感じた主な理由の1つは、フォントサイズを変更できず、ブログのテキストが常に小さすぎると感じていたことです。

  8. チュートリアルを本当にありがとうございました!投稿のフォントサイズを変更できましたが、サイドバーのウィジェットのフォントを変更する方法がわかりません。何か提案はありますか?

  9. Recent Postsウィジェットに影響を与えずに投稿タイトルのフォントサイズを変更する方法を誰か説明してくれたらいいのにと思います。基本的なTwelve Thirteenを使用しています。タイトルのすぐ下にあるリンクで、高度な投稿タイトルのフォント変更ができます。しかし、変更がRecent Postsボックスにも同様に影響するため、全く役に立ちません!

  10. タイトルのフォントサイズを変更することについてはどうですか?これを試すと、サイドバーのRecent Postsが大きくなり、ひどい見た目になります。どこを探しても解決策が見つかりません…何時間も探しました。しかし、タイトルサイズを小さくしないと、デフォルトサイズが大きすぎてページを開いたときの半分を占めてしまいます。

  11. このプラグインのフォントサイズオプションを含め、これらのオプションは、自分でサイトをホストしている場合は利用できないのですか?皆が言う通りに、フォントサイズボタンをバーにドラッグするなど、すべて試しましたが、どのような設定でもフォントサイズを変更するオプションが表示されません。

    段落メニューもありません。
    ありがとうございます。

  12. この記事で説明されている方法2では、インストール時にフォントサイズオプションが存在しません。オプションは追加されます(ほとんどはすでに存在するものですが)、ほとんどの人が望んでいるものは残念ながらありません。上記のイラストはフォトショップで作成されたのでしょう。

  13. 他のページの見出しに影響を与えずに、特定のタイトルページのフォントを変更するにはどうすればよいですか?

  14. このページのリンクからプラグインをインストールし、インストールして有効化しました。最初の行の最後のボタンで2番目のメニューを開きましたが、インストール前と同じように見えます。無効化と再有効化を何度か試しましたが、フォントを変更するオプションはまだありません。一番上に新しい行(新しいと思います)が表示され、「ファイル」、「編集」、「挿入」などが、以前の最初の行のすぐ上に表示されました。

    • Richard!! 髪の毛をむしり取るような事態から救ってくれてありがとう。拡張メニューを表示する方法をずっと探していましたが、「ツールバーの切り替え」ボタンをクリックする必要があるとは知りませんでした。コメントありがとうございます。

  15. あなたのビデオはとても役に立ちました。WordPressテーマが提供する唯一のフォントを見つけてサイズを変更しましたが、それは始まりです。お勧めされたプラグインをダウンロードします。

  16. 素晴らしい短いビデオです。とても役に立ちました…。ありがとうございます!!!… 他の方へのヒント… 「設定に移動」をクリックして、ドロップダウンメニューに「TinyMCE Advanced」というテキストが表示されたら… ツールバーをフォントサイズなどで設定することを忘れないでください。そうしないと、ツールバーに表示されません。ツールバーにはさらに多くのオプションがあり、フォントサイズは新しいツールバーの自動的な一部ではないからです…。ドラッグ&ドロップで簡単に設定できます…。素晴らしい共有と、他の人を助けるために時間を割いていただき、改めてありがとうございます!!!

      • modさん、こんにちは。この問題の解決策について、投稿に追記をお願いします。juna idのコメントに返信しました。もししていただけたら嬉しいです。ちなみに、ありがとうございます!

    • hii juna id ‘ dont worry i was dealing with the same problem but then after i figured out that ‘ you have to go to TinyMce Advanced plugin which is located in the Setting ‘ after activated and then drag the font size option from unsed options and drop it right in used option’ and save it ‘ that’s it :)

  17. I have not ever seen those toolbars. I wonder if ANYONE would actually ask this question if they’d have those menus right under their noses!

    Just found out that toolbar must be _extended_ to see those MOST usable buttons… :D

  18. 変な問題が発生しています。メインのポイントをH2タグに設定したところ表示されていましたが、大きくするためにH1に変更しようとしたところ表示されなくなりました。何か insight はありますか?

  19. こんにちは
    あなたのビデオは本当に役に立ちました。
    wordpress.comでフォントサイズを変更するプラグインを挿入できますか、それともwordpress.orgのみですか。
    wordpress.comの写真の下のフォントサイズを変更する必要があります。
    よろしくお願いします。

  20. こんにちは。
    投稿以外の見出しやその他の項目のフォントを変更したいです。
    CSSスタイルシートを編集しようとしましたが、何も起こらないので途方に暮れています。以前も使ったことがありません。
    助けてください!
    Tine MCEは投稿サイズにしか役立ちませんが、ウェブサイトの他の部分は?

    ありがとうございます!

  21. このプラグインをダウンロードして有効化しましたが、他のユーザーが以前に述べたように、フォントサイズを変更するオプションが含まれていません。私のオプションは、提供された画像と同じですが、フォントサイズを除きます。その代わりに、スタイルがあります。あなたの画像は非常に誤解を招くものです。

    • プラグインを調べる前に結論に飛びつくのは、あなたにとってどうですか?誰かが記事全体を作成して物事を説明するのに苦労しているときに、愚か者にならないでください。あなたはこれを3ヶ月前に投稿し、管理者はそれより1ヶ月前のコメントの下であなたの質問に答えました。

  22. このチュートリアルで示されている画像にあるオプションの2行目が、私の投稿の追加/編集ウィンドウに表示されません。そのため、フォントサイズを変更するための段落タブがありません。何かアドバイスはありますか?

  23. このチュートリアルで示されている画像にあるオプションの2行目が、私の投稿の追加/編集ウィンドウに表示されません。そのため、フォントサイズを変更するための段落タブがありません。何かアドバイスはありますか?

  24. TinyMCE Advancedプラグインは私のサイトにぴったりです。見事に機能しています。この記事をありがとうございます。

  25. ありがとうございます、ありがとうございます、ありがとうございます!記事に感謝します…とても参考になりました!

  26. ビジュアルエディタの「キッチンシンクを表示/非表示」ボタンをクリックして、段落設定を表示することを忘れないでください。デフォルトでは非表示になっています。

    • このボタンはどこで見つけられますか?私のビジュアルテキストエディタには段落オプションがありません。基本的に、スクリーンショットの上段のオプションしかありません。ありがとうございます!

  27. 他の方法としては、Thesisのようなテーマフレームワークを使用することです。GenesisやHeadwayなども同様だと思います(私はThesisを使用しているので、それに慣れています)。ダッシュボードがあり、フォントサイズなどを特定の場所で簡単に変更できます。

  28. ユーザーがフォントサイズや要素を変更できるオプションをどのように提供しますか(視力が悪い場合など)。例を挙げます。drwalisever. com。右上隅に2つのボタンがあります。これは、もはや開発されていないFusionテーマを使用しています。チュートリアルがあれば素晴らしいです、ありがとう!

  29. しかし、SEOに影響すると思いますが、見出しタグが表示されるオプションがありません。そうでしょうか?

返信する

コメントを残していただきありがとうございます。すべてのコメントは、当社のコメントポリシーに従ってモデレーションされますので、ご了承ください。メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。