雪ん子’s report

スマホの使い方(初級編)と日々のことをお伝えします。

雪ん子’s report

スマホだけでブログに挑戦!

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




こんばんは。雪ん子です。

ひとまず改装終了です。
 
知識ゼロからのチャレンジは小さな変更でも一大事。
 
しかも、スマホだけでやったし(笑)
 
「え?何か変わった?」
と、言われそうなくらい地味な改装(笑)
 
また勉強してから再び改装しようと思います。
 

 

改装した内容はこちら

 

  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:plainf:id:snow0303:20170128095830j:plain
 
デザインをタップ→下の方に行ってPC版をタップ
f:id:snow0303:20170213195531j:plainf:id:snow0303:20170213195546j:plain
 
ちっちゃいので広げます。
f:id:snow0303:20170128100241j:plain
 

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

 
スパナ🔧マーク→デザインCSS

f:id:snow0303:20170128120528j:plainf:id:snow0303:20170128120540j:plain
 
枠内をタップ→文字サイズ等を入力
※スマホではコピー、張り付けがうまくできませんでした。手打ち、もしくは定型文などを利用して張り付けることをオススメします。
f:id:snow0303:20170128120600j:plainf:id:snow0303:20170128120614j:plain
 
枠外をタップして入力画面を閉じて、上の「変更を保存する」をタップ
f:id:snow0303:20170128120625j:plain
 

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

 
スマホマーク📱→記事

f:id:snow0303:20170128120825j:plainf:id:snow0303:20170128120835j:plain
 
記事下→枠内をタップして入力
※スマホ入力時の注意を確認!
f:id:snow0303:20170128120844j:plainf:id:snow0303:20170128120849j:plain
 
 
追記
記事下でなくても、このエリアなら大丈夫です。
(もしかしたら、どこのエリアに入れるかで、ページの読み込み時間に影響するのかもしれませんが…)
↓↓↓

f:id:snow0303:20170322173339j:plainf:id:snow0303:20170322173541j:plain
f:id:snow0303:20170322173559j:plain
追記ここまで
 
 
枠外をタップして入力画面を閉じて、上の「変更を保存する」をタップ
f:id:snow0303:20170128120854j:plain
 

スマホ入力時の注意

 
スマホの場合は、先程の文字サイズ等を入れるだけでは適用されません。
 
<style type="text/css">
 
</style>
 
で挟む必要があります。
 
【例】
 
<style type="text/css">
.entry-content {
font-size:16px;
line-height:1.6em;
}
</style>
 
 
以上で完了です。
 
文字のサイズや高さの単位は「em」以外にも「px」などもありますので、お好みのものをご利用ください。