WordPressで「ふい字」を使う方法！

こんにちは、リュウセイです。

今回は、WordPressで手書き風のフォント「ふい字」を導入する方法についてご紹介していきます。

ふい字は無料でダウンロードできるので、ダウンロードしたふい字をWordPressで使えるようにする方法について書きます。

WordPressでふい字を使うための手順

「ふい字置き場。」からダウンロードする

「ふい字置き場。」からダウンロードできるふい字は以下の4つの種類があります。

サーバーにフォントをアップロードするので、なるべくならファイルサイズが軽量のものを使いたいです。

なので今回は「ふい字P(軽量版)」をダウンロード＆アップロードしていきます。Pはプロポーショナル(文字間隔を調整して読みやすい文字列になるよう調整されたフォント)という意味です。

①「ふい字置き場。」からふい字P(軽量版)をダウンロードする

②ダウンロードしたら解凍をする

すると以下の表示になるはずです。

「HuiFontP 109」を開くとこうなります。

HuiFontP 109のファイルしかないですが、これだけだと対応していないブラウザには表示されないみたいです(この辺はあまり詳しくありません)。

そのため、次に紹介するフォントフォーマット変換ソフトを使って、「eot」「wolf」「wolf2」のフォーマットを追加していきます。

やり方は全く難しくありません。

「WOFFコンバーター」をインストールして変換する

それでは、フォーマット変換ソフト「WOFFコンバーター」をPCにインストールしていきましょう。

ちなみにWindowsソフトなので、Macの方は個別で探して下さい。

インストールしたら起動して、変換したいファイルを指定し、以下の通りにチェックを入れて変換していきます。

変換が正常に完了すればOKです。

するとこうなります。

後にサーバーへアップロードする際にやりやすいように「fonts」というフォルダを作って、その中に「Readme(テキストドキュメント)」以外のファイルを入れておきます。

サーバーにふい字をアップロードする

次は、先ほど作成した「fonts」をサーバーにアップロードしていきます。

FTPもしくはファイルマネージャー等で、子テーマのフォルダに「fonts」をアップロードしていきます。

流れは以下の通り(FFFTPでやってます)。

子テーマのCSSに記述する

最後の下準備です。

以下のコードを子テーマのスタイルシート(style.css)の一番下に記述してください。

また、CSSやJavascriptなどは短縮化させることが可能で、コードの呼び出しを軽くしてサイト表示速度への影響を少なくできます。

短縮化のデメリットとしてはコードの編集が難しくなる点ですが、元のコードを保管しておけば問題ないので検討してみてください。

CSS Minifier (スタイルシートの圧縮)

「縮小前のコード」欄に上記コードをそのまま貼り付ければ、自動的に縮小されたコードが右欄に表示されるので、それをCSSに貼り付けて完了です。

ふい字を使う方法

以上の下準備が全て完了したら、後はふい字を挿入したい箇所に以下の呼び出しコードを書けば反映されます。

コード内の「テキスト」の部分がふい字になります。クラシックエディタなら「テキストエディタ」、ブロックエディタなら「HTMLとして編集」に切り替えてからコードを貼り付けるようにしましょう。

ふい字をよく使うという方は、WordPressプラグイン「AddQuicktag」を使って、ふい字コードを登録してボタン一つで呼び出せるようにすると便利です。

また、通常のテキストだけでなく、h2やh3などの見出しにもふい字を使うことが可能です。

その場合のコードは以下の通りです。

コード内の「h2」を変えることで見出しを調整できます。

それでは、以上です。
ありがとうございました。