初めてWordPressをインストールして、
ブウラザで自分のWordPressサイトを見た時、
ゴシック体と明朝体が入り交じるフォントに
違和感を覚えませんでしたか？
WordPressのフォントを変更してゴシックにしよう
WordPressの無料テーマの多くは海外の方が開発したもの。
それゆえ、フォントの指定が日本向きではないんですね。
なので、
WordPressテーマのスタイルシートのフォント指定を、
日本語フォントに変更するだけでも、
格段にサイトの見映えが良くなるのです。
WordPressのフォントを変更する方法と手順
WordPressでフォントをゴシック体に変える方法を
ご説明しますね。
※子テーマで書き換えてください。
子テーマを作っていない場合は、「style.css」を変更していきますので、必ずバックアップをテキストエディタに取ってから進めましょう。
1.
WordPressのダッシュボードから
「外観」のテーマ編集をクリック。
2.
「テーマの編集」の中（右メニュー）から
「スタイルシート（style.css）」をクリック。
3.
スタイルシートを開いたら、右上の検索窓で
「Ctrl + F」でシート内を検索します。
「font-family」と入力。
4.
検索結果の３番め、
テキストエディタでいうと307行目あたりに
以下の記述がありますね。
—-
body,
button,
input,
select,
textarea {
color: #1a1a1a;
font-family: Merriweather, Georgia, serif;
font-size: 16px;
font-size: 1rem;
line-height: 1.75;
—-
5.
上記の「font-family」の記述を
好みのゴシックフォントに指定（変更・修正・記述）します。
例えばこのように。↓
—-(1)
font-family: “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif;
—-
今現在このサイトは
—-(2)
font-family: “メイリオ”,Meiryo,”ヒラギノ角ゴ Pro W3″,Hiragino Kaku Gothic Pro,”ＭＳ Ｐゴシック”,sans-serif;
—-
にしてあります。
6.
最後です。
記述を指定（変更・修正・記述）したら、
左下の「ファイルを更新」をクリック。
サイトを表示して確認しましょう。
WordPressでフォント変更 CSS具体例
ところで、
font-family:
から右側には何が書かれていると思いますか。
上記(1)(2)の2例から想像してみてください。
↓
↓
【質問】 font-family:より右側って何？
【答え】 フォントをどのような優先順位で指定するか、
というCSSコードです。
sans-serifは英語でゴシック体の事を、
serifは明朝体の事を指します。
それでは、
ゴシック体のCSSコードの例、いくつかまとめてみましょう。
—-(1)
font-family: “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif;
—-
—-
font-family:Helvetica , Arial , Verdana , Roboto , “游ゴシック” , “Yu Gothic” , “游ゴシック体” , “YuGothic” , “ヒラギノ角ゴ Pro W3” , “Hiragino Kaku Gothic Pro” , “Meiryo UI” , “メイリオ” , Meiryo , “ＭＳ Ｐゴシック” , “MS PGothic” , sans-serif;
—-
—-
font-family: “Lato”, “ヒラギノ角ゴシック Pro”, “Hiragino Kaku Gothic Pro”, ‘メイリオ’ , Meiryo , Osaka, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif;font-family: Arial,Helvetica,”游ゴシック”,YuGothic,”Hiragino Kaku Gothic ProN”,Meiryo,sans-serif;
—-
—-
font-family: “Lucida Grande”, “segoe UI”, “ヒラギノ丸ゴ ProN W4”, “Hiragino Maru Gothic ProN”, “メイリオ”, Meiryo, Verdana, Arial, sans-serif;
—-
いかがですか。
工夫次第でいろいろ作れますね。
フォントの優先順位を念頭におきながら、
ご自分のお好みを探してみてください。
まとめ
まずはトライ！
CSSの修正は、テキストエディタのバックアップがあれば安心です。
※初心者さんはCSSをいじるのも、
テキストエディタでやって、
それをコピペする方が安全と思われます。
ちなみにテンプレートのアップデートが有った場合は、
設定が元に戻ってしまいますのでご注意を。
その時はまた再設定してくださいね。