はてなブログのデザイン「Minimalism」で、記事中の文字の大きさと行の高さを変更する方法

はてなブログのデザイン「Minimalism」を使用しているこのブログ。

今回は、ブログの記事本文の文字サイズを変更したくて、ググって実践してみました。

f:id:kayoko_cafe:20200506145433j:plain

Minimalismというデザインをインストールした直後は、文字のサイズがやや小さめ。

具体的には15pxなんだそうです。

しかも、文字が小さめの上に、写真は大きめに表示されるので。

画像とのバランスから見ても、文字が小さいなぁ〜と感じていました。

で、まず写真を小さく表示させるようにカスタマイズして。

その方法はこちらに書いてます↓

それでも、やっぱり文字が小さめに感じたので。

文字サイズをもう少しだけ大きくしたい！ということで。

変更方法をググって、こちらの記事を参考にさせて頂きました。↓

CSSが分からない私にありがたい、コピペでできる変更方法♡

そして、間違いなく変更できました。(´ｰ｀)

ありがとうございます♡

上記の記事にあった、以下のCSSコードをコピーして　↓

/*フォントサイズ*/
.entry-content p {font-size: 17px;}

ブログ編集画面→デザイン→工具マーク→「｛｝デザインCSS」の1番下に貼り付けます。

そして、「17px」のところの数字を変更します。

ちなみに、このブログは17pxにしました。

最後に「変更を保存する」をクリック。

これで完成です！

確認してみて…。うん、見やすくなった♪(^ ^)

画像と文字とのサイズ感も、画像が主張しすぎず、以前より良くなったと思います。

ただ、行間がちょっと空きすぎてるような気もする…。(-_-)

ということで、上記の参考サイトに載っていた、行間の幅の調整も設定してみました。

上記の参考記事にあった、以下のCSSコードをコピーして　↓

/*行の高さ*/
.entry-content {line-height:2.0em;}

ブログ編集画面→デザイン→工具マーク→「｛｝デザインCSS」の1番下に貼り付けます。

そして、「2.0em」のところの数字を変更します。

このブログでは、このままにしています。

最後に「変更を保存する」をクリック。

これで完成です！

これで、画像サイズと文字の大きさのバランス、行間の空き具合が調整できました。(´ｰ｀)

kayoko＠おうちcafe

はてなブログのデザインテーマ「Minimalism」のインストールからカスタマイズまでの実践集　↓

いちcafe日記