WordPressで文字サイズを思い通りにするには？方法を紹介

WordPressでサイトを運営している人の中には、文字サイズを簡単に変えられるようにしたいという人も多いでしょう。
デフォルトの文字サイズだけではメリハリがなくて読みにくい文章となり、その結果ユーザーにコンテンツを読んでもらうことも難しくなります。

WordPressやコーディングにあまり詳しくない人でも、簡単に文字サイズを変えることは可能です。
今回は、CSSを編集したりプラグインを活用することで文字サイズを変える方法をご説明します。

WordPressにおける文字サイズとは？

WordPressを利用する際には、使用しているテーマによって差があるものの、文字のデフォルトサイズ、つまり基本となる文字の大きさや文字と文字の間隔はあらかじめ決められています。

デフォルトのテーマの場合は、編集画面に文字サイズを変更するメニューもないため、デフォルト設定の文字サイズで延々と記事を書くことになってしまいます。
テーマによっては文字サイズを変更できる種類もありますが、変更できる文字サイズが限られている場合も多いでしょう。

また、テーマを変えるとサイトのデザインが一新されてしまうため、文字サイズのためだけにテーマを変えるというのも実際の問題としてなかなか難しいのではないでしょうか。

ですから、大きくサイトデザインを変更せずに文字サイズを変える方法を知る必要があります。

文字サイズを変更するメリット

文字サイズを変更するメリットの1つは、メリハリが付いてコンテンツが見やすくなることです。

ブログやWEBサイトは、書籍とは異なり読まれるものではなく見られるものだとよく言われます。
わざわざお金を出して本を買うのとは異なり、ネットユーザーがサイトを訪れるのはたまたまネットサーフィンをしていたらたどり着いたなど偶然に近いケースが多いです。

つまり、ユーザーとしては記事を読もうとする動機があまり強くないのです。
そのような場合にコンテンツの文字サイズが全て同じだと、パッと見た瞬間に「内容がよく分からないな」「読みにくそうだな」と判断され、内容を吟味されることなくサイトから去ってしまう可能性が高いでしょう。

たとえ誰もが感心や関心を寄せる素晴らしい内容を含んだ記事をリリースしても、読まれなくては意味がありません。

このような理由から、文字サイズを変更できるようにすることは非常に大切です。

特に読んで欲しいポイントやインパクトを持たせたい箇所の文字サイズを大きくすることで、コンテンツ全体にメリハリが生まれ、パッと見て読みやすい記事だなと判断されやすくなります。
訴求したい部分の文字サイズを大きくすることで目立たせ、見込み客を惹きつけるメリットも期待できます。

また、サイトが高齢者をメインターゲットにしている場合などは、全体的な文字サイズを大きくすることでより読まれやすいコンテンツになるでしょう。

たとえ競合サイトと同様の内容であっても、読みやすさ、内容の把握のしやすさという点で勝ることでアドバンテージを獲得することができます。

文字サイズを変更する際の注意点

文字サイズを変更する方法は複数ありますが、共通してまず行っておくべきことはCSSファイルのバックアップです。

CSSファイルとは、サイトのデザインを設定するためのファイルで、スタイルシートとも呼ばれます。
CSSファイルを編集することで、たとえば「見出しのフォントはゴシック体で色は赤」「本文のフォントは明朝体で文字サイズは14px」などと好きなデザインにアレンジすることが可能となるのです。
文字サイズを変更できる状態にするということは、このCSSに変更を加えることになります。

問題なく変更できれば良いのですが、場合によっては文字サイズを変更したらサイトのレイアウトが崩れてしまうなどトラブルに発展する可能性もないとは言えません。
そのような時にバックアップを取っていれば、ファイルを差し替えるだけで元の状態に復旧することが可能です。

バックアップを取ることで万が一の保険となり、より良いサイトにできるよう積極的にWordPressのカスタマイズにトライする後押しにもなるでしょう。

CSSファイルのバックアップの取り方は難しくありません。

まず、WordPressの管理画面（ダッシュボード）にある「外観」から「テーマの編集」に入ります。
テーマ編集画面の右上に「編集するテーマを選択」という項目がありますので、自身が使っている、もしくは編集したいテーマを選択してください。

その後、画面右側にずらっと並んでいる項目の中から「スタイルシート (style.css)」をクリックします（一番上に表示されていることが多いです）。
画面中央の「選択したファイルの内容」にスタイルシートの内容が表示されますので、全て選択してコピーをしてください。コピーした内容をメモ帳やWordなどのテキストファイルに貼り付けて保存すればCSSファイルのバックアップは完了です。

バックアップファイルには「〇〇（テーマ名）CSSバックアップ.〇年〇月〇日」といったような名前を設定しておけば、何のファイルだったか忘れずに済みます。

ここまで作業が終われば、いよいよ文字サイズの変更を始めることができます。

CSSで文字サイズを変更する方法

文字サイズを変更する最も基本的な手段は、CSSファイルを直接編集（コーディング）する方法です。

CSSを変更するとデフォルト文字サイズを変更できるため、文章全体の文字を大きくしたい、あるいは小さくしたい時には特に役に立ちます。

ただし、編集を行うにはCSSの構造について一定の知識とスキルが必要となり、WordPress初心者に向いている方法とは言い難いでしょう。

また、繰り返しになりますが、必ずCSSのバックアップを取るという点も忘れないようにしてください。
編集前の内容を失ってしまえば、トラブルがあった際に元に戻すことが難しくなります。

CSS編集の手順は、途中まではCSSファイルのバックアップを取る手順と同じです。
管理画面の「外観」→「テーマの編集」から文字サイズを変更したいテーマのスタイルシートを表示させます。そして、スタイルシートの一番下に以下の記述を新たに加えてください。

p { font-size:18px;}

記述内容については、まず「p」は段落を表しており、これを記述することで「ここから段落内の文章についてスタイルを設定します」と指定することができます。
具体的な設定内容は｛｝内に記述してください。「font-size:」は文字の大きさを設定する記述で、px（ピクセル）という単位で指定します。

つまり、上記は「サイト記事の各段落の文章の文字サイズを18pxに指定する」という内容となるのです。

WordPressでは15px前後が一般的な文字サイズと言われていますので、それ以上であれば文字が大きいという印象を与えられるでしょう。
記述が終わった後は、直下の「ファイルを更新」ボタンをクリックします。
問題なく処理されれば、指定したとおりに文字サイズが変更されます。

一方、以下の表示が出現した場合は絶対に更新しないでください。

 「このファイルを更新する前に1個のエラーを修正する必要があります。 
サイトを壊してしまうかもしれませんが、それでもアップデートしますか？」 

これは、スタイルシートの記述のどこかにエラーが発生していること示す警告です。
このまま更新すると、不具合が高い可能性で発生します。

原因としては、追記内容にミスがあるかもしれませんし、あるいは不可欠な箇所を誤って削除した可能性もあります。

もし修正箇所が分からなければ、戻るボタンを押して編集内容を破棄してください。
編集前の内容に戻ります。

以上のCSS編集は、基本的かつスタンダードな内容です。

使用しているテーマによって、シートが細分化されていたりデフォルトの記述が異なっていたりする場合があります。
それらに適切に対応できるノウハウがないと、思うように文字サイズが変更されないことも多いです。

したがって、WordPress初心者にはCSSファイルを直接編集することはおすすめできません。
文字サイズを変更できるプラグインを活用した方が確実で手間も省けるでしょう。

【おすすめプラグイン】1.Visual CSS Style Editor

プラグインで文字サイズを変更する際には、「Visual CSS Style Editor」がおすすめです。

このプラグインを使用することでCSS編集（コーディング）をせずに文字サイズをカスタマイズできます。使い方も非常に直観的かつシンプルです。

まず、プラグインのインストールと有効化を行い、WordPressにログインしたまま編集したいページの画面を表示すると、上部に「Edit With YellowPencil」というボタンが現れます。
これをクリックすると編集画面に移り、文字サイズを変更することが可能となります。

変更したい段落や見出しをクリックすると文字サイズや色を編集するスライド式のパラメーターが現れ、これを操作すれば文字サイズの変更は完了です。

【おすすめプラグイン】2.TinyMCE Advanced

「TinyMCE Advanced」は非常に多くのユーザーに愛用され、また多くのWordPress情報サイトで推奨されているプラグインです。

文字サイズを変更するまでのプロセスが非常に簡単で、手軽に文字サイズを変更することが可能です。

プラグインをインストールした後は、管理画面の「設定」から「TinyMCE Advanced」メニューを開きます。
メニュー下部に「フォントファミリー」や「顔文字」などさまざまなツールメニューが表示されていますので、その中から「フォントサイズ」を選んで画面上部の使用可能なメニュー群にドラッグ＆ドロップしてください。

すると記事を書くためのページ編集画面のビジュアルエディタに「フォント」メニューが追加されて文字サイズが変更できるようになります。
設定可能な文字サイズは、8pt、10pt、12pt、14pt、18pt、24pt、36ptの7種類。普段使用する分には十分な選択肢と言えるでしょう。

【おすすめプラグイン】3.WP-chgFontSize

「WP-chgFontSize」はサイトを閲覧するユーザーが文字の大きさを変更することができるプラグインです。

サイトを閲覧する人それぞれに合った文字のサイズにできるため、導入することで非常にユーザビリティが高くなるでしょう。

プラグインを有効化した後、設定画面で文字の最小・最大サイズを指定します。
その後、ウィジェット画面でサイドバーなど任意の場所に設置してください。

サイトの設置箇所に大文字の「A」と小文字の「a」が表示され、「A」をクリックすると文字を大きくでき、「a」をクリックすると文字が小さくできるようになります。
このプラグインは管理画面の「プラグイン」から新規追加するほか、配布サイトから入手することも可能です。
その際はZipファイルをダウンロードして、プラグインフォルダにファイルをアップロードし有効化することで使用可能となります。

【おすすめプラグイン】4.FitText

「FitText」は、画面サイズに合わせて文字のサイズを変えられるレスポンシブ対応のプラグインです。

スマートフォンやタブレットでのネットサーフィンが普通となった今では、ユーザーの利便性を高める意味で非常に役に立つプラグインだと言えます。

こちらのプラグインはWordPressの管理画面ではなく、配布サイトからダウンロードすることで使用可能です。
導入の際はHTMLの編集が必要となりますので、WordPressを始めたばかりの人にとっては少し運用が難しいかもしれません。

記事作成時に文字サイズをカスタマイズする方法

記事を作成しながら柔軟に文字サイズをカスタマイズしたいというケースもあるでしょう。

そのような時に役に立つプラグインが「Elementor Page Builder」です。
これは専用の編集画面を用いることで、見出しや文章、画像、動画などを自由に配置したコンテンツを作成できるプラグインです。

どのようなテーマにも対応していると公言しており、また日本語に対応しているので使いやすさも抜群です。

直観的な使用が可能となっているのも特長の1つです。

インストール・有効化するとページ編集画面の上部に「Elementorで編集」というボタンが現れますので、これをクリックすると専用の編集画面に遷移します。

編集画面では左側にテキストや画像、SNSボタンなどさまざまなアイコンが並んでおり、これを右側にあるページ画面にドラッグ＆ドロップするだけで自由にコンテンツをデザインすることが可能です。

文字サイズについても、スライド式のパラメーターで感覚的に調整可能です。
段落の1文字目だけ大きくするなどオシャレなデザインもボタン1つで設定できます。

また、レスポンシブ対応なため、どの端末で見てもユーザビリティの高いサイトになるでしょう。

まとめ

ユーザビリティを向上させるためにも、文字サイズを調整し、ターゲットとするユーザーが見やすいサイトにアレンジすることは非常に大切です。