あなたのwebサイトで文字のフォントサイズを変更したいと思ったことありませんか？コンテンツの一部の文字だけを小さくしたり、あるいはページ全体の文字を大きくしたり…
この記事では、初心者向けにWordPressサイトでのフォントサイズを変更する方法をお伝えします。ページの一部の変更だけでなく、サイト全体でフォントサイズの基本設定を変えてしまう方法も説明しますので、気になったらこのまま本文をお読みください…
目次
あなたのサイトにやって来たユーザーは、ほんの数秒でそのコンテンツを続けて読むか、あるいは別のサイトに行くかを判断します。普通、ぱっと見でごちゃごちゃしたページをそのまま読もうとは思わないので、見出しを効果的に使って見栄えをよくするだけでも離脱率の改善が見込めます。
WordPressの見出しはフォントサイズの大きさによって1番から6番まであります。大きい見出しを使うほど本文との区別がついてわかりやすいだけでなく、適切に見出しを指定することでGoogleもそのコンテンツをより適切に評価できるようになります。
見出しを使うには、ブロックエディターの中にある「見出し」を選択します。これだけで、そのパラグラフ全体が見出しとして設定されて、本文より明らかに大きな文字になります。
WordPressのデフォルトでは、見出しを選択すると2番目の見出しになるように設定されています。コンテンツ作成エリアの右側に見出しの大きさを変更するエリアがあって、あなたのお好みのサイズに変更することができます。
ただ、SEO対策として見出しを効果的に使うなら、見出しのサイズ選択にも従うべきルールが存在します。単に気分だけでフォントの大きさを決めるのではなく、コンテンツ全体を俯瞰してその場所にふさわしい適切な見出しを指定しなければなりません。
見出しではなく本文のフォントサイズを変えたい場合は、フォントを変えたいブロックを選択して画面の右側でサイズを調節します。デフォルトでは小、標準、中、大、特大の5段階にフォントサイズを切替えられますが、あなたのお好みでピクセルサイズを選択して文字の大きさを調整する方法もあります。
また、同じ場所から、段落の最初の文字を大きくしてユーザーの注意を引きつける「ドロップキャップ」というスタイルも設定できます。ただ、この調整方法はクラシック環境ではできません。クラシック環境で本文のフォントサイズを調整するには、次にご紹介するプラグイン を使うのがおすすめです。
もしあなたがクラシック環境を使っているなら、フォントサイズの変更はTinyMCE Advancedというプラグイン をインストールして行うのがおすすめです。
プラグイン を有効化したら、管理画面の「設定」をクリックして、TinyMCE Advancedのツールバーをカスタマイズします。このプラグインでフォントサイズ以外にもいろいろ調整できるようになるので、使えそうな機能をすべてツールバーにドラッグ&ドロップしておきましょう。
あとは実際に固定ページあるいは投稿作成画面でコンテンツを作成し、フォントサイズを変更したい場所を選択してサイズを選択するだけです（残念ながら、ブロックエディターのように細かいフォントサイズの指定はできません）。
もし全ページでフォントサイズを一括変更したい！という場合には、WordPress管理画面の追加CSSからフォントサイズ変更を設定するのがおすすめです。
管理画面から「外観 >> カスタマイズ」を選択し、下の方にある追加CSSをクリックします。ここにコードを挿入することで、サイト全体の基本設定を変更することができます（あるいは、style.cssを開いて該当部分の数値を変更してもOKです）。
以下にフォントサイズ一括変更のためのサンプルコードをいくつかご紹介します。
本文のフォントサイズを一括変更したいなら、以下のコードをコピペするだけです。
p {
font-size:16px;
}
上のコードは本文のフォントサイズを16ピクセルにしたいときの例ですが、もし11ピクセルにしたければ数値の16を11に変更すればOKです。
見出しのフォントサイズを調整するには…
h2 {
font-size:32px;
}
これは見出し2を32ピクセルにしたいときのコードです。見出し2ではなく見出し3を調整したいときは、上のコードのh2をh3に変更し、タイトルのフォントサイズを変えたい場合はh2をh1に変更します。
ウィジェットエリアのフォントサイズを変更したいときには…
#sidebar {
font-size: 16px;
}
を追加して、中の数値をお好みの数値に変更します。
画像下にあるキャプションのフォントサイズ変更をしたいときには…
.wp-block-image figcaption{
font-size: 12px;
}
を追加CSSに加えます。
さらに行間のスペースを変えたいときには…
p {
line-height: 1.5em;
}
加えて段落間のスペースも変えたいときには…
p {
line-height: 1.5em;
padding-bottom: 15px;
}
を追加CSSにコピペします。あとは、それぞれ数値を調整しながらフォントサイズの変化を確認して、あなた好みのスタイルを見つけていってください。
関連記事：MathJaxの使い方｜WordPressサイトに数式を表示させてみる
AWAI認定コピーライター
SEO contents institute認定コピーライター
何事も“超一流の専門家から学ぶ”をポリシーとしており、コピーライティング業界で世界最高の権威である全米コピーライター協会(AWAI)でライティングの基礎を習得後、SEOコピーライティングのパイオニアHeather-Lloyd Martin、コンテンツマーケティングの世界的第一人者Brian ClarkにWebコピーライティングを学ぶ。
さらにAWAIでビジネス用Webサイト作成スキルを習得、知識ゼロの状態から自社サイトSuper Clear Contentsを立ち上げる。その経験とインターネット業界の動向をふまえて、個人事業主や副業サラリーマンに向けて最新のビジネス用Webサイト構築方法を提供している。