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

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

ってことで

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

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

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

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

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

当ブログテーマではナチュリを使用しています。

ナチュリのカスタマイズを検索しても出てこなかったのでナチュリ以外で使用しているCSSを参考にしています。

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

完成はこんな感じです☟

⇩⇩⇩

今ご覧になっている文字の大きさ＆文字色にカスタマイズしていきますよ

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

はてなブログの文字色が黒で自分で見ていてチカチカするので少し薄めに変えてみました

（歳のせい…ではないと思う…そう思いたい…）

⇩⇩⇩

コードはこちら☟

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

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

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

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

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

色コードはこちらを参考にしました☟

www.colordic.org

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

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

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

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

⇩⇩⇩

コードはこちら☟

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

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

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

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

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

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

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

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

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

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

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

さいごに

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

まさに一目ぼれ！！

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

blog.hatena.ne.jp

このままでも十分かわいいのですがこのデザインを崩さず、もう少し落ち着いた感じにしたくてパソコンど素人がカスタマイズに挑戦しました

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

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

小さく黒黒しかった本文の文字を大きく少し薄い色にしたので見やすくなったかなと思います...♪*ﾟ

ナチュリのカスタマイズを検索してもなかったのでナチュリ以外でも対応できるコードを使用。

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

CSSの意味すら分からなかった私でも調べながらなんとか出来ました！

ブログを始めるまではCSSすら何か分からなかったパソコンど素人の私でも出来たのは先人者様たちがCSSを残してくれたおかげです。

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

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

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

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

www.golyat.jp