はてなブログの本文の文字が小さく黒々しかったので大きく&色を少し薄くカスタマイズしてみました!
ってことで
今回は記事本文に関するカスタマイズ編!
まだまだ全体のカスタマイズは未完ですが自分がどのコードを使っているのか把握するための備忘録です
何かあっても責任負えないので必ず事前にバックアップをしてから追加しましょう!
色やデザインの参考になれば幸いです
本文の文字の完成はこんな感じ
当ブログテーマではナチュリを使用していますが他のブログテーマで使用しているCSSを参考にしています。
自分のブログを見たときに(歳のせいか)文字が小さく感じたのでカスタマイズしてみました
完成はこんな感じです☟
⇩⇩⇩
今見てる文字の大きさ&文字色にカスタマイズしていくよ
記事本文の文字色を変える
はてなブログの文字色が黒で自分で見ていてチカチカするので少し薄めに変えてみました
(歳のせい…ではないと思う…そう思いたい…)
⇩⇩⇩
コードはこちら☟
デザイン➡スパナマークのカスタマイズ➡デザインCSSにコピペしてください
フォントの色変更はこちらの記事を参考にしました☟
color: #5e5554; の6桁の数字コードを変えてお好みの色にしてくださいね
ブログ本文のフォントの大きさと行間を変える
本文の文字が小さいと目が疲れるお年頃になってきたので(汗
大きく見やすくしてみました!
文字色を薄くしたので小さいとより読みにくくなったというのもありますが…
⇩⇩⇩
コードはこちら☟
デザイン➡スパナマークのカスタマイズ➡デザインCSSにコピペしてください
いまPCで読んでいるこのブログの文字の大きさは17pxに設定してあります
このくらい大きい方が読みやすいですよね!
pxとemの数字を変えてあなたのブログに合った文字の大きさを決めて下さいね
フォントのサイズや行間はこちらの記事がわかりやすかったです☟
フォントの色とサイズ・行間のコードをあわせることもできます
私は後で変えたくなるかもしれないので敢えて分けて貼り付けてありますが、一緒にまとめることもできます
分けるかまとめるかはお好みかな?
スマホでは17pxでは大きい??スマホのみサイズ変更するCSS
上記のCSSはPC版もスマホ版も同じ17pxで表示されます
ずっとスマホも17pxのままだったけど
最近なんだか文字が大きく感じて読みにくいなと感じるようになりました
なのでスマホ版のみフォントサイズを1つ下げて表示させるようにしました
CSSはこちら☟
上記のCSSの真下に続けてコピペしてください
フォントを1つ下げただけでスクロールも少なくなり目に入りやすくなりました


さいごに
どのテーマにしようかテーマストアで選んでいたらブログタイトルにぴったりでかわいいテーマを発見☆。.:*・゜
まさに一目ぼれ!!
それが当ブログで使用させて頂いているのゴリアテさん制作のナチュリ~Naturally
このままでも十分かわいいのですが
この世界観を壊さずもう少し落ち着いた感じにしたくてパソコンど素人がカスタマイズに挑戦しました
自分の備忘録でもあるカスタマイズシリーズ。
今回は記事本文に関するカスタマイズでした
小さく黒々しかった本文の文字サイズをPC→17px スマホ→16px とそれぞれに適した大きさで少し薄い色にしたので見やすくなりました...♪*゚
パソコン初心者が一つカスタマイズするのにかかるのは1分単位ではなく1時間単位!!
CSSの意味すら分からなかった私でも調べながらできたのは先人者様たちがCSSを残してくれたおかげです
今回、コードを参考にさせて頂いたCSSはナチュリではないテーマを使用している方から頂いているのでどのテーマでも対応できるかと思いますが念のため、前のCSSをコピペしてメモに残してから書き加えましょう
もし失敗してもコピペを戻せば元に戻せるので安心感が違います。
まだカスタマイズ未完なのでCSSのお勉強は暫く続きそうです!
テーマ製作者ゴリアテさんのブログはこちら☟