記事の背景色や文字色を変更して読みやすくするCSS

hedda-3

ブログ記事は誰が読んでもわかりやすい、読みやすいを意識していきましょう。

読みやすさを意識するとあなたのブログはより多くの人にシェアされ読まれるはずです。

たとえば、「この文章は表現が難しすぎやしないか?」「高齢者が見ても読みやすい文字のサイズか?」など、一般的な読みやすさを意識する必要があります。

今回は記事をより多くの人に読んでもらうための”やさしい”方法。記事の背景色や文字色を変更する方法をご紹介します。

スポンサーリンク

読みやすい、わかりやすい記事とは?

ブログ運営が長くなると記事の文字数を増やす、目立つ画像を使うなどの小ワザ、テクニック的な部分に走りやすくなります。

必要な要素ではあるのですが、もっと根本的な部分、「記事の読みやすさ」を意識するべきです。

読みやすさを意識するとブログに初訪問した人の印象もグッと良くなりますよ。

読みやすい、わかりやすい文章には特徴があり以下のような例があります。

読みやすさを意識した記事の法則

・難しい漢字を使わない。
・意味のわかりづらい表現を使わない
・文字の色を意識する
・文字の大きさを意識する
・行と行の間(行間)の幅を意識する
・リンク文字の色を考える

ひとつずつ見ていきましょう。

難しい漢字、表現をつかわない

ブログに訪問する人の年齢はさまざまで、小学生かもしれないし高齢のおばあちゃんかもしれません。

幅広い年齢層に理解できるよう、難しい漢字や表現をつかわないよう意識しましょう。

どうしても使わないと文章がおかしくなる、という場合は意味を書く、読み方を書くなどのやさしい心配りが必要です。

やさしさの例

意味を知りたい: 老若男女

意味: おじいちゃんからお子さんまでだれでも

難しい漢字: 私、潔癖症なんです

読みを追記する: 私、潔癖症(けっぺきしょう)なんです

意味を知りたい: ギロッポンのズルヒーでシースーマイウーでしたわ。

意味を追記する: 六本木ヒルズで食べた寿司がおいしかったです

文字の色を意識する

記事の文字の色を考えていきます。

文字数の少ない記事ならどんなに派手な色使いでも最後まで読めますが、5,000字を超えるような長文だったらどうか?

疲れますよね。

派手な色を避け、目に負担をかけないやさしい色を選びましょう。

目にやさしい(負担をかけない)色

・黄色

・緑

・薄茶色

薄茶色はブラウザの背景色に適しているとされます。

文字の色といえば黒が基本です。さすがに文字の色を薄茶にすると読みやすさよりも色に意識が写ってしまいますよね。

ですが本来の黒い文章を少しだけ薄くすることで目の負担は軽くなります。

僕のブログでは灰色に近い黒(#333631)にしています。

CSSに記入する

ワードプレスのダッシュボード→外観→CSS

と進み、CSS内に以下のコードを貼り付けます。

p {
	color: #333631;
}

カラーコードを見て好みの色を指定します。

また、記事の背景色を変えたいときは以下のコードをCSSに貼り付けます。

#main {
    background-color: #ffffe0;
}

薄い黄色(#ffffe0)を指定しましたが記事自体の背景色を変えるとイメージがガラリと変わり文字の視認度も悪くなる可能性が高くなります。

文字の大きさを意識する

文字は小さいよりも大きいほうが読みやすい。

当然ではありますが、あまり大きすぎても読みづらくなってしまいます。

特にスマホで読む場合は文字が小さすぎても不親切ですし、大きすぎてもページをスクロールだけで手が疲れます。

適切な文字の大きさは16px~18px、一行あたり40字(パソコン時)くらいまでが読みやすいサイズといえます。

ちなみに僕のブログの文字サイズは18pxです。

文字の大きさは以下のように指定しました。

p {
        font-size: 18px;
}

行間を意識する

文字一つ一つが大きくなれば当然、行間も狭くなります。ゆとりある行の幅を取りましょう。

行間を広げる(変更する)記述↓

p {
	line-height: 27px;
	margin-bottom: 24px;
}

リンク文字の色を変更する

リンク文字→こういう部分 も重要な部分です。

※上のリンク文字は例でありクリックしても変化はしません

ネット上のリンク色は基本的に青が一般常識化されているので青色を使うほうがすぐにリンクだと判断してもらえます。

逆に赤色などの派手すぎる色だと危険な感じや警告のような感じを受けるためおすすめはしません。

緑色がクリック率の高い色だと言う人もいますが、サイトのカラーによって合う合わないはあるでしょう。

「自分が他のサイトを見たときどうか?」
を意識するとリンクの色も決めやすくなります。

僕のブログの場合は青よりも少しだけ明るい色(#0073AA)にしています。

リンクの色を変更する記述↓

a:link { color: #0073aa; }

まとめ

僕のブログの記事の文字色、サイズの指定などまとめると以下のようになります。

p {
	font-size : 18px; 
      color: #333631;
	line-height: 27px;
	margin-bottom: 24px;
}

a:link { color: #0073aa; }

好みの問題も多少あるので今後変更するかもしれません。

読みやすさ、わかりやすさは感覚的な部分もありますがじつはその感覚こそがブログにとって重要な部分です。

自分で読んでみてわかりやすくない、堅苦しい文章は読んでも面白くないしなにより「相手の立場を考えない行為」なのです。

書く側よりも読む側の立場を意識すると読みやすさ、やさしい文章の答えは見つかるハズです。

ブログテーマによってはCSSに記入しなくても

ダッシュボード→外観→カスタマイズ

で指定できる場合があります。

・文字の大きさ

・文字の幅

・文字の色

は特に重要な要素なのでぜひ参考にしてみてくださいね。