BloggerブログのフォントをCSSで設定しよう！ブロガーロード(BLOGGER ROAD)

Bloggerのデフォルトのフォントはダサいと評判です。

エディタからもいくつかのフォントが選択できますが、
どれもアルファベット対応のもので日本語には効果が薄いです。

そこで！
CSSを用いてフォントを指定しましょう！

フォント指定の基礎知識

端末によって表示されるフォントには様々な種類がありますね。

柔らかいものからユニークなもの、
漢字向けのものや英語向けのもの…

ところで、
フォントはOSによって表示できるものが異なるのをご存知でしょうか？

例えば、WindowsとMac、
そしてスマートフォンなどに用いられるiOSとAndroidとではそれぞれ搭載されているフォント体系が全く異なっているのです。
（MacとiOSは同じapple社のOSなので似てますが）

あるデバイスでは美しく表示されるフォントも、別のデバイスでは全く異なる姿で表示されてしまうことがあります。

ブログを大勢の方に見てもらうことを考えるなら、
あらゆるデバイスに美しいフォントが表示されるようなサイト設計が重要であると言えるでしょう(^^)

CSSでフォントを指定する

CSSでフォントを指定しましょう。

BloggerでのCSSの設定方法は以下の記事を参照ください。
→Bloggerをカスタマイズしよう！その前に…

CSSではフォントはfont-familyで指定されます。

例えば、記事と記事タイトルにフォント変更を適用させるためには、以下のように記述します。

* {
font-family: '「font1」', '「font2」', '「フォント3」', 総称ファミリ;
}

※1「」内は任意フォント名
※2記事タイトルにフォントを適用したくない場合、冒頭の*をbodyに変えてください。

指定するフォントはクォーテーション(')で囲い(総称ファミリ除く）、
コンマ(,)で区切ります。

最後はセミコロン(;)で終わります。

また、先に記述されたフォントが優先して読み込まれます。

上の例ですと、まず真っ先に「font1」がコンピュータに読み込まれ、

OSに「font1」が入っていれば、そのフォントが採用されます。

しかし、もし入っていなかった場合には、次に「font2」が読み込まれる…といった感じです。

このようにして、フォントをたくさん指定することで、あらゆるOSに対してフォント指定を適用することができます(^^)

また英語フォントを日本語とは別に設定したい場合、英語フォントを先に持ってくるのが良いと思います。

最後の「総称ファミリ」というのは、
前で指定したすべてのフォントがパソコンに無かった場合、
「最低でもこういう系のフォントにしてね」ということを伝えることができます。

雑に言ってしまうと、これさえ指定しておけば、どのOSでも大体望み通りのフォントを指定できてしまいます。

総称ファミリの種類とそれによって指定できるフォントは以下の感じです。

結局どのフォントが良いの？

だいたいみんなゴシック系使ってます。

Windowsは「メイリオ」
Mac(とiOS)は「ヒラギノ角ゴ」

総称ファミリは「sans-serif」ですね。

最近だと、WindowsとMacの両方で使える「游ゴシック」も選択肢に入るかと思われます。

英語を別に指定したい場合は、
Windowsでは「Arial」、Macでは「Helvetica」が王道のようです。

何かブログに特別な世界観を出したい場合は、筆記体や装飾体も選択肢に入るかと思われますが、無難にキレイなフォントを求めているのであれば、ゴシック体が最も勝手が良いと思われます(^^)

(androidは端末側でフォントの指定ができるため、対策は必要ないと言われています。どうしても気になる場合は、「Droid Sans」か「Roboto」を指定しておけば無難な感じになると思います)