うるえの備忘録

経験から学んだこと、感じたこと、考えたことを記録する。あなたの学生生活が少し充実するように。

MENU

【ブログカスタマイズ】行間幅と文字の大きさを変更する方法

f:id:urue121143:20181218095723p:image

久しぶりにブログカスタマイズをしたうるえです。


今回は「行間幅の調整をしたい」「文字の大きさを調整したい」という方のために行間幅の変更と文字の大きさ変更のカスタマイズ方法について記録しておこうと思います。


簡単なコードを数行書くだけなので数分で変更できます。

どちらか片方だけの変更もできますので、行間幅や文字の大きさが気になっている方はこの記事を読んだ後や読みながらカスタマイズしてみて下さい。

 

僕は今回こちらの記事を参考にさせていただき変更を行いました。ありがとうございました。

www.elppar.com

 

行間幅の変更、文字の大きさ変更のCSSコード

.entry-content{

line-height:1.3em;

font-size:17px;

}

なんと、これをデザインCSSの部分に書き込むだけで完了です。簡単でしょ?(なれなれしい)

 

それでは、やり方を順を追ってなるべく噛み砕いて説明していきます。

 

カスタマイズの手順

まずはPCの画面へ

今回行う変更はPCからしかできませんので、まずはPCを立ち上げ自分のブログページを開きます。

 

デザイン

f:id:urue121143:20181209151104p:plain

f:id:urue121143:20181209151101j:plain

デザインをクリックし、2つ目の画像の部分を押すとデザインCSSという項目があると思います。

そこに先ほど紹介したコードを書き込みます。

.entry-content{

line-height:1.7em;

font-size:15px;

}

2行目が行間幅の変更コードなので、ここの数値を変更することで自分の好きな行間に設定できます。

このコードを書かなければ行間幅は変更されません。

 

僕はとりあえず参考にさせてもらった記事と同じ値を入れてみて、いい感じだったのでそのままにしています。

 

調整

3行目は文字の大きさ変更なので、ここの数値を変更すると文字の大きさを調整できます。

このコードを書かなければ文字の大きさは変更されません。

 

何度か変更してみて、スマホでも読みづらくない大きさか確認して調整して下さい。

僕は15px〜17pxくらいがおすすめです。

 

スマホとの連携

スマホで表示した場合でも変更が反映されるように画像の部分にチェックをまだ入れていない方はチェックを付けて下さい。

f:id:urue121143:20181209151107p:plain

 

設定を保存する

コードの書き込みが終わったら画面左上の設定を保存するというボタンをクリックします。

これで変更は完了です。

 

変更前後の比較

f:id:urue121143:20181209154222p:image

 

これが変更前のスマホで表示した時のものです。

やはり設定なしでは少し行間が広すぎて不自然な感じです。

f:id:urue121143:20181209154231p:image

 

これが変更後です。(同じくスマホで表示)

変更前よりは見やすくなったのではないでしょうか。

 

ちなみに画像の記事はこちら↓


 

まとめ

今回は行間幅の変更と文字の大きさ変更のカスタマイズについて書きました。

なるべく噛み砕いて説明したつもりですが、参考になりましたでしょうか。

みなさんも行間幅のコードや文字の大きさのコードの数値をお好きな値に調整してブログをカスタマイズしてみて下さい。


では、今回はこの辺で