Bloggerで日本語フォントを游ゴシックやメイリオに変更

Bloggerは管理画面のメニュー操作だけで日本語フォントを設定することができません。そのため、日本語テキストは、Bloggerのブログを見る端末の標準フォントで表示されます。

Windows PCでBloggerのブログを見ると、日本語テキストは、sans-serif(ゴシック体)に設定されたブログなら「MS Pゴシック」、serif(明朝体)に設定されたブログなら「MS P明朝」で表示されます。

Mac、iPhone、iPadでは、sans-serifに設定されたブログなら「ヒラギノ角ゴシック」、serifに設定されたブログなら「ヒラギノ明朝」で表示されます。

Apple端末なら標準の日本語フォントがきれいなので、特にフォント指定しなくても日本語がきれいに見えます。ところが、Windows PCは残念ながらそうではありません。Bloggerでは、Windows向けに「游ゴシック」などのきれいな日本語フォントを指定したほうがよいでしょう。

ただし、日本語フォントを設定するには、ある程度HTMLコードの書き込みが必要です。

日本語フォントの指定

Bloggerの管理画面で、「テーマ」→「カスタマイズ」をクリックします。

「上級者向け」→「CSSを追加」をクリックして、「カスタムCSSを追加」欄に、以下のコードを書き込みます。

本文のフォントを游ゴシックにする場合

* { font-family: "Yu Gothic", sans-serif; }

「ブログに適用」→「Bloggerに戻る」をクリックします。

以上の設定で本文のフォントが変わります。表題や投稿タイトルのフォントも変えたい場合には、「カスタムCSSを追加」欄で、以下のコードを追加します。

表題のフォントをメイリオにする場合

.Header h1 { font-family: Meiryo, sans-serif; }

投稿タイトルのフォントをメイリオにする場合

h3.post-title { font-family: Meiryo, sans-serif; }

「ブログに適用」→「Bloggerに戻る」をクリックします。

補足

上記のコードはコピー＆ペーストでもお使いいただけます。ただし、エラーになる場合は、ダブルクォーテーションマークを打ち直してください。ダブルクォーテーションの代わりに、シングルクォーテーションマークでもかまいません。

日本語は日本語フォント,半角英数字は英語フォントで表示

Yu GothicやMeiryoなどの日本語フォントを設定しつつ、半角英数字は英語フォントで表示させると、ちょっとおしゃれな感じになります。設定方法は、font-familyの日本語フォントの前に,(カンマ)を打って英語フォントを指定します。

本文の日本語フォントをメイリオ、英語フォントをOpen Sansにする場合

* { font-family: "Open Sans", Meiryo, sans-serif; }

Open Sansのようにフォント名が2語以上のときは"ダブルクォーテーションマーク"または'シングルクォーテーションマーク'で囲みます。

参考

• Bloggerで日本語Googleフォントを使うには
• 日本語ウェブサイト管理者のためのWindows標準フォントの理解
• Bloggerで日本語ブログを見やすくするカスタマイズ手順