【プラグイン不要】WordPressでのブログのフォントを変える方法。

ある程度ブログを更新していくと、自分のブログがどの様に表示されているのか気になってきますよね。

私もブログを初めて1ヶ月ちょっとしか経っていないので、毎日自分のブログと睨めっこしています(^_^;)

そんな折、「なんか自分のブログって安っぽいな…」と感じてきました。「なにが違うのかぁ?なんでこう安っぽいのかなぁ?」なんて考えてながら他所のブログを見ていると。

shunP

…っは!?分かったぞ!フォントが安っぽいのか!!

と気づきました。ブログ開設からフォントはいじってないのでデフォルトのままだったのです。

と言うことで今回はWordPressでのフォントの変更をしていきたいと思います。

ブログ・サイトでのフォントの重要性

ブログって文字で何かを伝えるので当然、文字がそのページの大部分を占めます。

やっぱりその文字自体を見やすく飾ってやらないとどうしても間の抜けた、安っぽい感じになってしまいます。

また、そうした安っぽいブログでは読者の興味だったり関心がどうしても薄れると思うんです。

フォントの重要性
  • 第一印象が悪い(読みにくい)と離脱に繋がる
  • きれいなフォント(読みやすい)だと目に留まる
  • ブログ全体のイメージが決まる

shunP

もちろん内容でカバーできるのであればそれに越したことはないけどね。

俺のブログは超おもしろいんだぜ!フォントなんて関係ないぜ!って方はどうぞ、そのままおもしろい記事を量産していってください。

でも、私はそんな自信が無いのでフォントでカバーして少しでも見やすいブログにする必要があるのです。

WordPressでのフォントの変更方法

今回は試しに『メイリオ』と英字用に『Verdana』というフォントスタイルへ変更してみます。

shunP

それではフォントを変えていこう!
注意
今回は親テーマを直接変更しています。実際に変更を行う場合は子テーマで変更を行いましょう。

まず、スタイルシートをいじるので『外観』から『テーマの編集』をクリックします。

スタイルシートが表示されたらそこから『font-family』を探します。『Ctrl+F』で探すと早いです。

見つかったでしょうか?

この『font-family』というコマンドでブログのフォントスタイルを指定しています。

今回の場合ではデフォルトで『sans-serif』というスタイルが指定されていました。

そこでこの『sans-serif』⇒『メイリオ』に変えてやればスタイルが変更されます。

shunP

ちなみに『sans-serif』はゴシック体のことだよ。

font-familyを変えてみよう!

スタイルの変更はfont-family:~を下記の様に書き換えます。

HTML
font-family:Verdana,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic",sans-serif;

因みに、そのままコードを書き換えてもいいのですが、後々確認しやすいように元々のコードを表示させたまま無効化することをオススメします。

やり方はコードを/*〇〇〇〇(コード)*/とするだけなので簡単です。

するとこんな感じになります。

この様にすべてのfont-familyを変更しましょう。変更し終わったら『ファイルを更新』をクリックして完了です。

フォントの比較

shunP

それじゃあ変更前と後で比べてみよう!

変更前(sans-serif)

変更後(メイリオ)

うーん…。少し線が太くなった気もしますが、あんまり変わりませんね(笑)

いろいろと試行錯誤した結果、最近はやりの『游ゴシック』に落ち着きました。コードは下記です。

HTML
font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;

游ゴシックが表示されるのは

游ゴシックはMac OS 10.9とWindows 8.1から標準装備されているらしいので、上記のコードでは

游ゴシックが入っていない場合ヒラギノ角ゴorメイリオそれでも対応できない場合はMSPゴシック、sans-serifへ順に表示するようになります。

游ゴシックはこんな感じ

shunP

全然違う!( ゚Д゚)ミチガエタ

まとめ

sans-serifからメイリオではそんなに変化が無いように感じましたね。私は最終的に游ゴシックに設定しましたが、Windows 8.1以降ってそんなにまだ普及してないんじゃないかなぁって個人的には思ってます。

なので、メイリオで表示されることが多いかと思いますが、そればっかりはしょうがないですね。

また、Webフォントなんかはおもしろいものがたくさんありますが、表示が若干重くなります。

shunP

極力サイトは重くしたくないからWEBフォントは使わないかなぁ。

皆さんも自分の気に入ったフォントを探して、自分のブログをカスタマイズしてみてくださいね。

5 Comments

アヤ

はじめまして!

こちらの記事を参考にして記事を書いたので、
ブログからリンクを貼らせていただきました。

リンクNGでしたらお知らせください。

返信する
shunP

ご丁寧にご連絡頂き有難う御座います!リンク全然OKです!

ブログ開設当初に書いた記事でとても分かりにくかったのでリライトしておきました^^;

返信する
GG

書いてる内容と、自分のWordPressが違うのか?
それとも、PCスキルがないから、書いてる内容が理解できないのか?
さっぱりわかりません><
初心者にもわかりやすい説明だと助かるのだけど

もう、あれこれやって疲れて、頭も回らないけどね

返信する
shunP

GGさんコメントありがとうございます!

お力添え出来なくて申し訳ないです><
もっとわかりやすいブログを目指して精進して参ります。
今後も当ブログをどうか宜しくお願い致します。

返信する

GG にコメントする コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です