こんにちは！
nyaです。
自分好みのフォントに変えたい” img=”https://nyaaalog.com/wp-content/uploads/2020/04/shoshinsya-san.png”]
本日はこんなお悩みを解決していきます。
私はこのブログのフォントを変えています。さらに他のブログを運営していてそのブログのテーマやジャンルに合わせてフォントを変更しています。
フォントを変えるだけでブログの雰囲気がガラッと変わるので見ているだけで楽しくなってしまいますよ。
最初は少し面倒くさくてわからなくて何度も躓きましたが、手順さえ覚えてしまえばいつでも簡単にブログのイメチェンができますよ。
この記事を読むことで、
[code_balloon position=”right” name=”わたし” text=”そろそろフォント変えたいな〜” img=”https://nyaaalog.com/wp-content/uploads/2020/04/profile.png”]と思えばすぐに気軽に変えることができるようになりますよ。
今回はWordPressブログで簡単にフォントを変更する手順を丁寧にわかりやすく解説していくので、「フォントを変えてみたい！」という方はぜひ参考にしてくださいね。
WordPressブログのフォント変更方法
WordPressブログでのフォントの変更する方法を解説していきますね。
まず最初に流れを把握してください。そのあとに詳しい手順を解説していきます。全然難しい作業ではありません。慣れてくると5分程度で設定できるようになるのでぜひ習得してください。
初めてCSSを扱う際は必ずバックアップを取ってから取り組みましょう。
フォント変更の手順
- フォントを選ぶ
- フォントファイルを変換する
- サーバーにアップロードする
- CSSにフォント変更を書き込む
- リロードして確認する
この手順でフォントを変更していきます。では早速変更していきましょう。
フォントを選ぶ
まずは自分好みのフォントを探してみましょう。
無料のフォントが揃っているコチラのサイトがおすすめです。
FONT FREE
かなりたくさんのフォントが揃っているので迷うと思いますが、ブログ全体のデザインをイメージしてシンプルなものを選びましょう。
クセが強いフォントだと文章にした時に読者が読みにくくなってしまいます。また、漢字に対応していないフォントがあったり、文字化けしたりする場合があります。
一度変更した後に全体の雰囲気をみて確認すると良いですね。
ちなみに私が良いなと思うフォントをまとめてみました。参考にしてみてください。
《かわいい系のフォント》
《かっこいい系のフォント》
このあたりだと適度に個性を出しつつ読みやすいフォントかなと思います。多すぎてどのフォントを選んで良いかわからないときの参考になればと思います。
お気に入りのフォントを選んだら、ダウンロードします。デスクトップやDropboxにダウンロードしてzipファイルを解凍しましょう。
解凍が完了すると「フォント名.ttf」というファイルが出てくるはずです。
このTTF形式のファイルを変換していきます。
フォントファイルを変換する
次はTTF形式のファイルをWOFFというファイルに変換していきます。
コチラのサイトからコンバータという変換ソフトをダウンロードします。
武蔵システム
コチラのサイトでコンバータをダウンロードしてインストールしてください。完了したら起動してましょう。
※MacユーザーはLaunchpadに入っています
起動できたら下の図のようにファイルを指定して変換していきましょう。
しばらくすると「ファイル名.woff」というファイルが出来上がると思います。それを任意の場所に保存しておきましょう。
サーバーにアップロードする
次は先ほどのWOFF形式ファイルをサーバーにアップロードしていきます。
もし、FTPソフトが入っていない方はダウンロードしておきましょう。
私がおすすめするのはコチラのソフトです。
FileZIlla(ファイルジラ)
コチラのFileZillaはMacでもWindowsでも対応可能なのでぜひ使ってみてください。
起動したら、サーバーの情報を入力していきます。
左から、「ホスト名」「ユーザー名」「パスワード」です。
サーバーの情報がわからない時は、レンタルサーバーを契約した時に送られてきたメールを確認してみてください。
「Quickconnect」ボタンを押すと「Unknown certificate」というウィンドウが出てきます。そのままOKをクリックしましょう。
クリックすると、右側にドメインがたくさん出てくると思います。その中からフォントを変えたいブログのドメインを選択しましょう。
ドメイン→public.html→wp-content→themes→テーマ
※子テーマを導入している人は子テーマを選択してください。
選択できたら先ほどのWOFF形式のファイルをアップロードします。左側からファイルを探し右クリックで「アップロード」を選択。
これでサーバーへのファイルのアップロードが完了しました。
CSSにフォント変更を書き込む
次は、アップロードしたファイルをCSSに書き換えます。
WordPressのダッシュボード→外観→テーマの編集へいきます。
そこに以下のように記述します。
@font-face {
font-family:フォント名;
src:url(‘ファイル名.woff’)format(‘woff’);
}
フォント名は自分のわかりやすい名前でOKです。英語の場合はそのままでOKですが、ひらがなやカタカナにする場合は、「’」で囲んでください。
次に、フォントをブログに適用するために、以下のように記述してください。
body {
font-family:フォント名,YuGothic,'游ゴシック',
'Hiragino Kaku Gothic ProN',
Meiryo, '游ゴシック', sans-serif;
}
もし、ブログ全体ではなく、見出しのみに適用したい場合は、「body」の部分を「h2」や「h3」に変えてください。
先ほど、フォント名をひらがなやカタカナにした方は「’」を忘れないようにしてくださいね。
できたら「ファイルを更新」をクリックして完了です。
リロードして確認する
完了したらできているか確認してみましょう。
もし、読み込みがうまくできてなくてフォントが変更されていなければ何度かリロードをして確認をしてみてください。
それでも変更されない場合は以下のことを確認してください。
- ファイルをアップロードする場所
- CSSの記述
初めてCSSを扱う際は必ずバックアップを取ってから取り組みましょう。
まとめ：ブログのデザインを大事にしよう
いかがだったでしょうか。
初めは分からずに悩まれる方が多いかもしれません。私も「なんで上手くいかないの」と何度も諦めました。やっとできるようになったのは1週間後でした。
しかし、最初の設定さえできれば今後は簡単に気軽に変更できるようになるので、設定しておくことをおすすめします。
ブログの記事の構成なども大切ですが、見た目のデザインも大事です。
配色だけではなくフォントをこだわるだけでも結構読みやすくなります。デザインにこだわることで自分のお気に入りのブログが成長していくのはとても楽しいですしね。
そのきっかけの一つとしてあなたもフォントを変えてみませんか？
コメント