クラシトトノエ*賃貸の階段のあるおうち

メゾネット2LDKのおうちでインテリア・収納・家計を整えて、シンプルライフを目指しています

はてなブログカスタマイズーフォント編ー

最近ブログのカスタマイズにハマっているku-ka(くうか)です。

使わせていただいているテーマ「Minimalism」は、本当にシンプルで余計なものがなく、好みです♡
シンプルなところはそのままで、なおかつできるだけ見やすいブログにしたいと思い、ちまちまとカスタマイズをしたのでご紹介します。

SEだった頃のクセですかね。
ハマると何時間も没頭してしまいます(笑)
そのうち子供も学校から帰ってきてしまったり・・・(^^;

 

フォントに関するカスタマイズ

f:id:ku-kahan:20181004170620j:plain

デザイン>CSSの部分に追加するカスタマイズです。
※カスタマイズは自己責任でお願いします。バックアップを取ってから行ってください。

1.フォントの大きさをカスタマイズ

はてなブログは文字が小さめらしいです。
確かに、PCはいいけどスマホの文字は小さいかも・・・

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

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

どうでしょうか?見やすいでしょうか?
17pxでも見やすかったですよ。

 

2.フォントの種類をカスタマイズ

ずっと気になっていたのが、サイドバーやグローバルメニューとフォントの種類が揃っていないということ。
游ゴシックは美しいフォントなんですが、揃っていないのが気になってしまって…
私はどちらかというと普通のフォントが好きなので、メイリオになるようにしてみました。

▼読みやすいフォントはどれなのか参考にさせていただきました。

murashun.jp

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;
}

 

☆トップページの記事概要部分

/* トップページ記事概要 */
.page-archive .archive-entries .entry-description {
font-size:15px;
}

 

☆記事部分(先程のフォントサイズと同時変更)

/* 記事のフォントサイズ・種類変更 */
.entry-content {
font-size:16px;
font-family: -apple-system, BlinkMacSystemFont,
"Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

 

☆記事タイトル部分

/* 記事タイトル */
.entry-title {
font-family: -apple-system, BlinkMacSystemFont,
"Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

 

☆プロフィール名前・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;
}

 

☆カテゴリータイトル 2018.10.24追加

/* カテゴリータイトル */
.archive-heading {
font-family: -apple-system, BlinkMacSystemFont,
"Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

 

3.太字よりさらに強調させたいところにマーカーを引く

▼スマホ太字(strong)問題は解決したので、

www.kurasitotonoe.com

さらに強調させたい部分に黄色のマーカーを引くようにしました。
使っていない斜体ボタン(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;
}

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

www.gadgerepo.com

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

 

まとめ

Point

1.フォントの大きさ
2.フォントの種類
3.強調したい部分にマーカーを引く

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

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

最後までお読みいただきありがとうございました。