Bloggerで表示するフォントを変更する方法

ブログのフォントを見やすくするため、全体をWindowsでは「メイリオ」、Macintoshでは「ヒラギノ角ゴ Pro W3」にする方法を書きたいと思います。

なお、メイリオやヒラギノ角ゴ Pro W3がインストールされていない環境においては、ブラウザの設定で「sans-serif（ゴシック体）」に指定されているフォントで表示される設定になります。

設定方法

テンプレートデザイナーより追加する方法

1. テンプレートからカスタマイズをクリックする。
2. CSSの追加をクリックする。
3. 以下のコードを追加する。

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

4. ブログに適用をクリックする。

直接コードを追加する方法

1. テンプレートからHTMLの編集をクリックする。
2. ]]></b:skin>を検索する。
3. ]]></b:skin>の直前に以下のコードを追加する。

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

4. テンプレートを保存をクリックする。

設定内容

CSSの最後に「!important」を追加することにより優先度を一番高くしています。

メイリオがなければヒラギノ角ゴ Pro W3、それも無ければＭＳ Ｐゴシック、何もなければブラウザでsans-serlf（ゴシック体）に設定したフォントとなります。

なお、別のフォントにしたい場合は、メイリオとかの場所に指定するフォント名を記載してください。（例　游ゴシックetc.）

部分的にフォントを変えたい場合

例えば、見出し（h2）のみフォントを変えたい場合は、下記コードを追加することになります。

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

以上、参考にしていただけたら幸いです。