はてなブログでフォント変更カスタマイズ

こんにちは、ゆるミニマリスト主婦のくうかです。
はてなブログのデザインテーマ「Minimalism」は、余計なものがないシンプルなテーマです。
しかし、少々文字が小さかったり、場所によってフォントの種類が違うところがあり、以前から気になっていました。

今回はMinimalismでフォント部分をより見やすくするためのカスタマイズを行いました!(他のテーマでも使えます)
※現在当ブログはワードプレスへ移行しています。
フォント(文字)サイズ・種類・強調マーカーの変更カスタマイズ
【デザイン】→【CSS】の部分に追加するカスタマイズです。
カスタマイズは自己責任でお願いします。バックアップ(メモ帳にコピペ等)を取ってから行ってください。
1. 記事全体のフォントサイズのカスタマイズ
はてなブログは全体的に文字が小さめです。
確かに、Minimalismも小さい。(特にスマホ)
当ブログは17pxに設定しました。
/* 記事のフォントサイズ */
.entry-content {
font-size:17px;
}
トップページの記事概要部分のフォントサイズも小さいと感じるため15pxに変更しました。
/* トップページ記事概要のフォントサイズ */
.page-archive .archive-entries .entry-description {
font-size:15px;
}
2. フォントの種類を統一するカスタマイズ(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*/
}
記事タイトル・カテゴリータイトル(20181024)部分
/* 記事タイトル・カテゴリータイトルのフォント種類・文字間隔(20190601)変更 */
.entry-title, .archive-heading {
font-family: -apple-system, BlinkMacSystemFont,
“Hiragino Kaku Gothic ProN”, Meiryo, sans-serif;
letter-spacing:1.0pt; /*文字間隔調整20190601*/
}
プロフィール名前・ID 2018.10.24追加
/* プロフィール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;
}
3. 太字よりさらに強調させたいところにマーカーを引く
Minimalismのスマホ太字(strong)表示されない問題は以下の記事で解決したので、


さらに強調させたい部分に黄色のマーカーを引くようにしました。
あまり使っていない斜体ボタン(iの文字のボタン)を使います。
斜体ボタンを押した部分に、このように黄色のマーカーが引かれるようになります!
参考にさせていただきました!


「編集見たまま」モードではわかりませんが、プレビューするとわかります。
バッチリできました!ありがとうございました。
はてなブログフォントカスタマイズまとめ
- フォントサイズ・文字間隔の変更
- フォントの種類を揃える(Minimalism向け)
- 強調したい部分にマーカーを引く
以上がフォント関連のカスタマイズをした部分です。



完全に自己満足の範囲になるかもしれませんが、私としては見やすくなって満足しています!
コメント
コメント一覧 (4件)
こんにちわ。マーカー分かりやすくて可愛いですね。私も早速させていただきました。ありがとうございます。カスタマイズはまると楽しくて困りますね。
ゆうりんさん
こんにちは。ありがとうございます^^
カスタマイズ楽しいですよね。
自分にしかわからないカスタマイズもガンガンしてます!
くうか様、はじめまして。私ははてなブログで記事を書いています。先日くうか様のブログ内の記事で、文字の変更の仕方がわかりやすく、私でも行えましたので勝手ではありますが、私のブログで紹介させて頂きました。事後報告になりますが、よろしくお願いします。
ダブルナッツさん
はじめまして。
記事の参考&ご紹介、ありがとうございます!
お役に立てて嬉しいです(^^♪