この記事では、はてなブログのデザインテーマ「Minimalism」のフォント部分をより見やすくするためのカスタマイズを解説しています。
Minimalismは、余計なものがないシンプルでおしゃれなテーマです。
しかし、少々文字が小さかったり、場所によってはフォントの種類が違うところがあり、揃っていないという点が以前から気になっていました。
その気になる部分を統一するカスタマイズです。
くうかCSSは他のテーマでも使えますよ。
CSSの追加は自己責任でお願いします。バックアップ（メモ帳にコピペ等）を取ってからおこなってください。
- はてなブログでフォントを整えたい
- Minimalismのフォントが揃っていないのが気になっている
＼ こちらもおすすめ ／
はてなブログで記事全体のフォントサイズを変更する
【デザイン】→【CSS】の部分に追加するカスタマイズです。
はてなブログは全体的に文字が小さめです。確かに、Minimalismも小さい。（スマホでは特に）
以下のCSSを追加してください。
/* 記事のフォントサイズ */
.entry-content {
font-size:17px;
}当ブログは17pxに設定しました。「17」の部分をお好みで変更してください。
トップページの記事概要部分のフォントサイズも小さいと感じるため、15pxに変更しました。
/* トップページ記事概要のフォントサイズ */
.page-archive .archive-entries .entry-description {
font-size:15px;
}「15」の部分をお好みで変更してください。
はてなブログでフォントの種類を統一する（Minimalism向け）
Minimalismを使っていてずっと気になっていたのが、サイドバーやグローバルメニューとフォントの種類が揃っていないということ。
くうか游ゴシックは美しいフォントだけど、ところどころ揃っていないのが気になっちゃって。
私はどちらかというと普通のフォントが好きなので、メイリオになるようにカスタマイズしてみました。
bodyでブログ全体を一発変換したかったのですが、どうやってもうまくいかないので、各箇所ごとに設定していきます。
ブログタイトル部分（タイトル画像を使っている場合は不要）
/* タイトルのフォント変更 */
#blog-title{
font-family: -apple-system, BlinkMacSystemFont,
“Hiragino Kaku Gothic ProN”, Meiryo, sans-serif;
}
/* タイトル説明のフォント変更 */
#blog-description{
font-family: -apple-system, BlinkMacSystemFont,
“Hiragino Kaku Gothic ProN”, Meiryo, sans-serif;
}記事部分（先程のフォントサイズと同時変更）
/* 記事のフォントサイズ・種類・文字間隔（20190601）変更 */
.entry-content {
font-size:17px;
font-family: -apple-system, BlinkMacSystemFont,
“Hiragino Kaku Gothic ProN”, Meiryo, sans-serif;
letter-spacing:1.0pt; /*文字間隔調整20190601*/
}記事タイトル・カテゴリータイトル部分
/* 記事タイトル・カテゴリータイトルのフォント種類・文字間隔（20190601）変更 */
.entry-title, .archive-heading {
font-family: -apple-system, BlinkMacSystemFont,
“Hiragino Kaku Gothic ProN”, Meiryo, sans-serif;
letter-spacing:1.0pt; /*文字間隔調整20190601*/
}プロフィール名前・ID
/* プロフィールIDのフォント種類変更 */
.id a {
font-family: -apple-system, BlinkMacSystemFont,
“Hiragino Kaku Gothic ProN”, Meiryo, sans-serif;
}プロフィール部分
/* プロフィールのフォント種類変更 */
.hatena-module-profile .profile-description {
font-family: -apple-system, BlinkMacSystemFont,
“Hiragino Kaku Gothic ProN”, Meiryo, sans-serif;
}はてなブログで強調させたい部分にマーカーを引く
Minimalismのスマホでの太字（strong）が表示されない問題は、スマホで太字を表示させるという記事で解決したので、さらに強調させたい部分に黄色のマーカーを引くようにしました。
あまり使っていない斜体ボタン（iの文字のボタン）を使います。
斜体ボタンを押した部分に、このように黄色のマーカーが引かれるようになります！
参考記事
「編集見たまま」モードではわかりませんが、プレビューするとわかります。
くうかバッチリできました！ありがとうございました。
【まとめ】はてなブログでフォントを統一・変更するカスタマイズ
- フォントサイズ・文字間隔の変更
- フォントの種類を揃える（Minimalism向け）
- 強調したい箇所にマーカーを引く
以上がフォント関連のカスタマイズをした部分です。
くうか完全に自己満足の範囲になるかもしれませんが、私としては見やすくなって満足しています！
Minimalismでカスタマイズしたことのまとめ
コメント