ブログ

ブログの文字色・背景色を変更し、見やすく読みやすい色を知ろう!

ブログの文字色・背景色を変更し、見やすく読みやすい色を知ろう!

こんにちもじゃもじゃ、

雑記ブロガーの「もじゃめ(@mojame_blog)」だよ。

まず初めに、私はWordpressで記事を書いていることにご了承願いますもじゃ。

ブログを書くにあたってみなさん色々工夫を凝らしていると思いますが、

単純に黒一色の記事を書いているのではないでしょうか。

【WordPressのテーマJIN(ジン)】ショートコードを使いこなそう|ボタン編
【WordPressのテーマJIN(ジン)】ショートコードを使いこなそう|ボタン編こんにちもじゃもじゃ、 雑記ブロガーの「もじゃめ(@mojame_blog)」だよ。 ブログでただただ文章で文字を書き連ねる...

使うと言っても黒以外でいえば「赤」くらい、という人もいるもじゃな。

闇もじゃめ
闇もじゃめ
デフォルトの文字色は環境によって多少色の差があるのはご了承願いますもじゃ…
もじゃめ
もじゃめ
デフォルトはBlackよりは灰色に少し近い色をしているね!

文中で読者の目に止まるよう、ピンポイントに色を変えてみるのはどうもじゃかね。

この記事はこんなあなたにおすすめ

〇ブログが黒一色になっている

〇文字色を変えた様子が知りたい

〇黒以外の文字を使ったことがない

今回はどの色がおすすめだ、という話をするわけではなく色を実際に確認してみましょうという紹介の記事となっているもじゃよ。

ちなみに、私のデフォルトの文字色は真っ黒というよりは灰色に少し近い文字色となっているもじゃよ。

そのデフォルトの文字色と比較していきますもじゃね。

文字色の検証となるため、段落数が異常に多くなります。目次はデフォルトで表示としているのでご了承願います。
闇もじゃめ
闇もじゃめ
WordPressのテーマではJIN(ジン)を使っているもじゃよ…
ブログの文字色・背景色を変更し、見やすく読みやすい色を知ろう!
もじゃめ
もじゃめ
もじゃ君は基本赤しか使わないね!

文字色・背景色を見比べよう

ブログの文字色・背景色を変更し、見やすく読みやすい色を知ろう!

ブログでデフォルトのまま黒だけの色を使って文章を書いている人も多くいるもじゃよね。

テキスト色を変更した際にどのように見えるのかを確認してみましょうもじゃ。

様々な文字色を実際に見比べてみれば、

見やすく読みやすい色がなんなのかを自身の目で確認することができるもじゃね。

文字色(テキスト色)は

ブログの文字色・背景色を変更し、見やすく読みやすい色を知ろう!

をクリックすると変更することができるもじゃよ。

背景色も同様に、テキスト色の右隣をクリックしたら変更することができるもじゃね。

文字色・背景色の差を確認するために下記のようなルールで比較していくことにするもじゃね。

  1. 「文字色を変更したら見やすいブログになった」の「見やすい」の部分の文字色を変えることにする
  2. 単純に黒色との文字の差を確認するため「ああ」の二文字の右側だけの文字色を変更する
  3. 「背景色を変更したら見やすいブログになった」の「見やすい」の部分の背景色を変えることにする
  4. ②と同様に背景色も変更する

それでは、文字色(テキスト色)を上記ルールで確認していくもじゃね。

文字色の種類は

ブログの文字色・背景色を変更し、見やすく読みやすい色を知ろう!

に表示されている39色(右下は文字色なし)の全てを確認してみるもじゃね。

闇もじゃめ
闇もじゃめ
背景色はあまり使ったことないもじゃ…
もじゃめ
もじゃめ
もじゃ君の記事はまっくろだもんね!

Black|#000000

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Burnt orange|#993300

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Dark olive|#333300

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Dark green|#003300

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Dark azure|#003366

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Navy Blue|#000080

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Indigo|#333399

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Very Dark Gray|#333333

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Maroon|#800000

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Orange|#ff6600

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Olive|#808000

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Green|#008000

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Teal|#008080

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Blue|#0000ff

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Grayish Blue|#666699

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Gray|#808080

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Red|#ff0000

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Amber|#ff9900

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Yellow green|#99cc00

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Sea green|#339966

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Turquoise|#33cccc

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Royal blue|#3366ff

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Purple|#800080

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Medium gray|#999999

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Magenta|#ff00ff

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Gold|#ffcc00

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Yellow|#ffff00

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Lime|#00ff00

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Aqua|#00ffff

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Sky blue|#00ccff

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Red violet|#993366

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

White|#ffffff

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Pink|#ff99cc

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Peach|#ffcc99

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Light yellow|#ffff99

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Pale green|#ccffcc

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Pale cyan|#ccffff

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Light sky blue|#99ccff

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

Plum|#cc99ff

文字色を変更したら見やすいブログになった

背景色を変更したら見やすいブログになった

文字色・背景色を一目で確認しよう

ブログの文字色・背景色を変更し、見やすく読みやすい色を知ろう!

さて、それぞれの文字色と背景色を確認したもじゃね。

デフォルトの文字色がBlackであれば文字色をBlackに変更した際に文字が見えなくなるはずですが、

私のサイトはBlackよりも灰色に近い色であったので文字が浮かび上がったもじゃね。

さて、今回はデフォルトの文字色からの色の変化を確認しているので、

一目で40色(内1文字はデフォルト色)を確認してみましょうもじゃ。

確認の方法は下記のルール、

  1. 40文字の「色」を縦5×横8に並べ、それぞれの色を変更する
  2. 上記の40色は文字色を変更する際の配置通りとする

とするもじゃね。

先ほどは個別で色の違いをみましたが、今度は一目でわかるようにするもじゃね。

闇もじゃめ
闇もじゃめ
グラデーションが綺麗もじゃ…
もじゃめ
もじゃめ
デフォルトの文字色との兼ね合いが気になるところよね!

文字色を変更する

 

       

       

       

       

       色

背景色を変更する

 

       

       

       

       

       色

さいごに

ブログの文字色・背景色を変更し、見やすく読みやすい色を知ろう!

今回は文字色及び背景色がデフォルトの文字色と比べることでどのような見た目になるのかを確認したもじゃよ。

上級者でない限り文字色のデフォルトを変更することはないと思うもじゃね。

そのデフォルトの文字色と他の色と比べてみた結果、

使えそうな色とそうでない色はぱっと見で確認することができたと思うもじゃよ。

見てもらいたい部分にアクセントとして文字色を変化させてみてくださいもじゃ。

闇もじゃめ
闇もじゃめ
自身のブログでの文字色・背景色に悩んだ時にみてくださいもじゃ…
もじゃめ
もじゃめ
最後まで読んでいただき、ありがもじゃもじゃ!
にほんブログ村

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です