WordPressのフォントを変更してゴシック体にする方法

初めてWordPressをインストールして、
ブウラザで自分のWordPressサイトを見た時、
ゴシック体と明朝体が入り交じるフォントに
違和感を覚えませんでしたか?

スポンサードリンク
 

 

WordPressのフォントを変更してゴシックにしよう

WordPressの無料テーマの多くは海外の方が開発したもの。
それゆえ、フォントの指定が日本向きではないんですね。

なので、
WordPressテーマのスタイルシートのフォント指定を、
日本語フォントに変更するだけでも、
格段にサイトの見映えが良くなるのです。

WordPressのフォントを変更する方法と手順

WordPressでフォントをゴシック体に変える方法を
ご説明しますね。

※子テーマで書き換えてください。
子テーマを作っていない場合は、「style.css」を変更していきますので、必ずバックアップをテキストエディタに取ってから進めましょう。

1.
WordPressのダッシュボードから
「外観」のテーマ編集をクリック。

2.
「テーマの編集」の中(右メニュー)から
「スタイルシート(style.css)」をクリック。

3.
スタイルシートを開いたら、右上の検索窓で
「Ctrl + F」でシート内を検索します。
「font-family」と入力。

4.
検索結果の3番め、
テキストエディタでいうと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 Pゴシック”, “MS PGothic”, sans-serif;
—-

今現在このサイトは

—-(2)
font-family: “メイリオ”,Meiryo,”ヒラギノ角ゴ Pro W3″,Hiragino Kaku Gothic Pro,”MS Pゴシック”,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 Pゴシック”, “MS PGothic”, sans-serif;
—-

—-
font-family:Helvetica , Arial , Verdana , Roboto , “游ゴシック” , “Yu Gothic” , “游ゴシック体” , “YuGothic” , “ヒラギノ角ゴ Pro W3” , “Hiragino Kaku Gothic Pro” , “Meiryo UI” , “メイリオ” , Meiryo , “MS Pゴシック” , “MS PGothic” , sans-serif;
—-

—-
font-family: “Lato”, “ヒラギノ角ゴシック Pro”, “Hiragino Kaku Gothic Pro”, ‘メイリオ’ , Meiryo , Osaka, “MS Pゴシック”, “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をいじるのも、
 テキストエディタでやって、
 それをコピペする方が安全と思われます。

ちなみにテンプレートのアップデートが有った場合は、
設定が元に戻ってしまいますのでご注意を。
その時はまた再設定してくださいね。

スポンサードリンク