もう悩まない♪ブログの記事が読みやすくなるオススメの背景色30選!

ブログにオススメの背景色アイキャッチ
ぼたん

ブログの背景色にオススメの色ってあるのかな?

ブログの記事が見やすいオススメの背景色を30色紹介します。

背景色を探す時間がない方や探すのが面倒だな・・という方は、ぜひ最後まで見てくださいね。どれか1つでも気に入った色がみつかるとうれしいです。

赤系・紫系・青系・緑系・黄系・橙系に分けてあります。自分のブログのメイン色やイメージに合わせて選んでくださいね。

つむぎ

今回はSWELLのフルワイドブロックを使って実際に背景に色をつけ、文字色はダークグレー(カラーコード:#333333)で設定してあります。

目次

ブログの背景色のポイント

ブログの背景色は白もいいのですが、少し色をつけてあげるのもオススメなんです。

理由は、背景色が白(カラーコード:#ffffff)、文字色が黒(カラーコード:#000000)だと人によってはまぶしく感じる場合があるからです。

この対策として2つのやり方をオススメします。

1.背景色は同じ白でも文字色はダークグレー(カラーコード:#333333)にしてみる。

背景色白文字色黒とグレー比較画像
つむぎ

文字色はダークグレーと言っていますが、真っ黒(カラーコード:#000000)でなければ眩しさは軽減されるのでお好みで選んでくださいね。

2.背景に色をつけ文字もダークグレーにしてみる。

背景色と文字色画像

今回は対策2として紹介している背景に色をつけるためにオススメの色を紹介しています。

注意点ですが、今回紹介している30色はWEBセーフカラーではありません。読者がつかうブラウザによって色の見え方がかわります。

自分のブログがパソコンから見る人が多いのか?スマホから見る人が多いのか?を意識して色を決めましょう。

もし、わからなければ、現代はスマホで検索してくる方がおおいので、スマホで見える色を基準にしましょう。

ぼたん

WEBセーフカラーやブログの色について興味があったら先にこの記事を読んでみてくださいね。

それでは、オススメの背景色30選を紹介していきます。

赤系の背景色6選

No.1

カラーコード:#FFF4F4

文章を書くとこんな感じです。

つむぎ

吹き出しのテスト

No.2

カラーコード:#FFF9F9

文章を書くとこんな感じです。

ぼたん

吹き出しのテスト

No.3

カラーコード:#FFF4F9

文章を書くとこんな感じです。

つむぎ

吹き出しのテスト

No.4

カラーコード:#FFF9FC

文章を書くとこんな感じです。

ぼたん

吹き出しのテスト

No.5

カラーコード:#F8F8F8

文章を書くとこんな感じです。

つむぎ

吹き出しのテスト

No.6

カラーコード:#FDFDFD

文章を書くとこんな感じです。

ぼたん

吹き出しのテスト

紫系の背景色4選

No.7

カラーコード:#F9F4FF

文章を書くとこんな感じです。

つむぎ

吹き出しのテスト

No.8

カラーコード:#FCF9FF

文章を書くとこんな感じです。

ぼたん

吹き出しのテスト

No.9

カラーコード:#FFF4FF

文章を書くとこんな感じです。

つむぎ

吹き出しのテスト

No.10

カラーコード:#FFF9FF

文章を書くとこんな感じです。

ぼたん

吹き出しのテスト

青系の背景色6選

No.11

カラーコード:#F4F4FF

文章を書くとこんな感じです。

つむぎ

吹き出しのテスト

No.12

カラーコード:#F9F9FF

文章を書くとこんな感じです。

ぼたん

吹き出しのテスト

No.13

カラーコード:#F4F9FF

文章を書くとこんな感じです。

つむぎ

吹き出しのテスト

No.14

カラーコード:#F9FCFF

文章を書くとこんな感じです。

ぼたん

吹き出しのテスト

No.15

カラーコード:#F4FFFF

文章を書くとこんな感じです。

つむぎ

吹き出しのテスト

No.16

カラーコード:#F9FFFF

文章を書くとこんな感じです。

ぼたん

吹き出しのテスト

緑系の背景色5選

No.17

カラーコード:#F4FFF9

文章を書くとこんな感じです。

つむぎ

吹き出しのテスト

No.18

カラーコード:#F9FFFC

文章を書くとこんな感じです。

ぼたん

吹き出しのテスト

No.19

カラーコード:#F4FFF4

文章を書くとこんな感じです。

つむぎ

吹き出しのテスト

No.20

カラーコード:#F9FFF4

文章を書くとこんな感じです。

ぼたん

吹き出しのテスト

No.21

カラーコード:#FCFFF9

文章を書くとこんな感じです。

つむぎ

吹き出しのテスト

黄系の背景色5選

No.22

カラーコード:#FFFFF4

文章を書くとこんな感じです。

ぼたん

吹き出しのテスト

No.23

カラーコード:#FFFFF9

文章を書くとこんな感じです。

つむぎ

吹き出しのテスト

No.24

カラーコード:#FFFFEA

文章を書くとこんな感じです。

ぼたん

吹き出しのテスト

No.25

カラーコード:#FDFDF6

文章を書くとこんな感じです。

つむぎ

吹き出しのテスト

No.26

カラーコード:#FFFFF0

文章を書くとこんな感じです。

ぼたん

吹き出しのテスト

橙系の背景色4選

No.27

カラーコード:#FFF9F4

文章を書くとこんな感じです。

つむぎ

吹き出しのテスト

No.28

カラーコード:#FFFCF9

文章を書くとこんな感じです。

ぼたん

吹き出しのテスト

No.29

カラーコード:#F9F4EF

文章を書くとこんな感じです。

つむぎ

吹き出しのテスト

No.30

カラーコード:#FFFAF0

文章を書くとこんな感じです。

ぼたん

吹き出しのテスト

まとめ

ブログの背景に色をつけたいな・・どんな色がいいかなという方のために、ブログの記事が読みやすいやわらかい30色を紹介しました。

赤系6色・紫系4色・青系6色・緑系5色・黄系5色・橙系4色と色分けしてあるので、ブログのメイン色に合わせてお使いいただけます。

つむぎ

お気に入りの色が見つかるとうれしいな

背景に色をいれたり文字の色を変えることでブログのまぶしさが軽減されて、離脱されにくいブログになりますよ。

記事の質ももちろんですが、色やデザインからも読者のファンを増やしましょう♪

ブログの色を知りたい人へオススメの記事

今回は有料テーマSWELLのフルワイドブロックを使って背景色の紹介をしました。

紹介した背景色を全体に使うのもオススメですが、SWELLのフルワイドブロックの部分の背景色に使うのもオススメです。

SWELLの機能を知りたい人へオススメの記事

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次