WordPress 4.4.0用テーマ Twenty Sixteenのフォントを変更
日本語に合わないTwenty Sixteenテーマのフォントを変更する
メジャーアップデートとして革新的な進化を遂げたWordPressの新バージョン4.4.0。
合わせてリリースされた新しいデフォルトテーマTwenty Sixteenを使ってみた感想、全体的な使い勝手や評判はまずまずですが、一つだけ致命的にダサい部分が。
フォントです。
英語特化型のフォントのようで、日本語の表示がFireFoxだとなんだか野暮ったくて、メンドクサイという気持ちよりも変えたい気持ちが勝りました。
そんなわけで、当ページはすでにフォントをデフォルトから変更しています。
※ここから画像です。
※ここまで画像です。
フォントを変更する前のtwentysixteenデフォルトフォント
こちらの画像にあるのが、フォントを変更する前のデフォルトのフォント。
きちんと全体を見たわけではないのですが、どうやらfont-familyにはsans-serifやMontserratがあれこれのタグや場所にメインフォントとして指定されている模様。
これを変えるために実際にやったことが以下の通りです。
子テーマでフォントを変える方法 – タグ指定でフォント指定！
Twenty Sixteenのstyle.cssをざっとみたところ、結構あちこち細かい部分に上記のsans-serifやMontserratなどが指定されていて、
htmlに!importantでフォント指定してもうまく反映されませんでした。
結局書き込んだソースは下記の通り。
html, body, a, abbr, acronym, address, apple, big, blockquotet, caption, cite, code, dl, dt, dd, del, dfn, div, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, iframe, ins, kbd, label, legend, span, object, ol, ul, li, p, pre, q, s, samp, small, strike, strong, sub, sup, table, tbody, tfoot, thead, tr, th, td, tt, var {
font-family: Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}フォントは無難にゴシックで、可読性の高いと評価のあるものを適当に並べました。
好みのフォントに入れ替えていただいてもいいでしょう。
これをTwenty Sixteenの子テーマフォルダー内のstyle.cssの中に書きこんでアップしてしまいましょう。
Twenty Sixteenテーマのstyle.cssに直接書き込む方法
子テーマフォルダーを設定していない方や「 子テーマフォルダーって何？ 」ってなWordPress初心者な方は、Twenty Sixteenのテーマスタイルに直接書き込んでしまいましょう。
wp-contentフォルダー → themesフォルダー → twentysixteenフォルダー内のstyle.cssに上記ソースを書き込めばOK。
ただ、変なところに入れるとCSSがうまく反映されない可能性もありそう。
レスポンシブ用に @media で条件づけられている中に入れてしまうと、スマホでしかフォントが変わらないとか、特定の画面サイズでしか反映できない可能性があるんです。（そこまで細かく実験はしてないから実際どうかは…だけど）
何か所か実験してみましたが、一番下に追加する形で入れたらフォント指定が反映されていましたので、一番下に入れてしまいましょう。