あまり頻繁に使うことはないですが、記事本文のフォントの種類を変える方法をご紹介します。
この記事の内容は基本的な内容ですが、ブログカスタマイズの際に応用が効く内容なので、ぜひ一度ご覧ください。
- はてなブログのカスタマイズをしたい
- 表示フォントを簡単に変更したい
- どこを変えればフォントを変更できるのか知りたい
現在記事本文の表示がゴシック体風の方は明朝体風を、逆に明朝体風のフォント表示を利用している方はゴシック体風のフォントを試しに適用してみてください。
記事の見た目の印象がかなり変わると思いますよ。気に入ったら他のフォントにしてみるなどのカスタマイズをすることもできます。
なお、ご利用のデザインテーマによっては選んだフォントが適用されない場合がありますのでご了承ください。
- ブログの本文で使うフォントの種類をCSSを使って変更する
- はてなブログのフォントは書体種類別のコード（コピペ可）をデザインCSSに追加すれば簡単に変更できる
- はてなブログで使うフォントの種類を変更する方法のまとめ
ブログの本文で使うフォントの種類をCSSを使って変更する
デザインCSSにコードを追記して、記事本文で表示されているフォントの表示を変更します。
作業前にCSSのバックアップを取ってから作業してください。
「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」にこの記事のコードを追記してください。
追記するCSSコードの例は下記の通りです。赤色の部分がフォントを指定している部分です。（下記は明朝体風にする場合の記載です）
.entry-content {
font-family: 'ヒラギノ明朝', '游明朝体', 'MS P明朝', serif !important;
}
上記のCSSコードの赤字部分で表示フォントを指定しています。上記のコードの場合、まずヒラギノ明朝が機器にあればヒラギノ明朝が適用され、なければ次の游明朝体が、それもなければMS P明朝、という風に、左のフォントから順にあるものが適用されます。
フォントの種類は、font-familyに追記すれば、好きなだけ追加できます。
まずこのコードの基本構造を覚えてさえおけば、今後応用することができます。
はてなブログのフォントは書体種類別のコード（コピペ可）をデザインCSSに追加すれば簡単に変更できる
フォントは利用の機器によって表示されるものが異なっています。
ただし、ウェブページの表示が利用機器によって全く異なることにならないよう、WindowsでもMacでも、AndroidでもiPhoneでも、若干名称やデザインは異なるものの、見た目が同じように表示されるフォントが標準で入っています。
各機器に共通して標準で入っているものは、「明朝体」と「ゴシック体」です。
そのため、明朝体風の表示にするのか、ゴシック体風の表示にするのかをまず決めてください。決まったら、次のいずれかのコードをまず使ってみると良いと思います。
なお、グーグルフォントなどの無料フォントを設定済みの場合は、それらのフォントを適用することもできます。
各書体別のCSSコードを記載していますので、必要なもののみご利用ください。
（重複しても問題ありませんが、その場合は一番下のコードで指定されているフォントから適用されます）
明朝体風のフォント表示にする場合
標準的な機器に標準で入っている明朝体風のフォントを表示するときのコードです。（下記記載はサンプル例なので、実際にはfont-familyに好きなフォントの種類を追記することが可能です。以後同様。）
.entry-content {
font-family: 'ヒラギノ明朝', '游明朝体', 'MS P明朝', serif !important;
}
ゴシック体風のフォント表示にする場合
標準的な機器に標準で入っているゴシック体風のフォントを表示するときのコードです。
.entry-content {
font-family: 'ヒラギノ角ゴ ProN W3', '游ゴシック', 'MS Pゴシック', Arial, sans-serif !important;
}
グーグルフォントなどのウェブフォントを使う場合
ユーザーが利用している機器にあらかじめ導入されているフォント以外のフォントを表示させるには、グーグルフォントなどを導入して、そのフォントを指定してあげる必要があります。
上記のリンク先の記事では「Pacifico」フォントを導入して、ブログのタイトル部分に適用しています。
この場合、グーグルフォントの「Pacifico」をブログに導入済みとなりますので、記事本文にも「Pacifico」を適用可能（英字部分のみ）です。CSSコードは、リンク先の記事と同様のfont-familyを指定します。
.entry-content {
font-family: 'Pacifico', cursive;
}
はてなブログで使うフォントの種類を変更する方法のまとめ
この記事の内容を試してみて、記事本文だけでなく、記事のタイトルのフォントも変えたいと思った方もいるかもしれません。
その場合は次のコードを参考にしてください。青色部分は記事タイトル部分を指定しているコード、赤色部分はフォントを指定しているコードになります。
.entry-title {
font-family: 'ヒラギノ明朝', '游明朝体', 'MS P明朝', serif !important;
}
実は、.entry-titleの部分を変えると、いろんな部分（タイトルや項目など）の表示フォントを変更できるんですよ！
はてなブログのカスタマイズ、いろいろ変更できます。奥が深いですね。
