ブログのフォントをメイリオに変更（Blogger編）

昨日に引き続き、ブログのフォントをイマドキな感じの メイリオ に変更する方法第2弾です。

前回はlivedoorブログでのやり方を書きましたので、今回は予告通りBloggerの方を。

まさに本ブログがBlogger利用ですからね、今回はどのように変わったかのビフォアーアフターもお伝えできるかと思います。

それでは早速。

◆ Bloggerのフォントをメイリオに変更する方法

① ブログ管理画面にて、[ テンプレート ] → [ カスタマイズ ] ボタン、と進む。

    

② Blogger テンプレート デザイナー画面になるので、[ 上級者向け ] → [ CSSを追加 ]（メニューをスクロールした一番下にある） 、と進む。

このとき画面右側に現れる青線枠内にテキストを追加していくことになる。

③ テキストを追加する。

ずばり↓これを追加しましょう。
（※すべて1行です）

* { font-family: meiryo,メイリオ,"ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック",sans-serif !important; }

追加したら、右上の [ ブログに適用 ] ボタンを押すのを忘れずに。

～余談～ 面倒なら読み飛ばしても問題なし。

「 font-family: 」の後ろにはコンマ（，）でつながれた複数のフォント種類の候補が並べられ、前に書かれたものほど優先度が高い。つまり、メイリオを先頭に書くのはそういった理由。

フォントの名称に空白を含む場合はダブルクォーテーション（”）で括る必要があるため、ヒラギノ角ゴ～やMS Pゴシックはそういう記述がされている。

最後の「 !important 」、これがないとブログ全体のフォントが変わらない。
試しに外してみると分かるが、大本のブログタイトルや記事タイトルなどが元のフォントに戻ってしまう。
フォントは複数指定された場合に優先度に応じて次々上書きされるものだが、この「 !important 」をつけたものは強制的に優先させることができ上書きされない。

・・・以上です。
livedoorブログよりBloggerの方が簡単ですね。

◆ ビフォアー＆アフター

【 Before 】

【 After 】

”ブログのフォントを～～”っていうオレンジ色のブログ記事タイトルを見比べてもらうと一番違いが分かりやすいかも。

Beforeでは1行に納まっていたのがAfterでは2行になっています。

このことから、おそらくメイリオの方が以前よりも文字の横幅や字間が広く取られているのだろうということが予想できますね。
メイリオはそういった部分の読みやすさがウケているのかな。


それでは今回はこの辺で。