雪ん子’s report

スマホ1つでブログは書けるか⁉ スマホの使い方(初級編)と日々のことをお伝えします。

文字サイズと行の高さを変更



ひとまず改装終了です。

知識ゼロからのチャレンジは小さな変更でも一大事。

しかも、スマホだけだし(笑)


「え?何か変わった?」
と、言われそうなくらい地味な改装(笑)


また勉強してから再び改装しようと思います。


目次

改装した内容はこちら

  1. 文字サイズ・行の高さ
  2. 画像の上下の余白
  3. 見出しの変更

この中から、今回は文字サイズ・行の高さについて説明します。

.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;
}

あかさたなはまやらわアカサタナハマヤラワあかさたなはまやらわアカサタナハマヤラワあかさたなはまやらわ


文字サイズだけでも、行の高さだけでも、組み合わせでも。
好きなものを選んで下さい。

はてなブログへの設定

ログイン後、右上角のアイコンをタップ→ブログをタップ
f:id:snow0303:20170128095815j:plain:w155f:id:snow0303:20170128095830j:plain:w155

デザインをタップ→下の方に行ってPC版をタップ
f:id:snow0303:20170213195531j:plain:w155f:id:snow0303:20170213195546j:plain:w155

ちっちゃいので広げます。
f:id:snow0303:20170128100241j:plain:w155

PC用の見え方(CSS)を設定

スパナ🔧マーク→デザインCSS
f:id:snow0303:20170128120528j:plain:w155f:id:snow0303:20170128120540j:plain:w155


枠内をタップ→文字サイズ等を入力
※スマホではコピー、張り付けがうまくできませんでした。手打ち、もしくは定型文などを利用して張り付けることをオススメします。
f:id:snow0303:20170128120600j:plain:w155f:id:snow0303:20170128120614j:plain:w155


枠外をタップして入力画面を閉じて、上の「変更を保存する」をタップ
f:id:snow0303:20170128120625j:plain:w155

スマホ用の見え方(CSS)を設定

スマホマーク📱→記事
f:id:snow0303:20170128120825j:plain:w155f:id:snow0303:20170128120835j:plain:w155


記事下→枠内をタップして入力
※スマホ入力時の注意を確認!
f:id:snow0303:20170128120844j:plain:w155f:id:snow0303:20170128120849j:plain:w155

追記
記事下でなくても、このエリアなら大丈夫です。
(もしかしたら、どこのエリアに入れるかで、ページの読み込み時間に影響するのかもしれませんが…)

↓↓↓

f:id:snow0303:20170322173339j:plain:w155f:id:snow0303:20170322173541j:plain:w155f:id:snow0303:20170322173559j:plain:w155
追記ここまで


枠外をタップして入力画面を閉じて、上の「変更を保存する」をタップ
f:id:snow0303:20170128120854j:plain:w155

スマホ入力時の注意

スマホの場合は、先程の文字サイズ等を入れるだけでは適用されません。

<style type="text/css">

</style>

で挟む必要があります。

【例】

<style type="text/css">
.entry-content {
font-size:16px;
line-height:1.6em;
}
</style>



以上で完了です。

文字のサイズや高さの単位は他にもあるので、もっと勉強して別の機会にお伝えします。