チトシログ

ちとしぃという名前でブログ書いてます。

テンプレートの行間を調整してたら見やすくなったよ

今使っているテンプレートの行間が狭かったり広かったりしたので、他のブロガーさんが紹介しているCSSをコピペしてカスタマイズしてみました。 

利用しているテンプレート

このブログは『Innocent』というテンプレートを使っています。

テンプレートを選ぶとき、シンプル・記事が左側の2カラムのものが見やすくていいかな?と思いテーマストアからインストールして使うことにしました。

今ちょっと見てきたら”23055インストール”となってます。けっこう使っている人が多いんですね^^

 

はてなブログテーマ「Innocent」を公開しました - MoonNote

 

ただちょっと行の隙間が気になるんですよね。

↓下の画像はテンプレートそのままで書いた記事のスクリーンショットです↓


f:id:chitocie:20180526150604p:plain


 [Enter]キーを押して改行したとき、前の行との間がちょっと広い。

逆に、改行せず文章が長くなり二行以上になったときは詰まりすぎて見にくいと感じます。

 

分かりやすく書き込みしたのが下の画像です↓


f:id:chitocie:20180526150349p:plain


cssを書き加えて行間を調節

 そこで、ちょっとだけみやすくなるようにcssで調整してみよう!と思い、検索してみました。

www.elppar.com

 ↑こちらの記事を参考に、

/* 行間とフォントサイズ */
.entry-content {
line-height : 2.0em ;

font-size:17px;
}

 

/* 改行修正 */
.entry-content p {

margin:0.5em 0;

}

 と書き加えました。というかほぼ丸々コピペです!

行間の隙間だけエルパさんより少し広めにしてみました。[line-height ]のところですね。エルパさんは1.7emとされているところを2.0emにしました。あとフォントサイズも17pxにすると最初より字が少しだけ大きくなってこのようになります↓

 


f:id:chitocie:20180526150612p:plain


どうですか?最初の状態より行間が広すぎず狭すぎず、カスタム前よりこっちのほうが断然見やすいですよね?

※現在フォントも『游ゴシック体』に変更してるので、画像のフォントとはちょっと違ってます!

おしまいに

CSSに疎い私でもブログのカスタマイズができるなんて、本当に分かりやすく情報を公開して下さるブロガーさん様様でございます(敬)

これからもいろいろ試しながら見やすいブログにしていこー!

(ちょっとだけおしゃれな感じにもしてみたい。)