Japanese Font for TinyMCE ~手軽に記事に手書きフォントなどを導入できるプラグイン

この記事は約5分で読めます。

WordPressプラグイン

本記事ではプラグイン「Japanese Font for TinyMCE 」(以下、JFT)を紹介します。
JFTを導入すれば、ビジュアルエディタをお使いの場合、手軽に記事内で手書きフォント等を使うことができます。
特にWordPress初心者向け。
「記事に他サイトと違ったフォントを使って個性を出したいけど、フォントの導入方法がよくわかんない」とか「めんどくさい」とか思っている方には重宝するプラグインだと思います。

スポンサーリンク

Japanese Font for TinyMCEとは?

Japanese Font for TinyMCEの機能

JFTは「Tiny MCE Advanced 」の拡張プラグイン。
従って、同プラグインのインストールが利用の前提となります。
と言ってもビジュアルエディタで記事を書くなら必須といっても過言ではないプラグイン。
入れてない場合は入れることを推奨します。

具体的な機能は、

ビジュアルエディタに(プラグインに実装されている)各種日本語フォントを追加する。 

Japanese Font for TinyMCEの利用法

利用法その1

通常、外部フォントを読み込むためには個別の設定が必要となります。
本ブログでも以下の記事で扱っています。

しかしこうした作業が「煩わしい」とか「難しい」という方も多いでしょう。
WordPress初心者でも記事内で外部フォントをお手軽に導入して使うことができるのがJFTの長所。
需要は結構あるのではないかと思います。

利用法その2

こちらは中級者以上向け。
JFTは「フォントのテスト用」にも使えます。
実際にフォントを設定するまでは、具体的にどんなイメージになるかわかりません。
最初からサブセット化などの作業をするのは少々億劫なものがあります。
JFTがあれば(下記にのフォントに限りますが)事前に試してみることが可能です。

CSSがある程度わかる方なら、記事以外でもフォントを使うことができます。
japanese-font-for-tinymceフォルダ内のaddfont.cssに設定があるので、style.css内で指定すればOK。
詳しくは後述します。

Japanese Font for TinyMCEに実装されているフォント

タイトルでは「手書きフォント」としていますが、その他のフォントも入っています。
具体的には以下の通り。

  • ふい字フォント
  • Noto Sans Japaneseの普通
  • 同細字
  • 同太字
  • エセナパJ
  • ほのか丸ゴシック

どのようなフォントかは下記画像を御参照ください。

ふい字フォントは弊サイトでもタイトルや見出しなどに使っています。

Japanese Font for TinyMCEの導入・使い方

1 Tiny MCE Advancedをインストールする

なくても一部フォントは使えるらしいですが、どうせですので入れておきましょう。

2 JFTをインストールする

テンプレですが、一応書いておきます。

WordPress管理者画面サイドバーのプラグインをクリック
→新規追加をクリック
→プラグインを検索
→インストール

特に設定などは必要ありません。
インストール完了時点で使えるようになっています。

3 記事内で使う場合

方法は通常のビジュアルエディタのフォント指定と同じ(あくまで拡張プラグインですので)。
具体的には下記画像を見て下さい。

4 記事以外の場所へ使う場合 

JFTのaddfont.cssにおけるフォントの設定は次の通り。

  • ふい字フォント:Huifont
  • Noto Sans Japaneseの普通:Noto Sans Japanese
  • 同細字:Noto Sans Japanese-100
  • 同太字:Noto Sans Japanese-900
  • エセナパJ:esenapaj
  • ほのか丸ゴシック:honokamaru

この中から使いたいフォントを選んで、style.cssに記述することで適用させます。
例えば弊サイトのタイトルに「ほのか丸ゴシック」を使いたい場合は、

.sitename{
 font-family: 'honokamaru' ;
}

必要に応じて「!important」を加えます。

プラグインの作者様

@raspi0124 様。
サイトはこちら。

私とは「小説家になろう」繋がり。
活動報告にコメントいただいて見に行ってみたらWordPressのプラグインを作っていらっしゃった次第です。
先述の通り、特にWordPress初心者にとっては需要がありそうなので紹介させていただきました。

Japanese Font for TinyMCEへのリクエスト

作者様サイトのプラグイン説明ページ に「新しく導入してほしいフォント」のアンケートがあるので、私からのリクエストを記しておきます。

  • 手書きフォントとして利用者の多い「たぬきゴシック」など
  • 商用OKの明朝フリーフォント

あと、作者様のページにもありますが、ロードするフォントの選択機能は実装してほしいところです。
その上で選択可能なフォントを増やせば利用者も増えると思います。

まとめ

解答者の写真
サイトやブログで手書き文字を使いたい場合、初心者だと結構ハードル高いよね。
JFTは、その敷居を下げてくれるはず。
特に「ふい字フォント」は本サイトでも使ってるくらい有名な手書きフォント。
これを簡単に試せるだけでも入れる価値はあると思う。
フォントの数や機能面で発展途上な面はあるけど、そこは今後に期待ということで。
よかったら使ってみて!