KUSANAGI MAGAZINEで「きもおたわーどぷれす。」が紹介されました! クリックで公式サイトが開きます。

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

プラグインアイキャッチ
この記事は約5分で読めます。
記事内に広告が含まれています。

本記事ではプラグイン「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 様。
サイトはこちら。

https://raspi-diary.com/

(リンク切れ)

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

スポンサーリンク

Japanese Font for WordPressへのリクエスト

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

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

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

スポンサーリンク

まとめ

サイトやブログで手書き文字を使いたい場合、初心者だと結構ハードル高いよね
Japanese Font for WordPressは、その敷居を下げてくれるはず
よかったら使ってみて!

サイトを始めたい・引っ越したい方へ

おすすめレンタルサーバー「ConoHa WING」
Webサーバー処理速度 国内最速!
サイト管理・カスタマイズのタイパも抜群!
自動化AIのWEXALによって他社より負担を減らせます
各種キャンペーン施策によりコスパも抜群!
ConoHaに初めて入会かつ12か月以上のWINGパックなら
下のボタン経由で契約すると最大5000円の割引が受けられます

この記事を書いた人

素人の備忘録です。
素人がゆえにトラブルにぶつかりまくってきたので、同じように困った方の役に立てたらいいなと思ってます。
8年来のKUSANAGI推し。

元公安調査庁職員、発達障害(ADHD)

天満川 鈴をフォローする
カスタマイズ&プラグイン
タイトルとURLをコピーしました