【はてなブログ】記事本文の文字色とフォントサイズ・行間のカスタマイズをしてみた～ナチュリ～

f:id:Sakuranbox:20191018100259j:image

はてなブログの本文の文字が小さく黒々しかったので大きく＆色を少し薄くカスタマイズしてみました

ってことで

今回は記事本文に関するカスタマイズ編！

まだまだ全体のカスタマイズは未完ですが自分がどのコードを使っているのか把握するための備忘録です

ひこ

何かあっても責任負えないので必ず事前にバックアップをしてから追加しましょう！

色やデザインの参考になれば幸いです

本文の文字の完成はこんな感じ
記事本文の文字色を変える
- コードはこちら
ブログ本文のフォントの大きさと行間を変える
- コードはこちら
- フォントの色とサイズ・行間のコードをあわせることもできます
スマホでは１７ｐｘでは大きい？？スマホのみサイズ変更するＣＳＳ
- ＣＳＳはこちら
- 全部まとめたＣＳＳがこちら
カスタマイズはまだまだ続く…

本文の文字の完成はこんな感じ

当ブログテーマではレスポンシブのナチュリを使用していますが他のブログテーマで使用しているCSSを参考にしています

自分のブログを見たときに文字が小さく感じたのでカスタマイズしてみました

≪完成はこんな感じ≫

f:id:Sakuranbox:20191018171859j:plain

⇩⇩⇩

f:id:Sakuranbox:20191018172022j:plain

今見てる文字の大きさ＆文字色にカスタマイズしていくよ

記事本文の文字色を変える

はてなブログの文字色が真っ黒で見ていてチカチカするので少し薄めにしました

f:id:Sakuranbox:20191018171859j:image

⇩⇩⇩

f:id:Sakuranbox:20191018171920j:image

コードはこちら

デザイン➡スパナマークのカスタマイズ➡デザインCSSにコピペしてください

/* 記事本文の文字色 */
.entry-content {
    color: #5e5554;
}

フォントの色変更はこちらの記事を参考にしました☟

はてなブログのフォント、見出し等をカスタマイズ！ - モーリーのメモ

color: #5e5554; の６桁の数字コードを変えてお好みの色にしてくださいね

www.colordic.org

ブログ本文のフォントの大きさと行間を変える

本文の文字が小さいと目が疲れるお年頃になってきたので（汗

大きく見やすくしてみました！

文字色を薄くしたので小さいとより読みにくくなったというのもありますが…

f:id:Sakuranbox:20191018172010j:image

⇩⇩⇩

f:id:Sakuranbox:20191018172022j:image

コードはこちら

デザイン➡スパナマークのカスタマイズ➡デザインCSSにコピペしてください

/* 文字サイズ */
.entry-content p {
font-size:17px;/*文字の大きさ*/
line-height:1.75em;/*行間*/
}

いまＰＣで読んでいるこのブログの文字の大きさは１７ｐｘに設定してあります

このくらい大きい方が読みやすいですよね！

pxとemの数字を変えてあなたのブログに合った文字の大きさを決めて下さいね

フォントのサイズや行間はこちらの記事がわかりやすかったです☟

【コピペ＋α】はてなブログで文章を読みやすくするカスタマイズ集 - いつ俺〜いつから俺ができないと錯覚していた？〜

フォントの色とサイズ・行間のコードをあわせることもできます

私は後で変えたくなるかもしれないので敢えて分けて貼り付けてありますが、一緒にまとめることもできます

/* 文字の色・サイズ・行間 */
.entry-content p {
color: #5e5554;
font-size:17px;
line-height:1.75em;
}

分けるかまとめるかはお好みで

スマホでは１７ｐｘでは大きい？？スマホのみサイズ変更するＣＳＳ

上記のＣＳＳはＰＣ版もスマホ版も同じ１７ｐｘで表示されます

ずっとスマホも１７ｐｘのままだったけど大きく感じて読みにくいなと感じるようになりました

なのでスマホ版のみフォントサイズを１つ下げて表示させるようにしました

ＣＳＳはこちら

上記のＣＳＳの真下に続けてコピペしてください

@media screen and (max-width:768px){
.entry-content p {
font-size:16px;
line-height:1.75em;
}
}

フォントを１つ下げただけでスクロールも少なくなり目に入りやすくなりました

全部まとめたＣＳＳがこちら

/* 記事本文の文字色 */
.entry-content {
    color: #5e5554;
}
/* 文字サイズ */
.entry-content p {
font-size:17px;/*文字の大きさ*/
line-height:1.75em;/*行間*/
}
@media screen and (max-width:768px){
.entry-content p {
font-size:16px;
line-height:1.75em;
}
}