ブログカスタマイズの第9回目です！
このブログでは、「Minimalism 」テーマを使用していますが、なるべく、どのテーマの場合でも対応ができる方法で説明していきます。
今回は、ブログのページ全体の表示フォントの変更方法を紹介します。
いきなりフォントを変えると、どこに影響が出るか分からず、躊躇してしまいますよね。
そこで、ここでは、ページ全体のフォントに関する設計図を作って、全体像をつかんでから変更していく方法を紹介します。
それでは、早速やっていきましょう！
参考文献
はじめに
ブログカスタマイズの一覧です。良かったら参考にしてください。
ブログカスタマイズのまとめ
最初に、今回のまとめとして、外観のビフォーアフターと、デザイン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
変更後
メイリオに変更できた
おわりに
今回は表示フォントを変更する方法を紹介しました。
あらかじめ、変更する内容を簡単な図にしておくと、迷わず変更できるので、効率的です。
私の場合は、しばらくしたら、他のブログを見て、また変更したくなると思うので、スパッと変えました（笑）
今回は以上です。お疲れさまでした！
