【Twenty Sixteenカスタマイズ】フォントを変更する方法

今回は、2015年末に公開されたWordpressの最新デフォルトテーマの「Twenty Sixteen」のカスタマイズTIPSです。

「Twenty Sixteen」に限らず、Wordpressのデフォルトテーマや海外無料テーマなどは、カスタマイズしないとフォントが明朝体になってしまいます。

タイトルなどに使われているゴシック文字と混じってしまい、統一感がない、、全部ゴシックで統一したい、、

WordPressカスタマイズで誰しも最初に通る道だと思います。

今回は、一通りのフォントカスタマイズについてお伝えします。

「Twenty Sixteen」の関連記事はこちらをどうぞ

WordPressデフォルトテーマ「Twenty Sixteen」が公開。その特徴とカスタマイズ性は？
【Twenty Sixteenカスタマイズ】フォントを変更する方法
【Twenty Sixteenカスタマイズ】ロゴを配置する・メニューを作成する方法
【Twenty Sixteenカスタマイズ】トップページにスライドショーを挿入する方法
【Twenty Sixteenカスタマイズ】トップページのタイトルを削除・見出しタグ（段落）を装飾する方法
【Twenty Sixteenカスタマイズ】コピーライト表記を書き換える方法
【Twenty Sixteenカスタマイズ】トップに戻るボタンを追加する
サイト公開前に必ず見てほしい、WordPressパーマリンク設定の基本

style.cssのfont-familyを編集する

「外観」＞「テーマの編集」より、style.cssを開きます。特に設定していなければ、「テーマの編集」を開けばstyle.cssが出ます。

開いたら、このボックスの中にある文章を適当なエディタへコピペしましょう。

直接編集してもいいのですが、バックアップの意味もありますので、できればエディタで編集したほうが良いです。

エディタなんかないよ！という方は、フリーソフトでダウンロードできます。シンプルなエディタでは以下のサクラエディタがおすすめです。

【フリーソフト】サクラエディタ 公式サイト（Windows）

今回編集するのは、

61行目の

html {
 font-family: sans-serif;
 -webkit-text-size-adjust: 100%;
 -ms-text-size-adjust: 100%;
}

290行目の

body,
button,
input,
select,
textarea {
 color: #1a1a1a;
 font-family: Merriweather, Georgia, serif;
 font-size: 16px;
 font-size: 1rem;
 line-height: 1.75;
}

となっている部分です。

赤字の部分がフォントを決定しており、

font-size: 16px;を変更すれば文字のサイズを変えられます。

line-height: 1.75;は行間です。数を増やせば行間の幅が広がります。

ゴシックフォントで統一したい場合は、赤字部分を以下に書き換えてください。

Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;

一方、明朝体で統一したい場合は、赤字部分を以下に書き換えてください。

"游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;

これでフォントが統一されているはずですし、最新Windows、Macから古いWindowsまで対応できているはずです。

とりあえずゴシックをみてみましょう。

はい、正しくゴシック表記されていますね。

明朝体も同じ要領になります。

文字の太さを変更する

これでもいいといえばいいのですが、個人的には文字が小さく、かつ細く少し読みにくい気がします。

そこで、文字の太さと大きさを変更したいと思います。

先ほどの290行目

body,
button,
input,
select,
textarea {
 color: #1a1a1a;
 font-family: Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
 font-size: 16px;
 font-size: 1rem;
 line-height: 1.75;
}

これを少し変更します。上記はフォントをゴシックへ変更したものになります。

body,
button,
input,
select,
textarea {
 color: #1a1a1a;
 font-family: Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
 font-size: 20px;
 font-size: 1rem;
 line-height: 1.75;
 font-weight: 600;
}

赤字部分が変更・追加した箇所です。

では見てみましょう。

いかがでしょうか。フォントが太くなり読みやすくなったと思います。

「font-weight」は文字の太さを示すコードで、400～700くらいの間で設定し、読みやすいフォントにするのが良いでしょう。

数が多いほど太くなります。

以上でフォントカスタマイズは終了です。

ブログを運用するにあたって、読みやすいフォントにするのは何よりも先に行うべき内容です。

「Twenty Sixteen」導入時にはまず試してみてくださいね。

「Twenty Sixteen」の関連記事はこちらをどうぞ

WordPressデフォルトテーマ「Twenty Sixteen」が公開。その特徴とカスタマイズ性は？
【Twenty Sixteenカスタマイズ】フォントを変更する方法
【Twenty Sixteenカスタマイズ】ロゴを配置する・メニューを作成する方法
【Twenty Sixteenカスタマイズ】トップページにスライドショーを挿入する方法
【Twenty Sixteenカスタマイズ】トップページのタイトルを削除・見出しタグ（段落）を装飾する方法
【Twenty Sixteenカスタマイズ】コピーライト表記を書き換える方法
【Twenty Sixteenカスタマイズ】トップに戻るボタンを追加する
サイト公開前に必ず見てほしい、WordPressパーマリンク設定の基本