当記事は、2018年2月14日投稿、2018年4月23日、2019年11月21日に更新しています。
【2018.4.23追記】
現在、当ブログは「UnderShirt」というテーマに変更しています。
【2019.11.21追記】
現在は「マテリアルぽっぷ」というテーマに変更しています。
このテーマはもともと文字が大きく読みやすいので、文字サイズの変更は特におこなっておりません。
最近、ますます老眼が進んできたアラフィフ世代にやさしい仕様となっております。
ずっと気になっていました。
私のブログの文字サイズが小さいということ…
当ブログで採用しているのは「Minimalism」というテーマです。
とてもシンプルで、スマホ・タブレットにも対応した、レスポンシブ対応のテーマです。
デザインは気に入っているのですが、ひとつだけ、文字が小さいということが気になっていました。
最近、老眼が進んできているようで、小さい文字はとても読みづらいです。
まして、スマホとなると、画面も小さくなるし、そのうえ文字まで小さいと、長時間見ていると疲れてきます。
書いている私が見にくいということは、同じ世代の読者の方も読みづらいのではないか、と思い、意を決して（大袈裟？）文字サイズを変更してみました。
ビフォー
アフター
いかがでしょうか？
読みやすくなっているでしょうか？
ま、自己満足かもしれませんが、私としては満足です。
では、どこをどう変更したのか。
とっても簡単だったので、参考にしてくださいね。
（あ、この設定ははてなブログでのお話です。）
デザイン→カスタマイズ→デザインCSS
デザインCSSに以下の記述をします。
.entry-content{
font-size:〇〇px;
}
この際、既に書かれているコードは消さないでください。
〇〇には文字サイズを記載します。
このブログは 17px にしてみました。
ここはご自由に設定してみてください。
「Minimalism」というテーマはレスポンシブ対応なので、ここを変更するだけでスマホも文字サイズが大きくなりました。超簡単！
私が参考にした記事はこちらの記事です。
はてなブログのカスタマイズ2 ～ 文字サイズの変更 - ネットに生きる。 ～ IT技術、ネットのネタなどを幅広く紹介
こちらの記事には、見出しや箇条書きなどの要素ごとに大きさを変えたい場合についても記載されていました。
ちょっと解説しておきます。
まず、記事のソースコードを確認します。
確認方法は、記事上で右クリック→ページのソースを表示(V) でソースコードを表示します。
すると、こんなコードが出てきます。
行の一番左にある<p>（地の文）とか<h3>（大見出し）をタグといいます。
それぞれのタグについてサイズを指定することができるのです。
例えば、大見出し(h3)を24px、地の文(p)を15pxにしたい場合は、
.entry-content h3{
font-size:24px;
}
.entry-content p{
font-size:15px;
}
と記述すればいいそうです。意外と簡単ですね。
文字サイズの変更、やってみると簡単でした。
これでスマホの画面でも読みやすくなったことでしょう。
HTMLやCSSを、超初心者にもわかりやすく解説してあるようです。
買ってみようかな？
最後まで読んでいただきありがとうございます。
ランキングに参加しています。
