ブログの背景色にオススメの色ってあるのかな?
ブログの記事が見やすいオススメの背景色を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の機能を知りたい人へオススメの記事
コメント