文字の大きさを変えるだけでブログの読みやすさは格段にUPする

f:id:sera1098:20180206230537j:plain:w631

こんにちは,あいすです


あなたがブログを書くときに気をつけていることは何ですか?


検索されやすくする
読みやすい文章にする
効果的な見出しやタイトルを考える


などなどたくさんあると思いますが,ぼくは読みやすいデザインにすることを大切にしています。

そこで今回は,読みやすさを大切にしている理由と読みやすくするための方法をシェアします!

SANGOにあこがれて

突然ですが,すばらしいWordPressテーマ SANGOを知っていますか?


居心地の良さを追求したというその言葉通り,いつまでも見ていたくなるデザインのテーマです.

知らない方はぜひ一度見てください.きっと驚きます!

SANGO | 心地良さを追求したWordPressテーマ


SANGOを使ったサイトでは,読みやすいからか無意識の内に文章を読み進めてしまいます笑

ここからぼくは,ブログの読みやすさが大切だと感じはじめました.


読みやすさはめっちゃ大切

ブログを書くことが大好きな方は,自ずとブログの内容を高めることに夢中なって,デザインをおろそかにしがちですが,それすごくもったいないです…


デザインって思ったよりも大事なんです.


たとえば、どんなに内容がすばらしくても,読みづらいとそれだけで敬遠してしまいますよね.

読みづらい文章なんて誰も読みたくありません.


せっかく発信しているのに,読んでもらえないなんて悲しすぎます...

そんな気持ちにならないためにも,読みやすいデザインであることは大切なんです.


読みやすいブログは文字が大きい

自分のブログに読みにくさを感じていたぼくは、読みやすいデザインのサイトを見て回りました.

そのとき、出会ったのが冒頭で紹介した SANGO です.


そして,読みやすいデザインは文字が大きいことに気がつきました.


こちらの画像を見てください. 文字の大きさが違うだけなのに,読みやすさが全然違います!


f:id:sera1098:20180207201548j:plain:w300f:id:sera1098:20180207201537j:plain:w300


どうですか?めっちゃ読みやすくないですか?

文字の大きさを変えただけなのに,こんなに違うとは驚きです!

文字の大きさを変える方法

さて、文字の大きさが大切だということがわかったところで,実際に文字の大きさを変えてみましょう!


今回追加するのはCSSだけです!


CSSを追加する場所は,

「管理画面」→「デザイン」→「カスタマイズ(スパナのマーク)」→「デザインCSS」

です


1つずつ見ていきますね.


デザインの,

f:id:sera1098:20170905231202p:plain


カスタマイズの,

f:id:sera1098:20170905231300p:plain


ここです!

f:id:sera1098:20170905231322p:plain



そして,こちらのCSSを追加します

.entry-content p {
  font-size : 17px;
}

既にこの要素に変更を加えている方は、気をつけながら作業してください.


おまけ

勘のいい方はわかると思いますが、先のCSSの.entry-contentのあとは、HTMLの要素を表しています.

そのため、要素の名前を変えれば他の要素を編集できます


本文の大きさを変えると、見出しとのバランスが崩れることがあるので、pをh3やh4に変えて見出しのサイズを調整してみてください.


最後に

今回は,ブログの読みやすさの大切さと読みやすくする方法について紹介しました.


これまでは,自分がかっこいいと思うようなデザインを目指してトップページをカード型レイアウトにしたり,読者登録ボタンをカスタマイズしたりしていましたが,1番大事なのは見てくれる人が使いやすいかどうかです.


これからは,このブログの1読者として,読みやすさを追求していきたいと思います!


それではまた!