ブログテーマ内のCSSにあるfont-familyを修正して、ブログのフォントをMS PGothicからメイリオに変更したので、その方法をご紹介します。
いわしブログは、2代目WordPress用ブログテーマとして、Stinger3を使用していました。
デフォルトのフォント「MS PGothic」は見た目が何となく野暮ったいし、ブログをより読みやすくしたいということもあって、CSSを修正してブログのフォントをメイリオに変更しました。
ブログのフォント変更は簡単にできるので、ぜひ試してみてください。フォントの種類はいろいろありますが、メイリオは読みやすいのでオススメです。
また、最近はフォントサイズやフォントの種類をブログテーマの機能で変更できるものがあります。フォントを変えるならブログテーマごと変更するのも手ですよ。
メイリオは読みやすいフォント
いわしブログでは、1ヶ月ほど前からブログのフォントをStinger3のデフォルトフォント MS PGothic からメイリオに変更しています。
メイリオ(Meiryo)は元々Windows用のシステムフォントとして開発された和文ゴシック体フォントの一つです。メイリオの語源「明瞭」の通り、画面上のテキスト表示や印刷時の見やすさが考慮されています。
環境にもよりますが、通常Stinger3で使用されるデフォルトのフォントはMS PGothicとArialになります。
以前のいわしブログはこんな感じで表示されてました。
もちろん、このままでも文字の表示に何ら支障はありませんが、ちょっと野暮ったい感じがするでしょ。
こちらがフォントをメイリオに変更した後です。
フォントをメイリオに変更したことで、以前より文章が読みやすくなりました。
長文ブログの場合、どんなに優れた内容でもフォントが小さかったり、行間が狭かったりすると、途中で読む気が失せてしまいます。
ブログを続けていくためには、訪問者のための環境作りもこちらで整備しないといけません。フォント選択もしかり。でも、フォントの変更はそんなに難しくないし、ブログの可読性を上げるためにはとても効果的な方法です。
ブログのフォントをメイリオに変更
では、ブログのフォントをメイリオに変更してみましょう。
WordPressダッシュボードの左側メニュー「外観」から「テーマ編集」へ進み、右側のテンプレート一覧からスタイルシート(style.css)を選択します。
38行目付近に「font-family」がありますね。ここで指定されたフォントが表示されるようになっています。
Stinger3のstyle.cssを見ると、font-familyはこのように指定されています。
font-family: arial, helvetica, osaka, "MS PGothic", sans-serif;
フォントは数種類指定されてますが、いわしの環境(OS:Windows8.1 ブラウザ:Chrome)だとブログの文字はMS PGothicとArialで表示されます。
使う機種やブラウザによって表示されるフォントが変わるので、font-familyには何種類かのフォントを指定しておくのが一般的です。特にフォント指定のない場合は、ブラウザのデフォルトフォントで表示されます。
こちらにブラウザやOSごとのデフォルトフォント一覧があります。
さて、こちらがメイリオへ変更後のfont-familyです。
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
自分で変更する場合は、ブログテーマのCSS内にあるfont-familyをそのまま上記の内容に置き換えればOKです。
font-familyのフォント指定にはいろいろルールがあって、自分が使いたいフォントをそのまま記載しても、きちんと反映されるとは限りません。ですから、そのルールに従ってfont-familyを選ぶ必要があります。
いわしには適切なfont-familyを構成するための知識がないので、メイリオ表示用のfont-familyを探してそのまま使ってます。
今回のfont-familyの選択はこちらを参考にさせていただきました。n-yujiさん、ありがとうございます。
フォント変更時の注意点
基本的にフォントは種類によってそれぞれ表示幅が違います。同じ内容の文章でもフォントを変更すると文章の表示範囲が変わります。文字幅や改行位置を考慮してデザインされたウェブサイトやブログの場合、フォントを変更するとデザインが崩れるケースがあります。
メイリオは全角文字がすべて固定幅で、行間も広めになっています。フォント変更の際は確認のために数ページほどチェックされることをお勧めします。
font-familyのルールについてもう少し詳しく知りたい方は、こちらが参考になります。明朝体やゴシック体表示を優先したfont-familyのセット例もありますよ。和風のウェブサイトならやっぱり明朝体がいいですよね。
DTP Transitの生明さん、ありがとうございます。
ブログテーマの機能でフォント変更
最近のブログテーマには、フォントサイズやフォントの種類を変更できる機能があります。
いわしブログで現在利用中のブログテーマ「Cocoon」は、テーマの設定からフォントの種類や文字サイズ、文字色を変更することができるので、CSSを修正する必要はありません。
メイリオやヒラギノ角ゴに加えて、小杉ゴシックやさわらび明朝といったWEBフォントも選択できるので、ブログの文章を好きなスタイルにカスタマイズできますよ。
フォントを変えたいけどHTMLやCSSはよくわからないという方は、ブログテーマを変更するのも手ですよ。
