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

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

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

5回答

1418閲覧

CSS background-colorが効いてくれない

namiki

総合スコア4

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/07/01 21:44

前提・実現したいこと

お世話になっています。

初心者です。
Wordpressを使っていて固定や投稿記事の背景色を変更したいのですが、うまくいきません。
style.CSSに次のコードを記述しました。
body {
background-color: #555555;
}

過去のログを検索したところ、開発ツールで追跡せよというのがあったので、htmlのbodyの部分を選択してStyleを確認してみました。
すると background-colorの行に取り消し線がひかれていました。
これについて調べてみたところ、これより優先度の高いものがあるということでした。
Styleの部分を見る限りここ以外に background-color が定義されている部分が見当たりません。

どのようにして見つけたら良いでしょうか?

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答5

0

ここ以外に background-color が定義されている部分が見当たりません

background-color はなくても 、background で一括指定されているとか……?

CSS の background 一括指定プロパティは、色、画像、原点と寸法、反復方法など、背景に関するすべてのスタイルプロパティを一括で設定します。

background - CSS: カスケーディングスタイルシート | MDN


あるいは、style 属性とか。

style グローバル属性は、要素に適用する CSS スタイル宣言を包含します。

style - HTML: HyperText Markup Language | MDN


CSS transition もありえるかも?

  1. Transition declarations [css-transitions-1]
  2. Important user agent declarations
  3. Important user declarations
  4. Important author declarations
  5. Animation declarations [css-animations-1]
  6. Normal author declarations
  7. Normal user declarations
  8. Normal user agent declarations

Origin and Importance | CSS Cascading and Inheritance Level 3

投稿2020/07/02 00:43

編集2020/07/02 01:10
Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/07/02 02:19

!importantも関係ないんでしたっけ?可能性は色々考えられますね
Lhankor_Mhy

2020/07/02 04:02

!important はもちろん効きますので、こっちにも !important がついている想定です。
namiki

2020/07/02 05:46

返信ありがとうございます。 backgroundの指定に -color が含まれることは理解しています。 style属性は触っていない認識でいます。
Lhankor_Mhy

2020/07/02 05:59

Chromeの開発者ツールで確認しているのですか? それとも、Firefoxですか?
namiki

2020/07/02 06:29

返信ありがとうございます。 Chromeでのみ確認しています。 初心者なので、勘違いなどがあったらすみません。
gogoweb_ikeda

2020/07/02 06:40

chromeなら要素を選択してstyleタブではなくComputedタブからbackgroundを探せば現在適用されているスタイルが確認できませんか?
Lhankor_Mhy

2020/07/02 06:44

Computedタブの background-color はどうなっていますか?
namiki

2020/07/02 06:48

たびたびすみません。 投稿する、その文章(文字)の背景色は body ではないようです。 基礎ができていなくて、すみません。 CSSでbodyの背景色をかえると画面の外側の枠の部分がかわることが確認できました。 投稿する文章の背景色をかえるには、どのセレクタを使えば良いのかがわかりません。
Lhankor_Mhy

2020/07/02 06:56

その文章を右クリックして「検証」とすると、その要素を見ることができますよ。
Lhankor_Mhy

2020/07/02 07:02

.entry-content かな、たぶん?
namiki

2020/07/02 07:06

ありがとうございます、無事に解決できました。
guest

0

スキンによる背景色が反映されているのではないかと思います。

新規にインストールしたWordPressにこちらからDLした親テーマCocoonをインストールし、
親テーマのstyle.cssの一番下に以下を追記してみました。

css

1body { 2background-color: #555555; 3}

この時点で背景色が変更されたことを確認できました。
イメージ説明

その後、背景色の指定を書いたまま[Cocoon設定]からいくつかのスキンを切り替えてみました。
イメージ説明

テーマ直下のstyle.cssではなく、themes/cocoon-master/skins/それぞれのスキン名/style.cssで指定されており、こちらの方がテーマ直下のstyle.cssより後から読み込まれていることで指定が上書きされています。
背景色の指定がないスキンもあったので、その場合はご自身で指定した背景色が反映されているはずです。
(スキン側の背景色指定の所に!importantがあるため、その前に読み込まれるテーマ直下のstyle.css側に!important指定しても無駄でした。)

仮にスキンの背景色になってしまっているのが原因だとして、外観-カスタマイズ-追加CSSに下記を記入することで背景色の変更ができることを確認済みです。

css

1body { 2 background-color: #555555 !important; /* !important入れないとだめでした */ 3}

投稿2020/07/02 02:14

dit.

総合スコア3235

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

namiki

2020/07/02 05:50

返信ありがとうございます。 わざわざ試して頂きまして、恐縮です。 私が言っている背景色とは、投稿した記事(文章を書いたら、その文字)の背景の色です。 それがいろいろ試してもかわってくれません。 スキンは なし にして試しても同じです。
dit.

2020/07/02 08:54

記事そのものの背景色でしたか。 bodyに引っ張られてしまって早とちりしました。 解決できたようなので良かったです。
guest

0

この提示内容だけだと「もう一歩踏み込んで探してみてください」としか言えませんし、調査の方向性は正しいので、もう少し見ていけば見つかりそうに思います。
WordPressだと使ってるテーマやプラグインにも依存するので全体的に見ていく必要があると思います。

取り消し線がある=無効になっている
→他に有効になっているものがある、もしくは、無効となる指定がJavaScript含めてどこかにある
という可能性を疑いましょう。
!importantをつけても有効にならなかったらまた一歩進むと思います。

投稿2020/07/01 22:50

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

namiki

2020/07/01 23:44

返信ありがとうございます。 返信を見る前に、試しに !important をつけてみましたが、かわりませんでした。 もう少し いろいろ調べてみます。
guest

0

テーマによってはカスタマイザーで設定している場合があります。

ダッシュボード
左メニュー ⇒ 外観 ⇒ カスタマイズ

で、背景色の設定があるか確認してみてはどうでしょう

投稿2020/07/01 22:48

-millmill-

総合スコア674

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

namiki

2020/07/01 23:46

返信ありがとうございます。 特に背景色は指定されていませんでした。 テーマは cocoon を試しているところです。
namiki

2020/07/02 07:06

ありがとうございます、無事に解決できました。
guest

0

自己解決

皆さま

お騒がせしました。解決できました。

mainというIDの部分の背景色が白になっていました。

#main {
background-color: #000
}

で背景色が黒になることを確認できました。

Computed が解決の糸口になりました。

ご回答くださった方々に感謝いたします。
ありがとうございました。

投稿2020/07/02 07:01

namiki

総合スコア4

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問