ブログをより見やすく Stinger3のフォントをメイリオへ変更

スポンサーリンク

フォント一覧

いわしブログではWordPressのブログテーマにStinger3を使用していますが、デフォルトのフォント MS PGothic は何となく野暮ったい感じがするし、ブログをより読みやすくしたいということもあって、CSSをいじってフォントをメイリオに変更しました。

ブログのフォント変更は簡単にできるので、ぜひ試してみてください。フォントの種類はいろいろありますが、メイリオは読みやすいのでオススメです。

メイリオは読みやすいフォント

いわしブログでは、1ヶ月ほど前からブログのフォントをStinger3のデフォルトフォント MS PGothic からメイリオに変更しています。

メイリオ(Meiryo)は元々Windows用のシステムフォントとして開発された和文ゴシック体フォントの一つです。メイリオの語源「明瞭」の通り、画面上のテキスト表示や印刷時の見やすさが考慮されています。

環境にもよりますが、通常Stinger3で使用されるデフォルトのフォントはMS PGothicとArialになります。

以前のいわしブログはこんな感じで表示されてました。

Stinger3フォント MS Pゴシック

もちろん、このままでも文字の表示に何ら支障はありませんが、ちょっと野暮ったい感じがするでしょ。

こちらがフォントをメイリオに変更した後です。

Stinger3フォント メイリオ変更後

フォントをメイリオに変更したことで、以前より文章が読みやすくなりました。

長文ブログの場合、どんなに優れた内容でもフォントが小さかったり、行間が狭かったりすると、途中で読む気が失せてしまいます。

ブログを続けていくためには、訪問者のための環境作りもこちらで整備しないといけません。フォント選択もしかり。でも、フォントの変更はそんなに難しくないし、ブログの可読性を上げるためにはとても効果的な方法です。

Stinger3 フォントをメイリオに変更

では、Stinger3のフォントをメイリオに変更してみましょう。

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には何種類かのフォントを指定しておくのが一般的です。特にフォント指定のない場合は、ブラウザのデフォルトフォントで表示されます。

こちらにブラウザのデフォルトフォント一覧があります。

http://rinrin.saiin.net/~aor/fonts/defaultfonts

ブラウザのデフォルトフォント / もうパンツはかない

さて、こちらがメイリオへ変更後の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さん、ありがとうございます。

http://d.hatena.ne.jp/n-yuji/20130225/p1

CSSのfont-family指定はこれで決まり!(2013春) – 遠近法ノート

フォント変更時の注意点

基本的にフォントは種類によってそれぞれ表示幅が違います。同じ内容の文章でもフォントを変更すると文章の表示範囲が変わります。文字幅や改行位置を考慮してデザインされたウェブサイトやブログの場合、フォントを変更するとデザインが崩れるケースがあります。

メイリオは全角文字がすべて固定幅で、行間も広めになっています。フォント変更の際は確認のために数ページほどチェックされることをお勧めします。

font-familyのルールについてもう少し詳しく知りたい方は、こちらが参考になります。明朝体やゴシック体表示を優先したfont-familyのセット例もありますよ。和風のウェブサイトならやっぱり明朝体がいいですよね。

http://www.dtp-transit.jp/misc/web/post_1881.html

CSSでのフォント指定について考える(2014年) – DTP Transit(Mac OS X, OS X Mavericks, Web Fonts, Web制作, iPhone, フォント)

DTP Transitの生明さん、ありがとうございます。

スポンサーリンク
PC用
PC用

フォローする