simplicityで初期設定の文字色(テキスト色)を変更する方法

私は、ワードプレスでsimplicityというテーマを使わせていただいておりますが

初期設定の文字色は、恐らくブラックだと思います。

ワードプレスの初期設定の色なのか、どうかはわかりませんが

どちらにしても

クッキリと目立っていいのですが、

その反面、白地の背景にブラックのテキストだと長時間文章を読むと

目が疲れます。

ノングレア(非光沢)の液晶ならまだいいのですが

グレア(光沢)の液晶の場合、特に目が疲れる気がします。

そのせいなのか、他の方のブログを調べてみても、

白地の背景で、テキストにブラックを使っている人は少ない気がします。

グレー色が多いですね。

ということで、今回の記事では

初期設定の文字色(テキスト色)をグレー色に変更してみたいと思います

スポンサーリンク

文字色(テキスト色)は何色がいいか?

まず、最初に文字色を決めておいたほうがいいです。

色番号を入力しなくてはいけないからです。

背景が白であれば、グレー系の色がいいと思うのですが

#111111〜#555555 を使用されている方が多い気がします

ちなみに#555555の方が薄くなります

参考までに色を比べてみます フォント18px

さらに太字にしても比べてみます 18px 太字

太字にしたほうが、差が出てわかりやすいかもしれませんね

好きな色を選びたいのであれば、

WEB色見本 原色大辞典 – HTMLカラーコード

http://www.colordic.org/

を参考にして探すといいと思います

私は、とりあえず、中間の#333333にしてみます

スタイルシート(CSS)に色コードを入力します

使用するコードは、以下のコードです

color:#333333 !important;

この指示コードをCSSの編集画面に入力してみたいと思います

初期設定の文字色(テキスト色)をグレー色に変更する

私もワードプレスを始めてまだ1年程ですので、詳しい人から比べると

まだまだです。

よってこの文字色(テキスト色)の変更の方法より、簡単な方法があるかもしれません

なので、ここから先は、自己責任で行ってください

現在の環境は以下の通りです

●ワードプレスの親テーマ→simplicity2

●子テーマ使用

1、ワードプレスの管理画面で

外観 にマウスカーソルを合わせて、テーマの編集 をクリックします

2、テーマの編集画面を開いたら

私のように子テーマを利用している場合は、親テーマに切り替えます

親テーマ(simplicity2)  に

切り替えたら、選択 をクリックします

3、親テーマ(simplicity2)のスタイルシートが表示されます

そこに先ほどの

color:#333333 !important;

を入力してみます

4、以下のような感じになります

入力がすんだら

忘れずにファイルを更新をクリックします

※設定が済んだら、子テーマ(simplicity2 child)に戻しておいたほうがよいです。

5、これで文字色(テキスト色)の変更が完了です

しかし、これでは、まだ恐らく、色が変更されないはずです

ブラウザにキャッシュが残っているからです

ネット上で自分のサイトを見てみます

この状態では、まだブラウザにキャッシュが残っているので、
文字色は以前のままのはずです

ここで、キーボードの

Ctrl(コントロールキー)とF5キーを同時に押してリフレッシュさせます

すると恐らく無事に文字色が変更されたと思います

この記事を書きながら、このブログの文字色も変更してみました。

うまく変更できました。

※元に戻したい場合は、上記で入力したコードを削除してください。

文字色(テキスト色)変更後の注意点

いくつか注意点があります

上記の操作を行うと、

●以前の記事も、すべて初期設定の文字色が変更されます

自分で意識的に色を変えた文字は、そのままです

例えば、文字色を青に変更した場合などは、そのまま青色に変更されたままです

変更されるのは、そのまま何も文字色を変えないで入力した文章だけです

そのテキストの文字色はすべてブラックからグレー色に変更になっているはずです。

※現在、私は、定期的に記事の文字色を、ブラックとグレーで

交互に変更しています。

というのは、PCの方には、白地に黒の文字は、長時間記事を読むと

少し目が疲れる場合があるかもしれませんが、

逆に、スマートフォンユーザーの方には、文字色が黒の方が読みやすいのでは?と

感じ始めたからです。

同じ記事を書いてデバイスごとに文字の色が自動で切り替わってくれると

ありがたいですよね。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする