Skip to content
さきどりふぁくとり~
プラグインインストール
GoogleAnalytics
GoogleAdsense
jQuery

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

更新日:2020年2月25日

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

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

目次

  • 1 WordPressで文字サイズを変更したい3つのケース
    • 1.1 1、読者が文字サイズの大中小を選択できるようにしたい
    • 1.2 2、テーマの文字サイズが不満なので変更したい
    • 1.3 3、記事中で強調のために文字サイズを変更したい
  • 2 文字サイズの大中小を読者が選択するWordPressプラグイン
    • 2.1 WP-chgFontSizeのインストールと使い方
  • 3 【上級者向け】プラグインに頼らず文字サイズ変更ボタンを設置
    • 3.1 jQueryファイルのダウンロードと設置
    • 3.2 jQueryライブラリの読み込みとコード
    • 3.3 文字サイズ変更リンクの設置
  • 4 文字サイズをCSS不要で変更できるWordPressプラグイン
    • 4.1 Visual CSS Style Editorを使用する前に子テーマをインストール
  • 5 Visual CSS Style Editorのインストールと使い方
    • 5.1 Visual CSS Style Editorインストール
    • 5.2 Visual CSS Style Editorの使い方
    • 5.3 Visual CSS Style Editor無料版でのCSS変更方法
  • 6 記事中で文字サイズ変更する方法
    • 6.1 最新のWordPressのエディタGutenbergで文字サイズ変更
    • 6.2 なじみ深いクラシックエディタでの文字サイズ変更
    • 6.3 様々な文字装飾を実現するTinyMCE Advanced
  • 7 まとめ

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

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

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

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

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

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

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

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

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

WP-chgFontSizeのインストール

  1. WordPress管理画面にログイン後、プラグイン→新規追加
  2. WP-chgFontSizeを検索し、インストールしたら有効化

WP-chgFontSizeの設定と設置

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

  1. Chromeで大きくしたい要素を、デベロッパーツールで確認する
  2. WP-chgFontSize設定画面のDIV Base Element項目に、大きくしたい要素を設定
  3. 文字の最大サイズ、最小サイズを設定

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

  1. 拡大したいテキスト上(記事本文など)で右クリック+I
  2. 要素名をコピーしておく

拡大したいテキスト上で右クリック+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のカスタマイズを楽しんでくださいね。

関連記事

WordPressのプラグインで月額課金を実装する方法【継続課金の仕組み作り】

WordPress

WordPressプラグインで口コミ機能を実装する方法

WordPress

WordPressで画像をアルバムみたいに表示するギャラリープラグイン

WordPress

【プラグイン自作】WordPressプラグインの作り方を丁寧に解説

WordPress

プロフィール

ブログ著者:
株式会社ルミナスネットワークス
https://www.luminous-networks.co.jp

Webページ制作およびWebアプリケーションの設計~製造に至るまでをすべて通貫して行う独立系SIerです。
弊社はWebマーケティングに強いSIerとしての地位目指し、WEBページを制作することだけでなく、その先のWebマーケティングにも関係する内容を取り扱うことで、高いコストを掛けて制作したWEBページが無駄にならないようお客様を導くことを目標としております。 YouTubeマーケティングやその他SNSについても幅広い知見をもとにお客様をサポートして参ります。

本ブログで記載している内容は、必要に応じて環境を構築し、実際に調査・検証を行っており、より再現性・統計的な正当性の高いデータを目指したものとなっております。
参考にして頂けましたら幸いです。

投稿されている記事に関しまして、もっと深く知りたいという事がございましたら、無料で相談を受け付けておりますのでご遠慮無くお問い合わせください。

お仕事のご依頼・お問い合わせ

最近の投稿

  • YouTube広告の再生時間などの指標を見る方法は?
  • YouTubeの広告で動画再生数を伸ばす方法の解説と単価
  • YouTubeへ広告を出す効果やメリット、広告の出し方を解説
  • YouTubeの広告が効果なしになる原因と対策を解説
  • YouTuberになるのに必要なビデオカメラや機材を紹介

カテゴリー

  • conohaWING (1)
  • JavaScript (3)
    • jQuery (3)
  • PHP (2)
  • SEO (18)
  • Webマーケティング (3)
  • WordPress (62)
    • Favicon (5)
    • インストール (2)
    • プラグイン (33)
    • 使い方 (1)
  • YouTube (29)
    • アナリティクス (4)
    • 副業 (2)
    • 動画制作 (3)
    • 収益化 (12)
      • 審査 (2)
      • 著作権 (1)
      • 設定 (3)
        • スマホ (1)
    • 広告 (6)
  • おすすめの書籍 (1)
  • お名前ドットコム (1)
  • アクセスアップ (5)
  • アクセス解析 (5)
    • GoogleAnalytics (4)
  • アフィリエイト (11)
  • プライバシー・ポリシー (1)
  • マネタイズ (16)
    • GoogleAdsense (10)

アーカイブ

  • 2021年4月 (4)
  • 2021年3月 (5)
  • 2021年2月 (10)
  • 2021年1月 (4)
  • 2020年12月 (5)
  • 2020年8月 (20)
  • 2020年7月 (26)
  • 2020年6月 (6)
  • 2020年5月 (2)
  • 2020年4月 (10)
  • 2020年3月 (11)
  • 2020年2月 (10)
  • 2020年1月 (15)
  • 2019年12月 (1)
  • 2017年12月 (2)
  • 2017年11月 (1)

目次

  • 1 WordPressで文字サイズを変更したい3つのケース
    • 1.1 1、読者が文字サイズの大中小を選択できるようにしたい
    • 1.2 2、テーマの文字サイズが不満なので変更したい
    • 1.3 3、記事中で強調のために文字サイズを変更したい
  • 2 文字サイズの大中小を読者が選択するWordPressプラグイン
    • 2.1 WP-chgFontSizeのインストールと使い方
  • 3 【上級者向け】プラグインに頼らず文字サイズ変更ボタンを設置
    • 3.1 jQueryファイルのダウンロードと設置
    • 3.2 jQueryライブラリの読み込みとコード
    • 3.3 文字サイズ変更リンクの設置
  • 4 文字サイズをCSS不要で変更できるWordPressプラグイン
    • 4.1 Visual CSS Style Editorを使用する前に子テーマをインストール
  • 5 Visual CSS Style Editorのインストールと使い方
    • 5.1 Visual CSS Style Editorインストール
    • 5.2 Visual CSS Style Editorの使い方
    • 5.3 Visual CSS Style Editor無料版でのCSS変更方法
  • 6 記事中で文字サイズ変更する方法
    • 6.1 最新のWordPressのエディタGutenbergで文字サイズ変更
    • 6.2 なじみ深いクラシックエディタでの文字サイズ変更
    • 6.3 様々な文字装飾を実現するTinyMCE Advanced
  • 7 まとめ
Copyright © 2019 さきどりふぁくとり~ All Rights Reserved.