WordPressのプラグインで文字サイズの大中小を制御する方法

WordPressを使用しているけど、CSSやJavaScriptは苦手という方は多いのではないでしょうか。
文字サイズを変更するだけなのに、CSSは書きたくありませんよね。
WordPressならプラグインで、文字サイズの大中小を変更する3つのニーズに対応できます。

それぞれのニーズに対応するプラグインの、導入や設定方法を解説します。

WordPressで文字サイズを変更したい3つのケース

1、読者が文字サイズの大中小を選択できるようにしたい

文字サイズの大中小を、読者が変更できるようにするメリットはユーザビリティの向上です。
ブラウザの拡大でも対応は可能ですが、デザインごと拡大してしまいます。
WordPressのプラグイン「WP-chgFontSize」で簡単に、読者の文字サイズ変更機能が設置できます。

2、テーマの文字サイズが不満なので変更したい

文字サイズやフォントスタイルは、サイト全体の印象を左右します。
テーマの文字サイズに不満があるケースは、最も多いのではないでしょうか。
指定した箇所の文字サイズやサイト全体のフォントスタイルを、Visual CSS Style EditorはCSSを編集せずに変更できます。

3、記事中で強調のために文字サイズを変更したい

記事中で強調や装飾された文字は、読者に読みやすさやインパクトを与えます。
通常の文字サイズの変更や強調は、WordPressのエディタで可能です。
その方法の解説と、より多くの機能を持ったエディタのプラグインをご紹介します。

文字サイズの大中小を読者が選択するWordPressプラグイン

WP-chgFontSizeのインストールと使い方

WP-chgFontSizeのインストール

WP-chgFontSizeの設定と設置

インストールが完了したら、WP-chgFontSizeを設定してWordPressに設置します。
設定画面は英語ですが、設定する項目は基本的に3～4項目だけです。
要素名の取得から解説します。

Chromeのデベロッパーツールは、以下の手順で動作させて要素名をコピーします。

拡大したいテキスト上で右クリック+I

デベロッパーツールで要素名をコピー

要素名をコピーしたら、WP-chgFontSizeの設定画面に戻りペーストします。
文字の最小サイズや最大サイズ、ウィジェットの表示形式も設定しておきましょう。

最後に外観→ウィジェット→からWP-chgFontSizeを配置して、文字サイズの変更ボタンの設置が完了です。

設定画面で要素名をペースト。その他文字サイズなど設定

外観→ウィジェットからWP-chgFontSizeを配置

実際のWordPressで、ウィジェットを配置した結果

【上級者向け】プラグインに頼らず文字サイズ変更ボタンを設置

jQueryファイルのダウンロードと設置

jQueryを使用すれば、プラグイン不要で文字サイズ変更ボタンを設置することができます。
jQuery Text ResizerとjQuery Cookieを使用します。
それぞれダウンロードし、子テーマのthemesフォルダに配置します。

jQueryライブラリの読み込みとコード

jQueryのそれぞれのファイルを読み込みます。

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/jquery.cookie.js"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/jquery.textresizer.js"></script>
<script type="text/javascript">

以下が文字サイズ大中小への変更コード

jQuery(document).ready( function() {
 jQuery( "#textsize a" ).textresizer({
  target: "#content",
  sizes:  [ "20px", "16px", "12px" ]
  });
});
</script>

文字サイズ変更リンクの設置

文字サイズの変更ボタンを設置します。
ウィジェットでも子テーマの直接編集でも設置は可能です。

<div id="textsize">
<a href="#">大</a>
<a href="#">中</a>
<a href="#">小</a>
</div>

文字サイズをCSS不要で変更できるWordPressプラグイン

Visual CSS Style Editorを使用する前に子テーマをインストール

子テーマを使用するメリットと理由

WordPressではテーマでデザインが選択できます。
しかしテーマがアップデートすると、直接テーマに書き込んだ変更がリセットされてしまいます。
なので親テーマをアップデートしても変更がリセットされない、子テーマのインストールがおすすめです。

One-Click Child Theme　ワンクリックで子テーマを作成

子テーマのインストールは、One-Click Child Themeというプラグインを使用してワンクリックで完了します。
One-Click Child Themeをプラグイン→新規追加でインストールして、有効化しておきます。

子テーマインストール前

ツール→Child Themeの設定画面

ずらっと項目が出てきますが、一番下のConfigure Child Themeをクリックして子テーマが作成完了。
子テーマを有効にします。

Visual CSS Style Editorのインストールと使い方

Visual CSS Style Editorインストール

Visual CSS Style EditorはCSSを書かずに、サイト全体のテキストサイズをデザインできるプラグインです。
プラグイン→新規追加→Visual CSS Style Editorでインストールして有効化してください。

Visual CSS Style Editorの使い方

管理画面にYellowPencilという項目が出てきますので、Customizations→Let’s start!と進みます。

Visual CSS Style Editor無料版でのCSS変更方法

Visual CSS Style Editorは有料版と無料版があります。
有料版では変更後にセーブが可能なのですが、無料版ではセーブできません。
しかし変更後にコピペで、CSSを書かずにデザインを変更することは可能です。

変更したらCSSエディタを開いてコードをコピーします。

WordPressのスタイルシートにペーストして保存します。

記事中で文字サイズ変更する方法

最新のWordPressのエディタGutenbergで文字サイズ変更

WordPress5.0からエディタが、Gutenbergに変更されました。
Gutenbergは慣れれば、より効率的かつ直感的に記事を制作できます。

記事の制作では、文字を強調したり装飾したりすることがあります。
Gutenbergはプラグインなしに、文字のサイズ変更や強調、装飾が可能です。

また、テーマによってはマーカーやふりがな(ルビ)が、デフォルトで使用可能なものもあります。
WordPress5.0で評判がよい、無料の国産テーマの1つはCocoonです。
Cocoonは、様々な文字装飾や吹き出しなどのブロックを実装した、記事の制作に適したテーマです。

なじみ深いクラシックエディタでの文字サイズ変更

ほかのブログサービスと同じようなエディタも、WordPressでは選択できます。
クラシックエディタはブロックとして、WordPress5でもデフォルトで実装されています。
しかし、クラシックエディタは、文字サイズの変更ができません。

+ボタン→クラシックで検索→クラシックブロックを追加

太文字やイタリック、文字色の変更は可能です。
クラシックエディタで文字サイズを大きくしようとして、見出しを使用する方を見かけますが、やめておいた方が無難です。
文法としておかしいだけでなく、SEOの視点からも適切ではないからです。

クラシックエディタでは、文字サイズの変更にはプラグインが必要です。
Gutenbergでも、さらに多くの文字装飾が必要ならプラグインを導入しましょう。

様々な文字装飾を実現するTinyMCE Advanced

WordPressのテキストエディタで、最もポピュラーなのがTinyMCE Advancedです。
ほかのプラグインと同様にプラグイン→新規追加→TinyMCE Advancedでインストールし、有効化します。 設定画面は以下のようになっており、ドラッグ&ドロップで追加したい文字装飾などを追加します。

まとめ

WordPressで文字サイズ変更ボタンを設置や、デザイン全体の文字サイズを変えることはプラグインで解決します。
また、記事中の文字装飾も、適切なプラグインをインストールすればほぼこなせます。
プラグインで簡単かつ便利に、WordPressのカスタマイズを楽しんでくださいね。