MENU
カテゴリー
アーカイブ
くうか
整理収納・ゲーム・プログラミングが好きな40代専業主婦。小学生兄妹と夫の4人家族。
小さなおうちに引っ越して収納が減っちゃった!少しずつ物を減らしているゆるミニマリストでもあります。

フォント(文字)サイズ・種類・強調マーカーの変更カスタマイズ【はてなブログ】

こんにちは、主婦ブロガーくうかです。

当ブログで使わせていただいているテーマ『Minimalism』は、余計なものがないシンプルデザインです。
フォント部分をより見やすくするためのカスタマイズを行いました。
※現在はワードプレスへ移行しています。

Contents

フォント(文字)サイズ・種類・強調マーカーの変更カスタマイズ

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

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

1.記事のフォントサイズのカスタマイズ

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

このブログは17pxに設定しました。

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

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

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

2.フォントの種類を統一するカスタマイズ(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*/
}

記事タイトル・カテゴリータイトル(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の文字のボタン)を使います。
斜体ボタンを押した部分に、このように黄色のマーカーが引かれるようになります!

/* 斜体表示を蛍光ペン(黄)風に */
article em{
font-weight:bold;
font-style: normal;
margin:0 0.1em;
padding:0.1em 0.2em;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 60%, rgba(252,252,84,0.8) 60%) !important;
}

▼参考にさせていただきました(‘◇’)ゞ

「編集見たまま」モードではわかりませんが、プレビューするとわかります。
バッチリできました!ありがとうございました(*’▽’)

まとめ

  • フォントサイズ・文字間隔の変更
  • フォントの種類を揃える(Minimalism向け)
  • 強調したい部分にマーカーを引く

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

完全に自己満足の範囲になるかもしれませんが、私としては見やすくなって満足しています^^
今後フォント関連のカスタマイズをまた行った場合は、この記事を更新していこうと思います。

本日も最後までご覧いただき、ありがとうございました。

シンプルライフの参考になる記事をもっと読む(ブログ村)

読んだよ!のクリック嬉しいです…♪

にほんブログ村 にほんブログ村へ

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

よかったらシェアしてね!

ピックアップ記事

カテゴリー別の人気記事

コメント

コメント一覧 (4件)

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

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

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

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

MR-SKY へ返信する コメントをキャンセル

CAPTCHA


Contents
閉じる