Japanese Font for WordPress ~初心者でも手軽に手書きフォントなどを導入できるプラグイン

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

2018-01-15WordPressプラグイン

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

Japanese Font for WordPressの機能

JFWは「Tiny MCE Advanced 」の拡張プラグインです。
従って、同プラグインのインストールが利用の前提となります。

ただしTiny MCE Advancedはビジュアルエディタを使うなら必須と言いうるプラグイン。
恐らく、多くの方が入れているでしょう。

解答者の写真
JFWの具体的な機能は、ビジュアルエディタに各種日本語フォントを追加するものです
手書きフォントなども予め入っています
 

また、CDNを活用することによって、外部フォントを利用する際にネックとなる速度低下にも対策がとられています。

Japanese Font for WordPressの利用法

利用法その1

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

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

利用法その2

こちらは中級者以上向け。

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

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

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

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

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

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

ふい字フォントは弊サイトでもタイトルや見出しなどに使っています。
(執筆当時、現在は使っていません)

Japanese Font for WordPressの導入・使い方

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

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

2 JFTをインストールする

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

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

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

3 記事内で使う場合

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

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

JFWの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 WordPressへのリクエスト

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

  • 手書きフォントとして利用者の多い「たぬきゴシック」など(→実装された様子です)
  • 商用OKの明朝フリーフォント

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

まとめ

解答者の写真
サイトやブログで手書き文字を使いたい場合、初心者だと結構ハードル高いよね
Japanese Font for WordPressは、その敷居を下げてくれるはず
よかったら使ってみて!
 
※当サイトの会話アイコンはカスタムキャストで作成しています。©2018-2019 Custom Cast, Inc.
この記事を書いた人:天満川 鈴

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。

ADHD、精神障害者手帳3級所持。

慶應義塾大学商学部→国家一種経済職→公安調査庁。
在職時は国際テロ、北朝鮮を担当。

「小説家になろう」の底辺作者。
朝鮮総聯へのスパイ工作を描いた小説「キノコ煮込みに秘密のスパイスを」はアマチュア小説ながら週刊誌報道され、話題となった。

Posted by 天満川 鈴