MENU
アーカイブ
くうか
ミニマリスト
ミニマリスト・ブロガー・ライター。
整理収納アドバイザー準1級、元SE。
引っ越しをきっかけに物を減らすことを決意。快適なシンプルライフへの過程を発信しています。
SWELLでサイト型トップページを作る!解説→CLICK!

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

当ページのリンクには広告が含まれています。
はてなブログでフォント関連カスタマイズ

こんにちは、ゆるミニマリスト主婦のくうかです。

この記事では、はてなブログのデザインテーマ「Minimalism」のフォント部分をより見やすくするためのカスタマイズを解説しています。

Minimalismは、余計なものがないシンプルでおしゃれなテーマです。

しかし、少々文字が小さかったり、場所によってはフォントの種類が違うところがあり、揃っていないというところが以前から気になっていました。

その気になる部分を統一するカスタマイズです。

くうか

CSSは他のテーマでも使えますよ。

カスタマイズは自己責任でお願いします。バックアップ(メモ帳にコピペ等)を取ってからおこなってください。

※現在当ブログはワードプレスへ移行しています。

目次

はてなブログで記事全体のフォントサイズの変更カスタマイズ

【デザイン】→【CSS】の部分に追加するカスタマイズです。

はてなブログは全体的に文字が小さめです。確かに、Minimalismも小さい。(スマホでは特に)

以下のCSSを追加してください。

/* 記事のフォントサイズ */
.entry-content {
font-size:17px;
}

当ブログは17pxに設定しました。「17」の部分をお好みで変更してください。

トップページの記事概要部分のフォントサイズも小さいと感じるため、15pxに変更しました。

/* トップページ記事概要のフォントサイズ */
.page-archive .archive-entries .entry-description {
font-size:15px;
}

「15」の部分をお好みで変更してください。

はてなブログでフォントの種類を統一する変更カスタマイズ(Minimalism向け)

Minimalismを使っていてずっと気になっていたのが、サイドバーやグローバルメニューとフォントの種類が揃っていないということ。

くうか

游ゴシックは美しいフォントだけど、ところどころ揃っていないのが気になっちゃって。

私はどちらかというと普通のフォントが好きなので、メイリオになるようにカスタマイズしてみました。

bodyでブログ全体を一発変換したかったのですが、どうやってもうまくいかないので、各箇所ごとに設定していきます。

なお、2019年6月1日に記事と記事タイトル・カテゴリータイトルの文字間隔を少し開ける設定を追加しました。記事タイトル・カテゴリータイトルの設定を一括で行えるように変更しました。

ブログタイトル部分(タイトル画像を使っている場合は不要)

/* タイトルのフォント変更 */
#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向け)
  • 強調したい部分にマーカーを引く

以上がフォント関連のカスタマイズをした部分です。

くうか

完全に自己満足の範囲になるかもしれませんが、私としては見やすくなって満足しています!

ぽちっとしていただけると嬉しいです

にほんブログ村 ライフスタイルブログ ミニマリストへ

楽天ROOMに愛用品を登録しています

楽天ROOM
はてなブログでフォント関連カスタマイズ

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメント一覧 (6件)

  • こんにちわ。マーカー分かりやすくて可愛いですね。私も早速させていただきました。ありがとうございます。カスタマイズはまると楽しくて困りますね。

  • ゆうりんさん
    こんにちは。ありがとうございます^^
    カスタマイズ楽しいですよね。
    自分にしかわからないカスタマイズもガンガンしてます!

  • くうか様、はじめまして。私ははてなブログで記事を書いています。先日くうか様のブログ内の記事で、文字の変更の仕方がわかりやすく、私でも行えましたので勝手ではありますが、私のブログで紹介させて頂きました。事後報告になりますが、よろしくお願いします。

  • ダブルナッツさん
    はじめまして。
    記事の参考&ご紹介、ありがとうございます!
    お役に立てて嬉しいです(^^♪

  • はじめまして。
    当方はてなブログMinimalismを使用しております。
    以前から文字によって大きさが微妙に違うのが気になっていました。
    例えば平仮名の「う」が少し小さいとか。
    おかげさまで見やすいフォントに変更できて満足しております。
    ありがとうございました。

    • 茶谷ゆきおさん
      はじめまして、コメントありがとうございます!
      Minimalismは細かいところに気になる部分がありますよね。
      お役に立ててとても嬉しいです^^

コメントする

CAPTCHA


目次