WordPressのフォントを変更して印象をガラッと変えてみよう

WordPress の見た目を変えるときに、まず思いつくのはテーマの変更ですが、その次にはなにが思い浮かびますか?

特にこれといったものは思い浮かばないですよね。

そこでおすすめしたいのがフォントの変更です。フォントを変えるとブログの印象もガラッと変わります。WordPress のフォントについて詳しく書かれている記事はあまり見たことがないと思いますので、今回は WordPress のフォントについての情報を集めてみました。

フォントを変更するために


通常は ダッシュボード > 外観 > テーマの編集 で、style.css を編集することでフォントを変えることができますが、この方法はテーマに依存してしまう上に、間違った部分を変更してしまうとブログのデザインに影響を与えてしまうことがあります。

子テーマを用意して編集を行うと安全ですが、どうにもめんどくさい!というわけでこの記事ではテーマに依存せず、独自の CSS を追加する形で、簡単にフォントの変更が行える方法を紹介します。

Simple Custom CSS and JS というプラグインを利用しますので、インストールしたことがない方は、以下のページを参考にインストールしてみてください。

WordPressに自作のCSS・JavaScript・HTMLを追加するには?

フォントを変更する


1. フォントを変更してみよう

Simple Custom CSS and JS をインストールしたら、ダッシュボード > Custom CSS & JS > Add Custom CSS を選んでください。

画像のページに移動したら、タイトルに Font と入力して、下にあるフォームの /* */ に囲まれた赤文字の英文はすべて削除、そして以下のコードをコピーして貼り付けてください。

そして右側にある 公開 ボタンを押すと、ブログのフォントが変更されます。これは WordPress のフォントを 游ゴシック というフォントに変更して、文章の行間を広げるスタイルシートです。

 

デフォルトのフォント

遊ゴシック

他のフォントに変更してみよう!


1. さきほど入力した CSS を編集する

ダッシュボード > Custom CSS & JS > All Custom Code で、Font 欄の 編集 を押してください。

 

2. フォントを変更する

フォームが再度表示されますので、’游ゴシック’, ‘Yu Gothic’, を削除して、’MS UI Gothic’ を代わりに入力してみましょう。

 

MS UI Gothic

また違ったフォントになりましたね。こんな感じで変更したいフォントに変えることが出来ます。フォントは以下のサイトからピックアップしてください。

font-familyで指定できるフォント名一覧

フォントを指定するときのコツ


フォントはどの環境でも同じものが表示されるというわけではありません。Windows と Mac それぞれでしか表示できないフォント、iOS と Android のスマホでも違いがあるので、アクセスする人によってブログのフォント表示が変わることはよくあります。

Windows と Mac の両方に対応しているフォントもあるのですが、同じフォントなのに名前が変わっていたりするので、それぞれの名前を指定しなければならなかったりします。

例えばメイリオというフォントですが、’メイリオ’, Meiryo, この2つを記述しなければなりません。片方だけだと、どちらか片方の環境でしか表示されなくなります。

フォントはそれぞれの環境で独自に発展しているので、すべての環境で文字を綺麗に表示したい場合はちょっとした知識が必要になります。

font-family というワードで検索サイトを調べてみてください。詳しい方がおすすめのフォント指定法を掲載してくれています。

このブログのフォント指定


このブログでは現在、以下のようなフォント指定になっています。

body {
  font-family: -apple-system, BlinkMacSystemFont, 'メイリオ', Meiryo, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', sans-serif !important;
}
.entry-content p {
  line-height: 1.8em;
}

-apple-system, BlinkMacSystemFont, は Apple の純正フォント San Francisco が表示される設定で Mac や iOS 環境でアクセスした場合は、優先的にそれを表示してくださいと指定しています。font-family は先に記述したフォントが優先で表示されます。

そして ‘メイリオ’, Meiryo, ‘ヒラギノ角ゴ ProN W3’, ‘Hiragino Kaku Gothic ProN’, これらは Windows と Mac の環境で人気のあるフォントで、とりあえず綺麗に表示するための無難なフォント指定といえます。

sans-serif これは最後の砦のようなフォントで、先に指定したどのフォントもない場合は sans-serif (ゴシック体)をとりあえず表示してくださいという表記です。必ず最後に載せておきましょう。

!important WordPress でフォントを指定するときに重要になるのが、この表記です。他のスタイルシートよりも、このスタイルシートのフォント指定を優先してくださいという指定になります。強引にこれを使って!と勧めているような感じですね。

.entry-content これは WordPress の記事に使われているスタイルシートのクラス名です。その後に p と書かれていますが、これは <p> タグを表しています。WordPress では文字を表示するときに <p> タグで囲んで表示します。よってこの表記は、記事内の <p> タグだけにスタイルシートを当ててくださいという意味になります。

line-height: 1.8em; これは文章の行間を設定する記述で、この数字が大きいほど行間が広くなります。16px こんな風にピクセルでも指定できます。数字を変えながら適切な行間を見つけてください。

とりあえず上のコードをコピペして、他に気に入ったフォントが見つかったら、font-family の前の方に追加していく方法が簡単だと思います。

最後に


フォントはもちろん行間を調整するだけでも、ガラッと印象が変わりますので、ぜひ試してみてくださいね。

どの環境でも同じフォントを表示したい場合は、Webフォントを使うという選択肢もあります。こちらのページで詳しく解説していますので参考にしてください。

WordPress – Webフォントの使い方

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)