ブログ

WordPressのブログのフォントを好みのものにする方法

更新日:

ワードプレスでブログを書いていて、フォントが気に入らないことってありませんか?
ただフォントを変えるだけなら、CSSを編集すればいいだけなんで簡単です。

今回やるのはちょっとマニア向け?
ワードプレスのテーマにフォントファイルを入れて、好みのフォントで表示する方法です!

ガラッと雰囲気が変わっておもしろいですよ〜!
コピペコードも用意したので、使ってみてくださいね( ´ ▽ ` )

全体の流れ

  1. フォントファイルを準備する
  2. 子テーマの中にフォントをアップロードする
  3. テーマ編集でコード入れる
  4. ブログ全体のフォントを指定する
  5. ブログを確認する

項目がたくさんに見えるけど、そんなに難しくないから付いてきてね〜!
Google Fontsを使う場合は1〜3は飛ばしてね!!

フォントファイルを準備する

.woffという形式のフォントファイルを使います。
ブログを商用利用してる場合はフリーフォントが使えないことも多いので利用規約をよく読みましょうね!

 

今回準備したのは、フロップデザインさんのフォントです。
日本語のフリーフォントが有名ですね。

ブログを商用利用している方は、有料版を購入しましょうね。
買うのは、ウェブフォントキットだよ。

商用利用しないなら、フリーフォントとして配布されているようです。
今回はこちらの日本語ウェブフォント フリーフォント(フロップデザイン)を使って説明するよ!

 

プラグインがいいわ〜って人やワードプレスにしか使わない人は
日本語ウェブフォント for ワードプレスプラグインを迷わず購入するんだ!(笑)
※こっちはウェブフォントキットと違って、1種類ごとの購入みたいです。

フロップデザインさんからフォントファイルをダウンロードします。
日本語ウェブフォント フリーフォント(フロップデザイン)

 

FLOPFONT-free.zipという圧縮フォルダを解凍する。
新しめのパソコンならダブルクリックで解凍できる(はず)。
ReadMe.htmlファイルをまずは読んでね!OK?

子テーマの中にフォントをアップロードする

使うファイルは、「flopdesin-kana.woff」です!
そう。かなファイルしかないとよ〜それで合ってる。大丈夫。

これを、ワードプレスの子テーマに入れるよ。

なんで子テーマに入れるかって?
あとの設定がわかりやすいから!

FTPソフトを開くべし。
エックスサーバー使ってたら、管理画面からもアップロードできるよ。
インフォパネル→ファイルマネージャーですね!

FTPと設定方法についてはこの記事をどうぞ(準備中)

※左側がローカル(自分のパソコン上)で右側がサーバーにあるファイルです。

ドメイン/public_html/ワードプレスをインストールしたフォルダ/wp-content/themes/子テーマ/
に「flopdesin-kana.woff」をアップロードします。
↑マークがアップロードのことが多いよ。

STORKを使ってたら、「jstork_custom」が子テーマです。
子テーマにアップしないと、テーマの更新で消えちゃうから気をつけて!

ブログカスタマイズは子テーマで!!基本ね。
jstork_custom(子テーマ)は公式サイトからダウンロードできるよ!

テーマ編集でCSSコードを入れる

ダッシュボード(管理画面)→外観→テーマの編集
使ってるテーマ(子テーマ)の名前と「スタイルシート」になっているかを確認。

このコードの1〜4行目までをコピペしてね。

ブログ全体のフォントを指定する

ブログ全体のフォントを指定するには、/*ブログ全体に使う場合*/以降をスタイルシートにコピペ。
見出し(h2タグ)用のコードも用意してみました。
一部にのみフォントを指定することもできます。

h2 の部分を各自で変えてもらえれば。

今回のファイルには「かな」しかないので、漢字部分は別のフォントで表示するように指定しています。

ここまで終わったら「ファイルの更新」をクリックします。

ブログを確認する

ブログのページに行って、更新マークを押すよ。
問題なければ、ブログのフォントが変わっているはずです。
キャッシュをクリアしても変わらなかったら・・・

  • フォントは子テーマにインストールできてる?(場所確認!)
  • CSSにちゃんとコピペできた!?(最後の}とか、抜けてない?)

このどっちかでミスしてることがほとんど!確認してみてね。

おしま〜い!

今回のコードの解説

  • 2行目でフォントの名前を設定(日本語も使えるよ)
  • 3行目でフォントファイルを読み込んでる
  • 7、11行目でブログの見た目に反映

です。
別のフォントでやる場合は、「flop」と「flopdesign-kana.woff」の部分を変更してね。

「flop」のところは、自分が分かればなんでもいいよ。
「flopdesign」でもいいし、カタカナで「フロップデザイン」でも大丈夫。
ただしカタカナやひらがななど英字以外の場合は、「’フロップデザイン’」みたいに「’」で囲むよ。
「flopdesign-kana.woff」の部分はファイル名をそのまま書いてね!

フリーフォントから.woffファイルを作る方法

フォントコンバーターを使って.otfや.ttfから.woffに変換することができるよ。

ただし、フリーフォントは規約をよ〜く確認してから使うようにしましょうね!

2017年7月9日追記

ワードプレスのテーマの変更に伴い、今はフォントを変更していません。

  • この記事を書いた人

ゆうこりん

システム手帳を活用して、暮らしをラクにする方法を模索する手帳ブロガー。 ブログは趣味。発信したい人が増えたので、ちょこっとお手伝いも。

-ブログ

Copyright© ゆころぐ , 2017 All Rights Reserved.