Bloggerで使えるフォントは種類が多いものの、日本で馴染みのあるフォントがないので悩みますよね。
そこで、本記事ではCSSの追加で日本語向けのフォントに変更する方法を解説します。
CSSの追加方法
左のメインメニューから【テーマ】を選択し【カスタマイズ】をクリックします。
そこから【詳細設定】の【CSSを追加】を選択します。
【カスタムCSSを追加】にCSSを入力できます。
後述のCSSを入力したら保存をして、反映されているか実際にブログを確認しましょう。
日本語向け向けフォントにするCSS
基本のCSSコード
基本になるCSSコードは以下になります。
フォントは①→②→③の順に優先順位が決まります。
WindowsとMacでは使用できるフォントが違うので、最低でも2種類は指定しておくと良いです。
総称フォントはフォントの大まかな指定です。
上記で指定したフォントが使えない時にイメージの近いフォントに変更してくれます。
オススメのフォント
画面で横文字を読む場合、ゴシック体が読みやすいとされています。
ゴシック体の総称フォントはsans-serifになります。
ブログで良く採用されているフォントは
- メイリオ（Windows和文フォント）
- ヒラギノ角ゴシック（Mac和文フォント）
となっています。
他、フォントにこだわりたい場合は以下のようなサイトを参考にしてみてください。
参考サイト様
WiLL Cloud【font-familyの正しい指定方法・タイプ別おすすめフォント設定例】
当ブログで使用中のCSSコード
当ブログで使用しているCSSコードは以下の通りです。
上記コードを使用すると、フォント優先順位は
- Segoe UI（Windows欧文フォント）
- メイリオ（Windows和文フォント）
- Helvetica（Mac欧文フォント）
- ヒラギノ角ゴ ProN W3（Mac和文フォント）
- sans-serif（ゴシック体総称フォント）
となります。
欧文フォント→和文フォントの順で指定することで、英数字は欧文フォントで日本語は和文フォントに指定することができます。
好みのフォントに変更しよう！
CSSの追加で、日本で馴染みのあるフォントも使えるようになります。
自分のブログの雰囲気に合わせて、読みやすいフォントを指定してみましょう！
注意点としては、上記コードを使用すると記事を書くときなどにフォントを選択しても効かなくなります。
一括での指定になりますので、そこだけ気を付けて下さい。
