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

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

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

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

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

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

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

参考文献

はてなブログ Perfect GuideBook [改訂第2版]

はてなブログカスタマイズガイド: HTML & CSSで「はてなブログ」を次のステップへ!

はじめに

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

ブログカスタマイズのまとめ

準備編：はてなブログのHTML/CSSの構造を解析する（1）
準備編2：はてなブログのHTML/CSSの構造を解析する（2）
第1回：「Minimalism」テーマのコードブロックの行間を調整する
第2回：「Minimalism」テーマのスマホで太字にならない問題の原因と対策
第3回：「Minimalism」テーマの目次の外観とリンク文字をカスタマイズする
第4回：「Minimalism」テーマの見出しをカスタマイズする
第5回：「Minimalism」テーマのサイドバーの各モジュールをカスタマイズする
第6回：カテゴリを階層化する（補足と問題点を追記）
第7回：Minimalismのカスタマイズ2点と、2つの問題点（スマホで見たときの画像余白と画像と背景の境界）の解決
第8回：CSS対応のタイトル付きの囲み枠を使う方法（定型文に登録）
第9回：ページ全体の表示フォントを変更する ← 今回
番外編：編集ボタンを表示させる（編集ボタンを復活させる）
番外編2：カテゴリー階層化のソースコードを解析する
発展編：自作のデザインテーマを作る

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

変更前

「Minimalism 」オリジナルは、游ゴシック Medium"

変更後

メイリオに変更できた

デザイン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の技術ブログ）で説明しています。

事前準備

・ テスト用ブログに投稿した「サンプルエントリー」を開いておく
　（デベロッパーツールを使うため）
・テスト用ブログの管理画面から、
　「 ãƒ‡ã‚¶ã‚¤ãƒ³â†’ ã‚«ã‚¹ã‚¿ãƒžã‚¤ã‚ºã‚’クリック→{} デザインCSS」で開いておく
・「Minimalism」テーマのCSSソースファイル
・「サンプルエントリー」のHTMLのソースファイル

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

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

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

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

ページ全体の設計図

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

設計図の作り方

・Googleドライブで、Googleスライドを新規作成する
・タイトルとサブタイトルのテキストボックスを削除する
・自分のブログをキャプチャして、Googleスライドに貼り付ける
・以前紹介したWhatFontか、デベロッパーツールでフォントとサイズを調べて、
　テキストボックスを使って書き込んでいく

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

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

表示フォントを変更する

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

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

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

fromkato.com

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

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

font-familyで検索した結果

後ろの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;
}

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

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

変更前

「Minimalism 」オリジナルは、游ゴシック Medium

変更後

メイリオに変更できた

おわりに

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

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

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

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