【解説】ブログカスタマイズ：ページ全体の表示フォントを変更する

ブログカスタマイズの第9回目です！

このブログでは、「Minimalism 」テーマを使用していますが、なるべく、どのテーマの場合でも対応ができる方法で説明していきます。

今回は、ブログのページ全体の表示フォントの変更方法を紹介します。

いきなりフォントを変えると、どこに影響が出るか分からず、躊躇してしまいますよね。

そこで、ここでは、ページ全体のフォントに関する設計図を作って、全体像をつかんでから変更していく方法を紹介します。

それでは、早速やっていきましょう！

• 参考文献
• はじめに
• 準備物
• ページ全体の設計図を作る
• 表示フォントを変更する
  • 「Minimalism」テーマのCSSを確認する
  • CSSの変更内容
• おわりに

参考文献

はじめに

ブログカスタマイズの一覧です。良かったら参考にしてください。

最初に、今回のまとめとして、外観のビフォーアフターと、デザインCSSの末尾にコピペすればいいコードを貼っておきます。

変更前

変更後

デザインCSSに追記する内容

html,
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', meiryo, '游ゴシック Medium', sans-serif;
}
#blog-title {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', meiryo, '游ゴシック Medium', sans-serif;
}
#blog-description {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', meiryo, '游ゴシック Medium', sans-serif;
}
.entry-title {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', meiryo, '游ゴシック Medium', sans-serif;
}
.entry-content {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', meiryo, '游ゴシック Medium', sans-serif;
}
.id a{
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', meiryo, '游ゴシック Medium', sans-serif;
}
.hatena-module-profile .profile-description {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', meiryo, '游ゴシック Medium', sans-serif;
}
.archive-heading{
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', meiryo, '游ゴシック Medium', sans-serif;
}

メイリオいいですね！

では、説明に入っていきます。

準備物

下記準備物の入手方法については、第1回目の事前準備（【解説】はてなブログ：「Minimalism」テーマのコードブロックの行間を調整する - daisukeの技術ブログ）で説明しています。

ページ全体の設計図を作る

まずは、どの部分をどう変えるかを、決めていきます。

どんな設計図でもいいのですが、私の場合は、以下のような図を作りました。

フォント名だけではなく、次に変更する予定のフォントサイズの変更内容についても書き込みました。

一応、私の場合の設計図の作り方を紹介しておきますね。

Googleスライドはパワーポイントそっくりな無料で使えるツールです。

ここまで出来たら、あとは、CSSを変更していくだけです！

表示フォントを変更する

まずは、表示フォントから変更していきます。

「Minimalism」テーマのCSSを確認する

参考にさせてもらったサイトです。

fromkato.com

表示フォントは、font-familyで指定します。

まず、「Minimalism」テーマのCSSソースファイルで、font-familyで検索します。以下のように、21件が検索されました。

後ろの8件は、スマホやタブレット用の指定なので、今回は後回しにします（「Minimalism 」は、スマホで見ると十分にキレイです）。

13件もありますが、大きく分けると、通常の文章（No.3）と、ソースコード用の等幅フォントの指定の2種類です。

※よく見ると、No.3は少しだけ異なっていました。No.3は「'游ゴシック Medium'」で、他のものは「'游ゴシック Medium'」で、真ん中の半角空白が2個になっていた。問題ないと思いますが、修正しておきます。

No.	使用箇所	使用フォント	用途
1	html	sans-serif	デフォルトフォントの指定
2	pre, code	monospace, monospace	ソースコードなど
3	body	-apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, sans-serif
4	#blog-title	No.3と同じ
5	#blog-description	No.3と同じ
6	.entry-title	No.3と同じ
7	.entry-content	No.3と同じ
8	.entry-content pre > code	'Monaco', 'Consolas', 'Courier New', Courier, monospace, sans-serif	ソースコードなど
9	.entry-content code	No.8と同じ	ソースコードなど
10	.id a	No.3と同じ
11	.hatena-module-profile .profile-description	No.3と同じ
12	.archive-heading	No.3と同じ
13	.categories a:before	FontAwesome

ここまで分かれば、気楽に変更できますね！

CSSの変更内容

参考サイトによると、MAC用の日本語フォント、Windows用の日本語フォント、英語用のフォント、汎用フォントの順で指定するのが一般的らしいです。

No.3を分解すると、先頭から、'Hiragino Kaku Gothic ProN'までが、Mac用の日本語フォント、'游ゴシック Medium'とmeiryo（メイリオ）が、Windows用の日本語フォント、sans-serifは汎用フォントとなります。

今回は、「游ゴシック」から「メイリオ」に変更するので、游ゴシック Mediumとmeiryoを入れ替えるだけです。

No.3と、No.3と同じところは、全て入れ替えたもので上書きする必要があります。

変更前（長くなるので、例として、No.3だけを示します）

html,
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
  color: #3f3f3f;
  background-color: #ffffff;
}

デザインCSSに追記する内容

html,
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', meiryo, '游ゴシック Medium', sans-serif;
}
#blog-title {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', meiryo, '游ゴシック Medium', sans-serif;
}
#blog-description {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', meiryo, '游ゴシック Medium', sans-serif;
}
.entry-title {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', meiryo, '游ゴシック Medium', sans-serif;
}
.entry-content {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', meiryo, '游ゴシック Medium', sans-serif;
}
.id a{
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', meiryo, '游ゴシック Medium', sans-serif;
}
.hatena-module-profile .profile-description {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', meiryo, '游ゴシック Medium', sans-serif;
}
.archive-heading{
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', meiryo, '游ゴシック Medium', sans-serif;
}
.categories a:before{
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', meiryo, '游ゴシック Medium', sans-serif;
}

これで、メイリオに統一されました！

文章のビフォーアフターです。

変更前

変更後

おわりに

今回は表示フォントを変更する方法を紹介しました。

あらかじめ、変更する内容を簡単な図にしておくと、迷わず変更できるので、効率的です。

私の場合は、しばらくしたら、他のブログを見て、また変更したくなると思うので、スパッと変えました（笑）

今回は以上です。お疲れさまでした！