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

By Cocoa編集部 • 1年前

2月
2016

2016_0225_05

今回は、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を編集する

2016_0225_06

「外観」＞「テーマの編集」より、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まで対応できているはずです。

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

2016_0225_07

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

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

文字の太さを変更する

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

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

先ほどの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;
}

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

では見てみましょう。

2016_0225_08