こんにちは！ライアンです。

このブログの趣旨とは全く違うんですが・・・
ワードプレスで長いこと苦しめられてきた問題を、本日解決できました。
同じ問題で苦しんでいる方もいるはずなので、今回はメモの意も込めて、書きます。

僕自身CSS、スタイルシートはド素人なので、同じ境遇の人にも分かりやすいように説明していきます。

ブログの文字のサイズ・カラーを変更したい！

ことの発端は、これです。

現在製作中のサイトのブログページを見たところ、文字が薄いんです。

これをもっと濃くしたいなーと、思って、方法を調べました。

その１．タグを使う

一つは、ブログ制作時にテキストエディター画面にして、タグを使うパターン。

＜font color=”red”＞ここに文字を入力＜/font＞　※実際は＜＞を半角にします。

↓

ここに文字を入力

こうなります。

詳細は下記記事が分かりやすいです。

記事・文章の文字サイズと色変更方法について | WordPress（ワードプレス）に最適化された専用高速サーバー【GMO WP Cloud】

ただ、これは毎回このタグを打ち込む必要があるので手間。
根本的な解決にもならないので、却下。
そもそもこれは、文章の一部を変えるもの。
全体を変えたいという趣旨には合っていません。

その２．スタイルシートでサイズ・カラーを指定する

なので、今回はスタイルシートの情報を変更し、全体に反映させる事にします。

スタイルシート(style.css)というファイルを使います。
この情報を変更することで、サイト全体に変更情報が反映されます。

例えば、スタイルシートで全体の文字色を、赤に指定すると、全ページの文字が赤になります。
※ページごとに細かい設定をしている場合は、そちらが反映されます。

スタイルシートを変更しよう

まず、ワードプレスの管理画面（ダッシュボード）
→ 外観
→ テーマの編集(Theme Editor)
→ スタイルシート(style.css)
を、開きます。

続いて、スタイルシートの中から body を探します。
この body 内に記述することで、サイト全体へ反映されます。

Windowsの場合は Ctrl + F。
Macintoshの場合は ⌘(command) + F
これで検索すると、簡単に見つかります。

bpdy 内に、 color があるはずです。
無い場合は上の画像のように打ち込んでしまえばOK。

ここに書かれている #767676 が、文字色になります。
これを変更することで、文字色が変えられます。

カラーコード一覧表を載せておきますね。

HTML,CSS　カラーコード一覧表　｜　背景色や文字色の設定

今回は、ブログで一番使われている #333333 を使います。

変更したら「保存」をクリックして、完了です。

大半の人は、ここまでの設定で文字色が変えられます！

ブログの文字色だけが変わらない！？

はい、長くなりましたが、これが本題です。

body のカラーを変更したので、全体のカラーは変わったはずなのに、
何故かブログだけは色が変わりませんでした！！

これについての解決方法は、ネットを探しまくっても見つかりませんでした・・・

以前はココで断念してしまっていた僕。
しかし今回は一味違いまして、自力で問題を探り続けたわけです。

そして・・・ついに・・・ついに見つけたんです！！

原因は＜ｐ＞にあり！！！

指定したスタイルが反映される順番を図にしてみました。

bodyで色を指定していても、その色が反映されない場合があります。
図のように、ブログ用の設定を、スタイルシート内の別の場所で記述している場合です。
こうなると、もうしらみつぶしに探して行くしかありません。

そして探す事、数時間・・・（マジ）

んん！？！？　なんだ、こいつ！？！？

何で ＜p＞ にカラーが！！？？

この ｐタグは段落分けの時に使うタグでして、僕もめちゃくちゃ多用しています。

そう、原因はこいつでした。

pタグで文章を囲っているので、そりゃあ色も変わるってもんです。

というわけで、color指定されていた記述をそっくり削除しました。

刮目せよ！カラーの変化を

これで、ついに文字色の変更に成功しました！

いや～、長かった。。。

皆さんも、bodyタグを弄っても思い通りに行かない時は
別のタグに原因が無いか、確認してみてください。

今回の件に辿り着くまでで、cssについての理解力が大分深まりました。

それでは！

にほんブログ村
↑参加しました！クリックお願いします^^