2018年10月21日

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; }

本文のフォントをメイリオにする場合

* { font-family: Meiryo, sans-serif; }
ブログに適用」→「Bloggerに戻る」をクリックします。
以上の設定で本文のフォントが変わります。表題や投稿タイトルのフォントも変えたい場合には、「カスタムCSSを追加」欄で、以下のコードを追加します。

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

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

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

h3.post-title { font-family: Meiryo, sans-serif; }
ブログに適用」→「Bloggerに戻る」をクリックします。

補足

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

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

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

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

* { font-family: "Open Sans", Meiryo, sans-serif; }
Open Sansのようにフォント名が2語以上のときは"ダブルクォーテーションマーク"または'シングルクォーテーションマーク'で囲みます。

参考

0 件のコメント:

コメントを投稿