ひとまず改装終了です。
知識ゼロからのチャレンジは小さな変更でも一大事。
しかも、スマホだけでやったし(笑)
「え？何か変わった？」
と、言われそうなくらい地味な改装(笑)
また勉強してから再び改装しようと思います。
改装した内容はこちら
- 文字サイズ・行の高さ
- 画像の上下の余白
- 見出しの変更
この中から、今回は文字サイズ・行の高さについて説明します。
.entry-content {font-size:○○px;}
文字サイズを変更する呪文
○○の部分に数字を入れます。
【例】
.entry-content {font-size:15px;}
文字サイズ
.entry-content {font-size:16px;}
文字サイズ
.entry-content {font-size:17px;}
文字サイズ
.entry-content {font-size:18px;}
文字サイズ
.entry-content {line-height:○○em;}
行の高さを変更する呪文
○○の部分に数字を入れます。
【例】
.entry-content {line-height:1.0em;}
文字サイズあかさたなはまやらわアカサタナハマヤラワあかさたなはまやらわアカサタナハマヤラワあかさたなはまやらわ
.entry-content {line-height:2.0em;}
文字サイズあかさたなはまやらわアカサタナハマヤラワあかさたなはまやらわアカサタナハマヤラワあかさたなはまやらわ
.entry-content {line-height:3.0em;}
文字サイズあかさたなはまやらわアカサタナハマヤラワあかさたなはまやらわアカサタナハマヤラワあかさたなはまやらわ
.entry-content {line-height:4.0em;}
文字サイズあかさたなはまやらわアカサタナハマヤラワあかさたなはまやらわアカサタナハマヤラワあかさたなはまやらわ
まとめて書いても大丈夫
.entry-content {
font-size:18px;
l ine-height:4.0em;
}
あかさたなはまやらわアカサタナハマヤラワあかさたなはまやらわアカサタナハマヤラワあかさたなはまやらわ
文字サイズだけでも、行の高さだけでも、組み合わせでも。
好きなものを選んで下さい。
はてなブログへの設定
ログイン後、右上角のアイコンをタップ→ブログをタップ
デザインをタップ→下の方に行ってPC版をタップ
ちっちゃいので広げます。
PC用の見え方（CSS）を設定
スパナ🔧マーク→デザインCSS
枠内をタップ→文字サイズ等を入力
※スマホではコピー、張り付けがうまくできませんでした。手打ち、もしくは定型文などを利用して張り付けることをオススメします。
枠外をタップして入力画面を閉じて、上の「変更を保存する」をタップ
スマホ用の見え方（CSS）を設定
スマホマーク📱→記事
記事下→枠内をタップして入力
※スマホ入力時の注意を確認！
追記
記事下でなくても、このエリアなら大丈夫です。
（もしかしたら、どこのエリアに入れるかで、ページの読み込み時間に影響するのかもしれませんが…）
枠外をタップして入力画面を閉じて、上の「変更を保存する」をタップ
スマホ入力時の注意
スマホの場合は、先程の文字サイズ等を入れるだけでは適用されません。
<style type="text/css">
</style>
で挟む必要があります。
【例】
<style type="text/css">
.entry-content {
font-size:16px;
line-height:1.6em;
}
</style>
以上で完了です。
文字のサイズや高さの単位は「em」以外にも「px」などもありますので、お好みのものをご利用ください。
