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：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 ページビルダープラグインのリストもご覧ください。
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.
Joseph
The TinyMCE really worked! Thanks alot☺
mate wierdl
How about changing font size in comments to blog posts?
Naomi
Thanks for the TinyMCE plugin suggestion for this. Super simple and it works great. I appreciate it!
WPBeginner Support
Hey Naomi,
Glad you found it useful
You may also want to subscribe to our YouTube Channel for WordPress video tutorials.
管理者
Abhisehkd
really helpful. my site is also suffering from low font size . is there is any way to solve this through style.css
Aslam Fawad
Thanks. Nice Post..
Judy
I too, would like to learn how to change font size in the style sheet.
J
Thank GOD I found this article!
Keivon
OMG. You are wonderful. That plugin is so simple and exactly what I needed. Thanks
Henderson
Thanks for this very helpful post
dennis mitchell
Thanks. very helpful.
Brian Woodburn
the point to change size of font etc has gone from the face bar
ifaheem
Thanks for the help!
Jana Sheeder
Thank you very much for a great tutorial. Very soothing voice that’s clear and easy to understand, too. I appreciate you!
Susan
Unfortunately, this is only available to paid accounts. If you’re using WordPress.com, there is no Plugins tab located in the Dashboard.
“On WordPress.com, we include the most popular plugin functionality within our sites automatically. As a result, WordPress.com users won’t find a Plugins tab in the Dashboard.”
Melissa
Actually, it’s only available to WordPress.org accounts, which is not the same as a paid WordPress.com account. Anytime you see “WordPress” without a .com at the end, it’s safe to assume it’s referring to the self-hosted .org, which WPBeginner tips & tutorials are aimed at. I know it can be confusing for people who use .com, but the two really are very different animals. When looking for help, you’ll get better results if you’re sure to include “wordpress.com” in your search terms.
Jo-Anne
I have tried to download TinyMCE several times without success. When I try to open the files. everything appears to be written in Arabic (characters look like that!) Any other suggestions as I’m new to Wordpress and would love to get my website up and running. Thank you!
Cinnamonblue
NO Thanks for NOT publishing my comment. I did see in another comment that I cannot use TinyMCE or plug ins on Wordpress.org.
I’m still not sure about paragraph headings, though. I have that button, but I didn’t seem to be able to get it to give a dropdown menu or anything.
One main reason I got frustrated with WP was that I couldn’t seem to change font size and the text of my blog always seemed too small.
Anthony
thank you so much.
i am relieved now that i have this plugin
Laura
Thank you so much for the tutorial! I was able to change the font size in my posts…. but I cannot figure out how to change the font for the widgets in my sidebar… any suggestions?
WPBeginner Support
Please see our guide on how to add custom styles to WordPress widgets.
管理者
Grace Joubarne
I sure wish someone could explain how we can change the post title font size without the change affecting the Recent Posts widget. I am using the basic Twelve Thirteen. It offers advanced Post Title font changes with a link found directly under the title. But totally useless, since any changes equally affect the Recent Posts box!
Grace Joubarne
What about changing the font size of the Title….when I try to do this, the Recent Posts in the sidebar increases in size and looks terrible. No way is offered to resolve this anywhere that I can find…and I’ve been looking for hours. But unless I reduce the title size, the default size is so large it takes up half the opening page.
Greg Smith
Are these option, including the plugin font size options not available if you host your own site or something? I did everything everybody says to do, dragging the font size button to the bar etc., and I get no option to resize fonts no matter what.
I also have no “paragraph” menu.
Thanks.
WPBeginner Staff
We have updated the article with new instructions. Hope this resolves the issue. Thanks for notifying us.
Colin
In method 2 described in this article- the font size option does not exist when you install it. It does add options (most of which already exist) but the one that nearly everybody wants is sadly absent. I guess photoshop was used for the above illustration
Pastelaso29
how can I change the font of a specific title page without affecting the title on the rest of the pages?
Casey
I installed the plug-in from the link on this page and installed and activated it. I opened the second menu with the last button on the first row but it looks the same as before I installed it. I tried deactivating and reactivating several times but the option to change the font is still not there. A new row at the top (I think it’s new, anyway) appeared with “file”, “edit”, “insert”, etc. right above what used to be the first row.
richard lee morris
Thanks! This article helped me. I was guided to the “extended” menu — by clicking the last button “Toggle Toolbar.”
Zakia H
Richard!! You just save me from pulling my hair out. I’ve been trying to figure out how to view the extended menu and had no idea I had to click the “Toggle Toolbar” button. Thank you for your comment
Sharon Seltzer
Your video was very helpful. I already found and changed the size of the one font my Wordpress Theme gives me, but it’s a beginning. I will download your suggested Plugin.
Liz
AMAZING tutorial, thank you!
KevinJosephCollinson
Great short video. This helped a lot…. Thanks!!!…. Tip for others… Please make sure that when you “Go To Settings” and you see the “TinyMCE Advanced” text in the drop down Menu… Remember to configure your Toolbar with the Font Size etc otherwise you will not have it in your toolbar as the toolbar has much more options and the Font Size is not an automatic part of your new toolbar… So simple with the drag-and-drop to configure…. Thanks again for the great share and taking time to help other people!!!
juna id
I have Tinymceadvanced plugin installed in my WordPress Blog and i am using Sahifa wordpess theme but still in new post page i don’t find Font size option,
WPBeginner Staff
Please report in the plugin’s support forum and attach a screenshot of your post editor.
Andriken sonwane
hii mod ‘ update your post and add a extra line about this problem solution ‘ i had replied it on juna id comment’ i will be glad if you do it ‘ Thanks by d way !
Andriken sonwane
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
Chris
Thanks for this article. One of my biggest pains about posting on WP is resolved forever!
Dr3Tri
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…
Craig Desmarais
I am having a weird issue. I set my main points to H2 tags and they were showing up but when I tried to switch them to H1 to make them larger they weren’t showing up. Anyone have any insight?
Briony
Hi There
I found your video really helpful. Can you insert plugins tp change font size on wordpress.com or only wordpress.org. I need to change font size under photo’s on wordpress.com.
Cheers
WPBeginner Support
You can not use plugins on WordPress.com
管理者
Cheeni
Hello,
I want to change font of my headings and other items apart from posts.
I have tried to amend css style sheet but I am lost because nothing happens and I have never used it before as well.
Please help!
Tine MCE only helps with post sizes but what about other things on website?
Thanks!
Emel
Downloaded and activated this plug-in, but as a couple of users mentioned earlier, it doesn’t include the option to change the font size. All of my options are the same as the picture you provided with the exception of the Font Size. In place of it, I have Styles. Your picture is very misleading.
Chris
How is ‘jumping to conclusions without exploring a plugin’ working for you? Please don’t be a moron when someone takes the pain of creating an entire article explaining stuff. You posted this 3 months ago and your question was answered by the admin below a comment posted 1 month prior to that.
Gurpreet
My add/edit post window does not have the entire second line of options that you have pictured in this tutorial. This means that I don’t have the paragraph tab in which to change font size. Any advice?
WPBeginner Support
The second line of buttons appears when you click on the last button in the first row, its called show/hide kitchen sink button. Clicking on it will display another row of buttons in your visual post editor.
管理者
Dr3Tri
Thanks, this was it!
Sarah
My add/edit post window does not have the entire second line of options that you have pictured in this tutorial. This means that I don’t have the paragraph tab in which to change font size. Any advice?
Sunganani
The TinyMCE Advanced plugin is just the one for my site. It is working beautifully. Thank you for this post
Tom Reber
Thank you, thank you, thank you! I appreciate the article…very helpful!
Radek
Nice tutorial. Thanks!
Balaji
Thanks for this post.
Ivor Vale
Can you adjust the spacing between paragraphs in WordPress ?
Editorial Staff
Yes, but you would have to edit the theme’s CSS.
管理者
Dominique
Don’t forget to click the “Show/Hide The Kitchen Sink” button in the visual editor to display the paragraph setting. It’s hidden by default.
Marie
Where can I find this button? My visual text editor doesn’t have a paragraph option; basically it only has the top row of options from the screen shot. Thanks!
Marie
Nevermind, I found it!
thethaiguy
You guys are great and thank you for info!
Michael
Another way is to use a theme framework like Thesis, and I suppose Genesis or Headway and the like(I use Thesis, so it’s what I’m familiar with). You have a dashboard to easily change anything you like anywhere, such as font size in specific locations.
Raja Tahir Qaiser
Can I know how to change default font size ?
Editorial Staff
You would need to edit the style.css file and change the font size on your body element.
管理者
sim
so please explain how you change the default font by changing the style.css??
Jake
How do you give the user an option to change the font size and elements (if they have bad eyesight, etc.) Here is an example: drwalisever. com. In the top right corner there are 2 buttons. It uses the Fusion theme, which is no longer developed. A tutorial would be great, thanks!
Bozga Ovidiu
i don’t like plugins
Editorial Staff
Any particular reason for that?
管理者
Ashutosh Joshi
But I think will effect in SEO, as there are no option for Heading tags are being shown.. is it so?
Editorial Staff
The heading tag options only show up in the visual editor. If you are in the HTML editor, it will not show.
管理者