ノマド情報

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

ワードプレスで文字を変更
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についての理解力が大分深まりました。

それでは!

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

Pocket

関連記事

  1. 僕がセネガルに行くと決めた理由 その1
  2. おすすめリュック~人気爆発 アークテリクス アロー22~
  3. 2016年 今年の抱負
  4. セネガル人に仕事を頼んで、時間の大切さを噛みしめる
  5. 僕がセネガルに行くと決めた理由 その2
  6. 海外にいながら日本で商品販売できている理由
  7. 老舗喫茶店をリノベ!名古屋のゲストハウス「西アサヒ」
  8. セネガルでのビジネスのお話~第2章~

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

ノマドライフスタイル

  1. ワードプレスで文字を変更
  2. 大量注文
  3. 2017正月

今すぐ脱サラしたくなる面白ビジネス

banner

アフリカライフ

  1. 逮捕
  2. 販売
  3. セネガル人おばちゃん
  4. 大量注文
  5. レストラン内。快適空間
  6. saintluis03
  7. 公園内5
  8. tanaTOP
  9. gym00

カレンダー

2017年4月
« 3月   5月 »
 12
3456789
10111213141516
17181920212223
24252627282930
PAGE TOP