ゲーム、映画、買ってよかったものなどを紹介

ワードプレスで何故かブログだけ文字のサイズ・カラーが変更できない時の解決方法

2017.04.10

ワードプレスで文字を変更
Pocket

こんにちは!さいとうです。

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

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

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

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

フォントカラー変更01

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

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

その1.タグを使う

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

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

ここに文字を入力

こうなります。

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

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

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

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

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

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

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

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

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

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

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

フォントカラー変更02

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

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

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

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

フォントカラー変更03

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

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

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

ブログの文字色だけが変わらない!?

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

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

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

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

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

原因は<p>にあり!!!

フォントカラー変更04

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

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

そして探す事、数時間・・・(マジ)

フォントカラー変更05

んん!?!? なんだ、こいつ!?!?

フォントカラー変更06

何で <p> にカラーが!!??

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

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

フォントカラー変更07

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

フォントカラー変更08

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

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

フォントカラー変更09

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

いや~、長かった。。。

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

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

それでは!

にほんブログ村 ライフスタイルブログ ノマドワーカーへ
にほんブログ村
↑参加しました!クリックお願いします^^

人気の記事

登録されている記事はございません。

カテゴリー