隣の花の育てかた

~気になるお隣さん【5人家族+ねこ】の家庭事情~

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

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; の6桁の数字コードを変えてお好みの色にしてくださいね

 

www.colordic.org

 

 

 

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

 

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

 

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

 

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

 

f:id:Sakuranbox:20191018172010j:image

 

⇩⇩⇩

f:id:Sakuranbox:20191018172022j:image

 

コードはこちら☟

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

 

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

 

いまPCで読んでいるこのブログの文字の大きさは17pxに設定してあります 

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

 

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

 

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

 

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

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

 

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

 

分けるかまとめるかはお好みかな?

 

 

 

スマホでは17pxでは大きい??スマホのみサイズ変更するCSS

 

上記のCSSはPC版もスマホ版も同じ17pxで表示されます

 

ずっとスマホも17pxのままでいたのですが

最近なんだか文字が大きく感じて読みにくいなと感じるようになりました

 

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

 

 

CSSはこちら☟

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

 

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

 

 

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

 

f:id:Sakuranbox:20200604133946j:plain
f:id:Sakuranbox:20200604133950j:plain

 

 

 

さいごに

f:id:Sakuranbox:20191012211549j:image

どのテーマにしようかテーマストアで選んでいたらブログタイトルにぴったりでかわいいテーマを発見☆。.:*・゜

 

まさに一目ぼれ!!

 

それが当ブログで使用させて頂いているのゴリアテさん制作のナチュリ~Naturally

blog.hatena.ne.jp

 

このままでも十分かわいいのですがこのデザインを崩さず、

もう少し落ち着いた感じにしたくてパソコンど素人がカスタマイズに挑戦しました

 

自分の備忘録でもあるカスタマイズシリーズ。

今回は記事本文に関するカスタマイズでした

 

 

小さく黒々しかった本文の文字サイズをPC→17px スマホ→16px とそれぞれに適した大きさで少し薄い色にしたので見やすくなりました...♪*゚

 

 

パソコン初心者が一つカスタマイズするのにかかるのは1分単位ではなく1時間単位!!

 

CSSの意味すら分からなかった私でも調べながらできたのは先人者様たちがCSSを残してくれたおかげです

 

 

今回、コードを参考にさせて頂いたCSSはナチュリではないテーマを使用している方から頂いているのでどのテーマでも対応できるかと思いますが念のため、前のCSSをコピペしてメモに残してから書き加えましょう

 

もし失敗してもコピペを戻せば元に戻せるので安心感が違います。

 

まだカスタマイズ未完なのでCSSのお勉強は暫く続きそうです!

 

 

テーマ製作者ゴリアテさんのブログはこちら☟

www.golyat.jp