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に貼り付けて完了です。

ふい字を使う方法

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

コード内の「テキスト」の部分がふい字になります。

コードを貼り付ける場合は必ず「テキストエディア」に切り替えて貼り付けてください。

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

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

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

コード内の「h2」をh3やh4に変えて、それぞれの専用コードを作成するのもアリです。

これもCSSなので短縮化が可能ですが、呼び出しコードではないので表示のON・OFFができません。

CSSに反映させると全ての見出しがふい字に変わるので、コードに詳しい方は適宜改良してみてください。

まとめ

ふい字は手描き風のフォントで柔らかいイメージを与えるので、要所要所で使っていくと良いと思います。

また、今回ご紹介した方法を応用することで、他のフォントも使えるようになるので色々試してみて下さい。

それでは、今回はこの辺で。

ありがとうございました。

ﾁｬｵ(･∀･)！