Wordprssのsimplicityの子テーマの設定が反映されない

Question

###前提・実現したいこと
お世話になります。Wordpressのテーマ、simplicity2を使っています。現在、子テーマのsimplicity2 childをつかって、記事本文の文字色を灰色 #333333にしたいです。
###発生している問題・エラーメッセージ
設定を行ってもサイトに反映されません。
お忙しいところ申し訳ありませんがよろしくお願いいたします。
エラーメッセージ

###該当のソースコード

/* フォントを灰色にする */
body {
 color:#333333 !important;
}

###試したこと
外観からSimplicity2 childを有効

外観→テーマの編集
編集するテーマを選択
Simplicity2 child

/* フォントを灰色にする */
body {
 color:#333333 !important;
}

ファイルを更新

「ファイルの編集に成功しました。」メッセージを確認

###補足情報(言語/FW/ツール等のバージョンなど)
ダウンロード先のurl
Simplicity2
https://wp-simplicity.com/downloads/downloads2/
Simplicity2の子テーマ
https://wp-simplicity.com/downloads/child-theme2/

お世話になります。専門用語について検索して調べただけで知識がありませんが、```というのを「</>」ボタンを押して表示させました。
プラグインの所得先はSimplicityの作者のサイトです。
この情報でよろしいでしょうか？

リンクは地球儀からurlを入力すればいいのでしょうか？
すみません、まったくわからないことだらけです。

Comments

[kei344]

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。プラグイン／ライブラリは取得した場所のURLを質問文に追記ください。（URLにはリンクを張ることができます）

[kei344]

「エラーメッセージ 」から最初の「```」までが不要ですので、編集お願いします。また、URLにはリンクが張れます。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。

Answer 1

/* フォントを灰色にする */ 
body { 
color:#333333 !important; 
}

切り分けとして、下記をご確認ください。
・上記以外のスタイルは適用されますでしょうか。
・開発者ツールなどで、body部分に上記スタイルが適用されているか確認されてください。
・本文のpタグなどにcolor指定されていませんか？bodyで!importantしても必ず上書きされるわけではありません。

キャッシュプラグインの有無含め、環境の詳細が分からないので、遠回りな回答になりますがよろしくお願いいたします。

Comments

[truepix]

回答ありがとうございます。
専門用語がわからないので、検索して調べてみます。「開発者ツール」「body部分」「本文のpタグ」「color指定」「キャッシュプラグイン」を調べてみます。どれだけ掛かるかわかりませんが、回答いただいたお礼が遅くなってしまうと申し訳ないので、今書いている回答はお礼だけになってしまいます。
ちなみに今回の件は、ネットで調べただけで試してみました。

WordPressテーマ「Simplicity」をカスタマイズする19のポイント【2016.04.14更新】
http://www.masalog.me/simplicity-customize-point/
せっかく色々書いていただいたのに申し訳ありません。何とか調べて、結果報告できればしたいです。

[qasev]

kei344さんが書かれているように、開発者ツール（デベロッパーツール）にてブラウザ上でCSSを追加してみてシミュレーションをするのは、一度やり方を覚えると大変重宝しますので是非修得されてください。

style.cssを書き換える前に、ちょっとしたテストが視覚的にできますので。
（もちろん、デベロッパーツールでのcss変更はstyle.cssには影響しません）

そこで、bodyタグに色を付けてみたり、本文自体に色を付けてみたりと色々試されてみると良いとおもいます。

また不明点が出てきましたら相談されてください。

[truepix]

ありがとうございます。まだ試していませんが、何とか挑戦してみます。色々参考になり、私のような初心者には重宝します。
またわからないことは、きっと出てきます(この点は自信あり(^_^;))ので、お手間でなければよろしくお願いします。

[truepix]

qasevさん、色々ありがとうございます。
その後、Simplicityの作者のサイトをもう一度見て、Chromeのブラウザキャッシュを「キャシュのスーパーリロード」で削除しました。
その後、もう一度、Simplicity2 child: スタイルシート (style.css)のファイルを有効にしたら、サイトに反映されました。
フォントも変えたかったので、游ゴシックとYuGothicに変えました。
Windowsしか持っていないので、Macなどでは、どのように表示されるのかわからないけれど、これでいってみます。
問題が解決されると、何時間と格闘していたのがうそみたいです。
結果的には、自己解決になりましたが、kei344さんやqasevさんのアドバイスで、半ばあきらめていたところを再度、挑戦してみようという気になりました。ありがとうございました。
色々忙しいと思われますが、また何かあったら、お手間でなければよろしくお願いします。

Simplicity動作不良時のガイドライン
https://wp-simplicity.com/trouble-guideline/

Chromeのブラウザキャシュを簡単に削除する2つの方法＋普通の方法
http://nelog.jp/clear-chrome-browser-cache

Simplicity2 child: スタイルシート (style.css)

@charset "UTF-8";
@import url("../simplicity2/style.css"); /* 上書きしたいCSSの場所 */

/*!
Theme Name: Simplicity2 child
Template: simplicity2
Version: 20151225
*/

/* Simplicity子テーマ用のスタイルを書く */

body {
font-family:
'游ゴシック',
YuGothic, sans-serif;
font-size:16px;
-webkit-text-size-adjust: 100%;
color:#333333 !important;
}

Answer 2

少し古い情報ですが、「デベロッパーツール」はブラウザに付いている機能です。ページのHTMLやCSSがどのようになっているかが確認出来ます。そこでCSSを試しに追加してみて、使えそうであればテーマを編集されれば良いと思います。

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回 詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

また、管理画面からテーマを編集されるのではなく、ご自身のパソコン上で編集され、FTPで上書きアップロードという手順で作業されたほうが良いと思います。

Comments

[truepix]

ありがとうございます。何とか、いただいたURLの記事を調べて試してみたいと思います。
>ご自身のパソコン上で編集され、FTPで上書きアップロードという手順
難しそうですけどこちらも調べて何とかやっていきたいと思います。
忙しいところ、全くの初心者の私の質問につきあっていただき、ありがとうございます。

[truepix]

kei344さん、色々ありがとうございます。
その後、Simplicityの作者のサイトをもう一度見て、Chromeのブラウザキャッシュを「キャシュのスーパーリロード」で削除しました。
その後、もう一度、Simplicity2 child: スタイルシート (style.css)のファイルを有効にしたら、サイトに反映されました。
フォントも変えたかったので、游ゴシックとYuGothicに変えました。
Windowsしか持っていないので、Macなどでは、どのように表示されるのかわからないけれど、これでいってみます。
問題が解決されると、何時間と格闘していたのがうそみたいです。
結果的には、自己解決になりましたが、kei344さんやqasevさんのアドバイスで、半ばあきらめていたところを再度、挑戦してみようという気になりました。ありがとうございました。
色々忙しいと思われますが、また何かあったら、お手間でなければよろしくお願いします。

Simplicity動作不良時のガイドライン
https://wp-simplicity.com/trouble-guideline/

Chromeのブラウザキャシュを簡単に削除する2つの方法＋普通の方法
http://nelog.jp/clear-chrome-browser-cache

Simplicity2 child: スタイルシート (style.css)

@charset "UTF-8";
@import url("../simplicity2/style.css"); /* 上書きしたいCSSの場所 */

/*!
Theme Name: Simplicity2 child
Template: simplicity2
Version: 20151225
*/

/* Simplicity子テーマ用のスタイルを書く */

body {
font-family:
'游ゴシック',
YuGothic, sans-serif;
font-size:16px;
-webkit-text-size-adjust: 100%;
color:#333333 !important;
}