悩めるママの日記

40代後半アラフィフ主婦の日記です

【はてなブログのカスタマイズ】文字のサイズを大きくしました!

f:id:hanayasu:20180214121040p:plain

ずっと気になっていました。

私のブログの文字サイズが小さいということ…

 

当ブログで採用しているのは「Minimalism」というテーマです。

Minimalism - テーマ ストア

とてもシンプルで、スマホ・タブレットにも対応した、レスポンシブ対応のテーマです。

デザインは気に入っているのですが、ひとつだけ、文字が小さいということが気になっていました。

最近、老眼が進んできているようで、小さい文字はとても読みづらいです。

まして、スマホとなると、画面も小さくなるし、そのうえ文字まで小さいと、長時間見ていると疲れてきます。

書いている私が見にくいということは、同じ世代の読者の方も読みづらいのではないか、と思い、意を決して(大袈裟?)文字サイズを変更してみました。

 

ビフォー

f:id:hanayasu:20180214100541j:image

アフター

f:id:hanayasu:20180214100557j:image

 

いかがでしょうか?

読みやすくなっているでしょうか?

ま、自己満足かもしれませんが、私としては満足です。

 

では、どこをどう変更したのか。

とっても簡単だったので、参考にしてくださいね。

(あ、この設定ははてなブログでのお話です。)

 

デザイン→カスタマイズ→デザインCSS 

f:id:hanayasu:20180214105727p:plain

デザインCSSに以下の記述をします。

.entry-content{

font-size:〇〇px;

 

この際、既に書かれているコードは消さないでください。

〇〇には文字サイズを記載します。

このブログは 17px にしてみました。

ここはご自由に設定してみてください。

 

「Minimalism」というテーマはレスポンシブ対応なので、ここを変更するだけでスマホも文字サイズが大きくなりました。超簡単!

 

私が参考にした記事はこちらの記事です。

はてなブログのカスタマイズ2 ~ 文字サイズの変更 - ネットに生きる。 ~ IT技術、ネットのネタなどを幅広く紹介

 

こちらの記事には、見出しや箇条書きなどの要素ごとに大きさを変えたい場合についても記載されていました。

 

ちょっと解説しておきます。

 

まず、記事のソースコードを確認します。

確認方法は、記事上で右クリック→ページのソースを表示(V) でソースコードを表示します。

f:id:hanayasu:20180214112509p:plain

すると、こんなコードが出てきます。

f:id:hanayasu:20180214114121p:plain

 行の一番左にある<p>(地の文)とか<h3>(大見出し)をタグといいます。

それぞれのタグについてサイズを指定することができるのです。

 

例えば、大見出し(h3)を24px、地の文(p)を15pxにしたい場合は、

.entry-content h3{

font-size:24px;

}

 

.entry-content p{

font-size:15px;

}

と記述すればいいそうです。意外と簡単ですね。

 

文字サイズの変更、やってみると簡単でした。

これでスマホの画面でも読みやすくなったことでしょう。

 

HTMLやCSSを、超初心者にもわかりやすく解説してあるようです。

買ってみようかな? 

 

 

【2018.4.23追記】

現在、当ブログは「UnderShirt」というテーマに変更しています。

UnderShirt - テーマ ストア

 

 

最後まで読んでいただきありがとうございます。
ランキングに参加しています。

にほんブログ村 主婦日記ブログ お気楽主婦へ
にほんブログ村


40歳代ランキング