このブログではフォントをちょっと変えています。
他にもいくつかブログを持っていて、そのほとんどのフォントをブログのテーマやジャンルに合わせて変えています。
これがもう、ものすごい楽しいんです。
ただフォントを変えるだけなのに、ブログの雰囲気がガラッと変わって見ていて楽しくなってきます。
見ていて楽しいとブログに愛着が湧いて記事を書く気が起きてくるので、生産性も上がります。
最初はちょっとめんどくさいですが、やることと順序さえ覚えてしまえば、いつでも簡単に
って感じで変えることができるようになります。
今回はそのやり方を丁寧に説明するので、「フォント変えてみたいと思ってた！！」という人はぜひ参考にしてみてくださいね。
Contents
WordPressブログのフォントを変更する方法
では、WordPressブログのフォントを変更する方法について説明します。
旅女子.comさんのこちらの記事を参考にさせていただきました！
参考記事 超初心者でもコピペでできちゃった8つの「Simplicity」のカスタマイズ
最初に全体の流れを把握し、その後に詳しいやり方を解説します。パッと見めんどくさそうに見えるけど、一回できれば次からは3分もしないうちにできるようになります。
フォントを変える全体の流れ
全体の流れはこちら
- フォントを選ぶ
- フォントファイルを変換
- サーバーにアップロードする
- CSSにフォント変更を書き込む
- 何度かリロードして確認する
この5つの手順でフォント変更は完了します。
自分の好きなフォントを選んだら、そのファイル形式を変換します。そしてそのファイルをサーバーにアップロードしたら、それを読み込めるようCSSを修正します。
そしてリロードしてフォントが変わっているのを確認できればOK！！
早速取り組んでみましょう
フォントを選ぶ
まずは、自分の好きなフォントを見つけましょう。
こちらのサイトがおすすめです。
参考サイト FONT FREE
たくさんのフォントがあり、迷うと思います。ブログ全体のフォントを変えることを前提としているので、クセが強すぎるものは避けた方が無難です。
中には、ある文字（複雑な感じなど）に対応していなかったり、同じ顔文字でもこちらのフォントでは表示されない、などということが起こる場合があります。
一度変更してみた後に必ず全体を見て表示されていない文字や顔文字がないか、確認してみてください。
ちなみに、かわいい雰囲気にしたい人におすすめのフォントはこちらです。
このあたりのフォントは適度に可愛くて読みやすいものばかりなので、何を選んでいいかわからなくなったら参考にしてみてください。
選んだら、ダウンロードします。デスクトップやDropboxなどにダウンロードしてzipファイルを解凍すると、「フォント名.ttf」というファイルが出てくるはずです。
次のところで、そのファイルの形式をTTFではないものに変換します。
フォントファイルを変換する
TTFファイルをWOFFファイルというものに変換します。
参考サイト WOFFコンバータ
上のサイトからダウンロードすることができます。普通に「WOFFコンバータ」と検索してみてもいいと思います。
こちらをダウンロード＆インストールしたら、起動します。（macの人はLaunchpadに入ってるはずなので、そこからクリックして起動します）
起動したら、以下のようにファイルを指定して、変換します。
しばらく待つと、「ファイル名.woff」というファイルができあがります。
サーバーにアップロードする
ここまで来たら、サーバーにさっきのWOFFファイルをアップロードします！
まだFTPソフトが入っていない人は、ダウンロード＆インストールしてください。
わたしが使っているのはFileZilla（ファイルジラ）というものです。macもWindowsでも対応しているはずです。使いやすいので、特にこだわりがなければぜひ使ってみてください！以下からダウンロードできます。
参考サイト FileZillaのダウンロード
起動したら、サーバーの情報を入れます。（レンタルサーバーの契約をした時に送られてくるメールに書いてあります）
クリックすると「Unknown certificate」というウィンドウが出てくるかもしれませんが、そのままOKをクリックすれば大丈夫です。
すると右側にドメインがバーッと出てくるので、その中からフォントを変えたいブログのドメインを選択し、ドメイン → public.html → wp-content → themes → テーマを選びます。（子テーマを導入している場合は子テーマの方を選んでください）
その場所に、先ほどのファイルをアップロードします。左側がローカル（自分側）なので、そこから先ほどのフォントのWOFFファイルを探し、右クリックでアップロードをクリックします。
これでサーバーへのファイルのアップロードは完了です！
CSSにフォント変更を書き込む
今度は、アップロードしたファイルを読み込めるようCSSを書き変えます。
WordPressのダッシュボードから、外観 → テーマの編集を選びます。
そうしたら、まずファイルを読み込むため以下のように記述をします。以下はフロップデザインというフォントを読み込んだ例です。
@font-face{
font-family:flop;
src:url('flopdesign.woff')format('woff');
}
「flop」のところは、自分が分かればなんでもいいです。「flopdesign」でもいいし、カタカナで「フロップデザイン」でも大丈夫です。ただしカタカナやひらがななど英字以外の場合は、「’フロップデザイン’」として「’」で囲むようにしてください。
「flopdesign.woff」のところは、先ほどのファイル名をそのまま書きます。
次に、フォントをブログ全体に適用するための記述をします。
body {
font-family:flop,YuGothic,'游ゴシック',
'Hiragino Kaku Gothic ProN',
Meiryo, '游ゴシック', sans-serif;
}
先ほどのfont-familyの横に記述したもの（この場合はflop）を書き込みます。ブログ全体ではなく見出しなどにだけ適用したい場合には、「body」を「h2」などに変えればOKです。
カタカナやひらがなで記述した時は‘フロップデザイン’の「’」を忘れないようにしてください。
最後に「ファイルを更新」をクリックして完了です。
何度かリロードして確認する
CSSの調整ができたら、ブログを実際に見てみましょう。
もしかしたら最初は読み込みがうまくいかなくて、もとのフォントのままかもしれません。何度かリロードして確認してみてください。
それでもうまくいかない場合は、だいたい以下のことが原因です。
- ファイルをアップロードする場所が間違っている
- CSSの記述が間違っている
わたしはCSSの記述のところで苦労しました。
間違いがなければ、ブログ全体のフォントが一気に変わるはずです。この瞬間が本当楽しいです
ぜひ試してみてください。
ブログの見た目はとっても大事
ブログのデザインや見た目が変わるだけで、印象はガラッと変わります。
可愛い感じにしたいのか、洗練された感じにしたいのか、シンプルな感じにしたいのか。ブログのジャンルやテーマによっても、合うフォントは変わってきます。
見た目に気を遣うと、読む人は「このブログちょっと手がかかってそうだな」「可愛い感じでずっと見てたくなるな」と感じて、より濃いファンになってくれるかもしれません。
もちろん中身も大事です。というか中身が一番大事です。でも、だからと言ってデザインはどうでもいいわけではありません。
中身もデザインも気を遣ってブログを大切にすると愛着が湧いてきて、ますます記事を書くのが楽しくなってきます
何事も、楽しいのが一番です！その一つのきっかけとして、フォントを変えるのは良い手段だと思います。
この記事が少しでも参考になれば嬉しいです。
ブログの他、TwitterとInstagramもやってるのでフォローしていただけたら嬉しいです！