美しい文章のたたずまいを作る…「フォント」の選択
ブログの「見た目」でいうところの読みやすさの鍵は、フォントの種類（font-family）と行の高さ（line-height）になります。
今回は特に「フォント」（和文フォント）の設定について書きますが、ここで知っておいてほしいことは
そのパソコンがMacかWindowsかで、表示されるフォントが違う。
ということです。
（スマホやタブレット端末も同じことが言えるとは思いますが、取り急ぎ割愛）
さあ、また今回は3000字を超える長文となりました^^;
フォントをカスタマイズしたくなるアメブロたとえばなんの設定もしない場合のMacで表示されるこちらのブログ（↓）
一方、Windowsの場合
こちらは「MS Pゴシック」。
文字がMacに比べてギザギザしてるのがお分かりいただけますでしょうか？
これはそのフォントがアンチエイリアス対応か否か、という違いです。
ちょっと下の方が素人くさい、というか、雑、というか、なんか「無料のブログ」って感じがしませんか？
お金払って広告も取ってるし、カスタマイズもしてるので、個人的にはなんかイヤです（笑）
このようにどのフォントが表示されるかは、どの端末がどのバージョンのOSを搭載しているかによって違います。
例えばアメブロのスタイルシートで、「ヒラギノ角ゴ Pro N3」と指定しても、そのサイトを表示させるパソコンがWindowsであるなら、WindowsのOSは「ヒラギノ」フォントには対応していないので、他に指定の該当フォントが無い場合は「MS P ゴシック」で表示される、ということになります。
で！
「やさしいブログのつくり方」の松田さんも、
わざめーばこと松本さんも、
札幌が誇るアメブロの神様・川上先生も、
このように紹介していることからも分るように
特にWindowsユーザーのアメブロにおける「フォントを変えたい」というニーズは、とても高いと言えます。
Windows OSに対応している「メイリオ」フォント、そして…上記お三方のブログで、「MS P ゴシック」に代わるWindowsOS対応フォントとして紹介されているのが「メイリオ」フォント。
Windows Vista以降から日本語と英字を交えた文章も美しく表示されるフォントとして歓迎されたアンチエイリアス対応フォントです。
【Windows画面でのメイリオフォント】
実は、アメブロの初期設定となっているフォント設定でも「メイリオ」というのは入っているんですが、「MS Pゴシック」が優先されて書かれているんです。（ちょっと意味がわからない…）
ま、つまりその初期設定ではメイリオが表示される可能性はとても低いので、メイリオで表示させたい人はフォント設定を書き換えないといけません。
方法については後ほど。
そして、今回あたらしくご紹介したいのは、Windows8.1/Mac OS X Marvericksから追加された、Mac/Windows共通の対応フォント。
これを使うと、Mac/Windowsで同じフォントでの表示が可能になる！というちょっと革命的な出来事。
【Mac画面での游ゴシックフォント】
【Windows画面での游ゴシックフォント】
モニターの解像度の違いから若干印象が違う気がしますが…。
あともう一つ、「游明朝体」というフォントもMacOSと共通のフォントとして入っています。
今まで、明朝体がお好きで使われていた方も、Windowsで表示される「MS P明朝」はアンチエイリアス非対応でお世辞にも美しいとは言えませんでした。
これらの游ゴシック・游明朝体に関しては、設定しても表示できるPC環境下にいる人がそれほど多くないかもしれませんが、見れる人は見れるので、明朝体がお好みの方は是非試してみてください。
アメブロのフォント設定（CSS編集画面）
CSSの編集画面に行くためには、デザインの設定で「CSS編集用スキン」にしている必要があります。
（既存デザインスキンのまま、フォントの変更をしたい、という方は、上記の川上先生のブログをご覧ください。）
一般的に「CSS編集」にてフォントを書き換える際、よく紹介されている方法は「CSS末尾に追加する」というやり方なんですが
ここでは私が実践している方法をお伝えします。
CSS編集画面へはこちらから。
【CSS編集目次】にあるように、CSSはこの構成で書かれています。
今回用事があるのは(1)文字のスタイルなので、少しだけ下へスクロールしてください。
赤枠で囲まれている部分が、ブログ全体のフォントと文字の色を設定しているところです。
たとえばこうなるように、それぞれ表示させたいフォント設定をコピペで追加してみてください。
※ちなみに、私はMac表示は「ヒラギノ角ゴシック」、Windows表示は「メイリオ」としています。游ゴシックも試してみたんですが、個人的に親しみが湧きませんでしたし、ちょっと堅いかな…ということで。
（１）Mac→「ヒラギノ角ゴシック」、Windows→「メイリオ」で表示させたい場合
（２）Mac/Windows共通→「游ゴシック」で見れる人には「游ゴシック」で優先的に表示させたい場合
（３）Mac/Windows共通→「游明朝」で表示させたい場合
（４）Macでは「ヒラギノ角ゴシック」がいいけど、Windowsでは「游ゴシック」を優先させたい場合
どのフォントが読みやすいと感じるか、は個人差が大きいものです。
お好きな設定をためしてみてくださいね！
欧文フォントについては…今回は割愛しますが、ご質問のある方はコメント・メッセージなどでどうぞ。
【注意】以前、CSS末尾に付け足す形でフォント設定を変えていた方には…私が今回、自分のやり方でご紹介させていただいたのは、見よう見まねでやみくもにCSSの記載を増やしていくと自分がどこに何を書いたかが分らなくなることがあるからです。
ですが、CSSについては、後の方に書いた内容が、先に書いてる内容を上書きして優先することになります。
なので、以前フォント設定を自分でしたことがある方で、CSS末尾にその記載があると変更が反映されないことがあります。
末尾「その他」のエリアに「font-family」に関した記載がある場合は、その部分を削除してください。
今後、Googleのウェブフォントが増えて行くだろうことが予想される中で、和文フォントにもどんどんキレイなフォントが増えて行くかもしれませんし、ウェブデザインにおけるフォントも、また変わって行くでしょう。
その時は、また新しい方法をご紹介させていただきますね。
毎度ながら、最後までお付き合いくださった方にはありがとうございました。
フォント以上に、ブログの読みやすさがアップするかもしれない「行の高さ」の設定についてはまた次回～♪
Cocoro+et+Gokoro（こころ・え・ごころ）
北川 直枝
次回予定【ブログ更新をラクにするベースづくり/AmeCare&Facebook】
★開催日等ご案内を受け取りたい方はこちら！
Cocoro+et+Gokoroその他のメニュー
60分無料【アメブロ初心者向け】ブログオリエンテーション
アメブロフルカスタマイズ（現在新規募集しておりません）
ブログづくりワークショップ参加者限定記事はこちら