WordPressでふい字を使う方法と手順【図解】

サイト作成に役立つツール・素材・HTML・CSS

久しぶりにこのブログで記事書きます。コメントへの返信とか別のブログは書いてますが、このブログへの記事はホント久しぶりです。

先日「ふい字」というフォントについての質問がありました。WordPressでふい字を使ってるけどどうやればいいの？という質問を頂いたのですが、これが結構面倒な手順が必要でコメント欄では回答しきれないと思ったので記事にしてみます。

ちなみにふい字ってフォントはこんな感じの手書き風のフォント。部分的に使うといい感じです。

もしかしたらプラグインとかでもっと簡単にできる方法とかもあるかもしれませんのでもしあるなら教えて下さい。

今回は私が行った手順で紹介してみますが、結構前の事だったのでやり方忘れてました（笑）すぐに記事にしとくべきでしたね。反省！

スポンサーリンク

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

先に大まかな手順を書いておきますと、

  • ふい字のダウンロード
  • フォントのフォーマットを変換
  • フォントファイルをサーバーにアップ
  • スタイルシートでふい字をセット

という感じの流れになります。なかなか手ごわいです。

ふい字置き場。でダウンロード

ふい字は「ふい字置き場。」でダウンロードする事ができますが、ダウンロードできるふい字には種類が４つあります。

  • ふい字
  • ふい字P
  • ふい字（軽量版）
  • ふい字P（軽量版）

通常ふい字のようなウェブフォントの場合、日本語なので、漢字、カタカナ、ひらがななど結構容量が大きいので重いです。なので私の場合は「軽量版」を使ってます。

軽量版の中にも通常のふい字と「ふい字P」というがあります。「ふい字」は等幅、「ふい字Ｐ」はプロポーショナルです。

MEMO

等幅というのは全ての文字の幅が同じ。例えば横に広い「Ｗ」と横にスリムな「I」でも同じ幅になります。

プロポーショナルは先程の例でいうとそれぞれの文字に合わせた幅というか調整されている感じです。

個人的にはプロポーショナルが好きなので「ふい字P（軽量版）」をダウンロードしました。

⇒ふい字置き場。

フォントのフォーマットを変換

ダウンロードしたフォルダ「HuiFontP109」を解凍すると「HuiFontP109.ttf」と「Readme.txt」というファイルがあります。

この辺詳しくないんですが、.ttfというがPC環境で一般的なフォーマットのようなのです。ブラウザによって対応してないものがあったりする？みたいな感じなので「.eot」「.woff」というフォーマットも作成する必要があるようです。

このフォーマットを作成するのに武蔵システムさんの「WOFFコンバーター」をダウンロードし、PCにインストールしました。

⇒WOFFコンバーター

フォーマットの変換

インストールしたWOFFコンバーターを起動して必要な項目をセッティングしていきます。

「変換前ファイル」の部分は参照をクリックして先ほどダウンロードしたふい字P（軽量版）の「HuiFontP109.ttf」を選択。

「変換後ファイル」は空白でOK。「WOFF2を作成する」「EOTを作成する」にチェックを入れて「変換開始」をクリック。

しばらく待つと「変換が完了しました」的なメッセージがでます。

ダウンロードしたふい字のフォルダの中を再度見てみると「.eot」「.woff」「.woff2」「.ttf」の4種類に増えてますよね。

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

変換したふい字のフォーマットは全てサーバーにアップします。

FTPもしくはファイルマネージャー等で子テーマ（私の子テーマはchild）のフォルダの所まで行きます。

「wp-content」⇒「themes」⇒「child（子テーマ）」と進み、この子テーマフォルダ（child）の中に「fonts」というフォルダを作成しました。

で、その作成したfontsというフォルダの中に先程の「.eot」「.woff」「.woff2」「.ttf」の４つのファイルをアップロード。

※この辺はフォルダとファイルを間違えないように注意して下さい。

スタイルシートでセッティング

サーバーにアップしただけでは使えませんので、スタイルシートでセッティングをしていきます。

子テーマのスタイルシート（CSS）に以下のコードを追加します。

/* ふい字 */

@font-face {
	font-family: 'hui';
	src: url('./fonts/HuiFontP109.eot'); /* IE9 Compat Modes */
	src: url('./fonts/HuiFontP109.eot?#iefix') format('embedded-opentype'), /* eof - IE6-IE8 */
             url('./fonts/HuiFontP109.woff') format('woff'), /* woff - Modern Browsers */
	     url('./fonts/HuiFontP109.ttf')  format('truetype'), /* ttf - Safari, Android, iOS */
	     url('./fonts/HuiFontP109.woff2') format('woff2');
        font-style: normal;
}
.huiji {
  font-family: hui;
  font-size:140%;
}

最後の「font-size:140%」ですが、ふい字がちょっと小さい？感じだったので大きさと通常の140%にしてます。この辺はお好みで変更して下さい。

以上でとりあえずのセッティングは完了です。

ふい字の使い方

先程スタイルシートで「huiji」という名前でふい字を使えるようにしたので、通常の文中で使う場合にはこのように書けばテキスト部分がふい字になります。

※ビジュアルエディタではなくてテキストエディタで書いて下さい。

<p class="huiji">テキスト</p>

テキストエディタを使う必要がありますが、ふい字をよく使うという方はプラグイン「AddQuicktag」を使うのがおすすめです。よく使うコードなどを登録しておき、ボタン１つで使えるようにできます。

ちなみに見出し「h2」とか「h3」とかにふい字を使いたいって場合にはスタイルシートで見出しの装飾コード（テーマによって違います）に 「font-family: hui;」を入れてあげればOKです。

例えばTwenty Twelveのテーマの場合だと以下のようなコードをスタイルシート（CSS）に追加すれば見出し（h2）がふい字になります。

.entry-content h2 {
  font-family: hui;
  font-size:140%;
}

後は上記スタイルシートの応用でサイドバーのタイトルとか、ブログのタイトルとかもふい字にする事ができますよ！

以上WordPressでふい字を使う方法と手順でした(^^)/

コメント

タイトルとURLをコピーしました