質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.10%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,279

score 13

前提・実現したいこと

お世話になります。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を入力すればいいのでしょうか?
すみません、まったくわからないことだらけです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/07/28 17:06

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

    キャンセル

  • kei344

    2016/07/28 22:01

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

    キャンセル

回答 2

+1

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/07/29 17:11

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

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

    キャンセル

  • 2016/07/29 19:24

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

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

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

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

    キャンセル

  • 2016/07/29 20:29

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

    キャンセル

  • 2016/07/29 22:54

    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;
    }

    キャンセル

checkベストアンサー

0

少し古い情報ですが、「デベロッパーツール」はブラウザに付いている機能です。ページの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で上書きアップロードという手順で作業されたほうが良いと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/07/29 18:53

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

    キャンセル

  • 2016/07/29 22:52

    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;
    }

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.10%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る