WordPress（ワードプレス）の文字サイズ変更方法やおすすめのプラグインをご紹介！｜Webマーケティングの基本情報をお届け

WordPressでブログやコラムを執筆しているけど、文字サイズの変更方法がわからないと悩んではいませんか？
WordPressでは、ビジュアル画面に文字サイズを変更するボタンがありません。
そのため、文字のサイズを変更したい場合は、直接htmlでタグを打ち込むかプラグインを使用する必要があります。
初心者の方でも、すぐに変更できるように解説するため参考にしてください。

Contents

WordPressの文字サイズとは？
WordPressの文字サイズを変更するメリット
文字サイズの変更方法
まとめ

WordPressの文字サイズとは？

WordPressで作成したサイト上での文字サイズは、WordPressで使用しているテーマに依存するため、基本的には変更できません。デフォルトテーマにおいても文字サイズを変更する項目は用意されていないため、初期設定の文字サイズのままブログやコラムなどを更新することとなります。

文字サイズを変更できるテーマも存在しますが、変更できるサイズが限られている場合がほとんどです。また、文字サイズを変更したいからといってテーマを変えてしまうと、サイト全体のデザインなどが変わってしまうため、文字サイズだけのためにテーマを変更することはしないほうが良いでしょう。

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

まず、なぜ文字サイズを変更するのかと疑問に思う方も少なからずいることでしょう。
文字サイズを変更せずとも、ブログやコラムなどのコンテンツを配信することは可能です。

ですが、文字サイズを変更することにより、文章中に強調したい部分などの文字サイズを変更することで、メリハリのある文章になり、ユーザーから見やすく読みやすいコンテンツになるといったメリットがあります。

小説や文字だけの本とは違い、Webサイトでは視覚的な印象を与えることが大事です。

読んでもらうための有益な内容のコンテンツ作りだけではなく、視覚的にも興味をもってもらえるような飽きさせないコンテンツ作りが必要です。

例えば、

・文章中の重要な部分
・文章中の読んでほしい部分
・インパクトを与えたい部分

上記のような部分を大きく表示させたりするだけでも、ページに訪れたユーザーは変わってくるでしょう。すべての文字サイズが同じで殺風景なページだと、興味がわかないといったことがあるのではないでしょうか。一方で、一部の文字が大きくなっていたりすると、視覚的に印象がつき、「読んでみよう」などといったことを思ってもらえる可能性があります。

文字サイズを変更することは、ユーザーの興味を引くためにもメリットがあるといえます。

文字サイズの変更方法

WordPressで文字サイズの変更方法はいくつかあります。CSSを編集したり、プラグインを導入するなど、さまざまな方法があります。初心者の方でも簡単に変更できる方法もあります。

今回は、その中から3つの文字サイズ変更方法を紹介するため、参考にしてください。

プラグイン「TinyMCE Advanced」

まずはWordPressにインストールすることで使用できるプラグイン「TinyMCE Adanced」（現在は「Advanced Editor Tools」という名前です）を紹介します。

CSSの編集が難しいと感じている方は、こちらのプラグインを使用する方法で文字サイズを変更することをおすすめします。

使用するためには、Wordpressの管理画面メニュー「プラグイン」にある「新規追加」で「TinyMCE Advanced」を検索してインストールしましょう。

インストールが終わったら有効化します。

有効化が完了したら設定画面を開いてみましょう。

デフォルトで文字サイズ変更機能が設定されていますが、「使用しないボタン」の項目に使用したい機能があれば、ドラッグすることで機能を追加できます。3段までであれば、好きな機能をメニューに入れることができます。自分の使いやすいようにカスタマイズしよう。

これで、記事投稿・編集画面にデフォルトで機能が設置されています。そのため、次回から新規投稿する際や、既存記事の編集する際、簡単に文字サイズを変更できます。

あとは上記画像のように、文字サイズを変更したい文字列を選択して任意で文字サイズを変えれます。変更したら、保存して完了です。

文字サイズを変更したい既存記事がある場合、それぞれの記事編集画面から文字サイズを変更できます。

こちらのプラグインは、文字サイズの変更だけではなく、フォントの変更・「続きを読む」タグの挿入なども、簡単にできます。HTML・CSSなどの知識がない方は、プラグイン「TinyMCE Advanced」を導入しましょう。

CSS

次にCSSでの文字サイズ変更方法を紹介します。この方法は基本的な変更方法です。
CSSファイルのコードを書き換えることで、デフォルトの文字サイズを変更することができます。デフォルトで変えるため、全体の文字サイズを変更したい場合に、こちらの方法が有効的です。

ですが、CSSの変更はコードを書き換えるため、最低限の知識とスキルが必要です。WordPressを初めて利用する方やホームページ制作を行ったことのない方は、CSSを書き換える方法は推奨しません。

変更方法ですが、WordPressの「外観」→「テーマファイルエディター」から変更できます。

下記コードをスタイルシートの一番下に記述すれば、適用されます。

p { font-size: 〇〇px;}

〇〇の箇所に12,14などの数字を入れて文字サイズを指定することができます。
デフォルトは15pxになっていることがほとんどです。

CSSを書き換える際に注意点があります。CSSは、サイトデザインに関する設定が記述されているため、コードを書き換えることで、文字サイズの変更以外にもさまざまな変更を行うことが可能です。

そのため、記述が少しでも間違えていれば、サイト全体のレイアウト・デザインが崩れてしまう場合があります。

そうなってしまった時のために、バックアップは必ず取っておきましょう。バックアップを取っていれば、上書きするだけで変更する前の状態に戻せます。
CSSに限らず、なにかを変更する場合は必ずバックアップを取りましょう。

jQuery

jQueryはプラグイン使用せずに、文字サイズを変更するボタンを設置できます。
jQueryとは、JavaScriptのためのライブラリです。jQueryを使用すれば、JavaScriptに詳しくない方でも、JavaScriptを簡単に記述することができます。

設定方法ですが、まずは「jquery本体」「jquery.textresizer.js」「jquery.cookie.js」をダウンロードしましょう。

「jquery本体」
https://jquery.com/download/

2022年8月時点の最新バージョンが上記赤枠の「3.6.1」です。
赤枠のリンクを「右クリック」して「名前を付けてリンク先を保存」を選んで、任意の場所に保存しましょう。

「jquery.textresizer.js」
https://github.com/mariojvargas/jquery-textresizer

「jquery.cookie.js」
https://github.com/mariojvargas/jquery-textresizer/tree/master/demos/js/vendor/jquery/jquery.cookie

<script src="common/js/jquery-xxxx(本体).js"></script>
<script src="js/textresizer/jquery.textresizer.js"></script>
<script src="js/textresizer/jquery.cookie.js"></script>
<script type="text/javascript">

上記コードの下線部分のファイルパスは、保存しているファイルパスへ書き換えてください。

次にコンテンツ内に下記コードを入力してください。

<ul class="fontsize">
	<li><a href="javascript:void(0)" title="Small">小</a></li>
	<li><a href="javascript:void(0)" title="Medium">中</a></li>
	<li><a href="javascript:void(0)" title="Large">大</a></li>
</ul>
<div id="contents">～～～可変するエリアです～～～<div>

上記で「大」「中」「小」ボタンの設置が完了です。

設置したあとは、正常に動作するか確認しましょう。ページに設置したボタンを押下することで文字サイズが変わります。