Q&A
「可能でしょうか。」という質問だと「可能です」という回答しかつきません。自身が調べてみたことやってみたことを追記し、｢何がどう分からないのか」具体的に記載して回答を得やすい質問内容にしてください。質問は編集することができます。
WordPress最新verでBootstrap v3.3.6を使用しウェブサイトを運営しています。現在全ページ背景色が白・文字色が黒なのですが、特定ページのみ背景色を黒・文字色を白に変更することは可能でしょうか。
※追記
失礼しました。特定記事のみ変更を希望しており、以下のプラグインを試してみました。
・XO Post Background
・Full Background Manager
・The Single Background
上記プラグインにて背景色の変更、黒一色の画像を背景に設定、など行ってみましたが、変化がありませんでした。他に方法をご存知の方がいらっしゃいましたら是非ご教示頂きたいです。
※7/5追記
頂いたご回答をもとに、反映させたい記事に以下のように記述してみたのですが、背景色は白のままで文字は表示されませんでした。color:#ffffffを抜くと文字だけは黒で表示されるため、背景色は反映されていないが文字色は反映されている状態のようです。
<style type="text/css"> body {background:#000000;color:#ffffff} </style> </head> <body> あいうえお </body> ```次に以下のように記述してみたところ、文字は白くなり背景は黒になっているのですが、ページ全体ではなく「文字」の背景だけが黒になっており、行間は白くなるため縞々になってしまいます。 ```<head> <style type="text/css"> p {background:#000000;color:#ffffff} </style> </head> <body> <p>あいうえお</p> </body> ```何か根本的に間違っているのかもしれませんが見当がつきません・・・。よろしくお願い致します。 7/11追記 テーマは前任者が作成した自作テーマを使用しております。
「特定ページ」が何を指すのかも加えてほしいです。記事一覧なのか、特定記事なのか、固定ページなのかなど。
（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
回答5件
0
Chromeの「検証機能（デベロッパーツール）」で確認された方が良いかと思いますが、以下を試してみてください。
HTML
1<body style="background: #000;color: #fff;">
HTMLのhead部分では無く、HTMLの<body>タグに直接書いてみてはどうでしょうか。
WordPressやBootstrapの設定もあるので、上記コードが効いても効かなくても、「どのCSSが適用されているのか？」を知る必要がありますので、参考先等で確認してみてください。
参考：
Chromeブラウザの検証機能でCSSスタイルの確認や変更をテストする方法
ChromeデベロッパーツールでCSS要素を特定してサイトを簡単カスタマイズ
-追記-
参考
WordPress子テーマ作り方と反映されない時のテンプレートcss対処法
WordPressで個別のページごとに、CSSやJavaScriptが利用できる便利なプラグイン -CSS & JavaScript Toolbox
投稿2018/07/05 06:57
編集2018/07/06 00:18
総合スコア3523
ご回答ありがとうございます。以下の記述で合ってますでしょうか・・・？
<head>
<style type="text/css">
</style>
</head>
<body style="background: #000000;color: #ffffff;">
<p>あいうえお</p>
</body>
こちらでもやはり背景色に変化はありませんでした。参考URLもありがとうございます。どのCSSが適用されているのか、という点ですが、該当箇所には「type.less:64」「bootstrap.css:1062」といったファイル名が出ています。bootstrapが優先されてしまっているということでしょうか・・・？
そうですね、優先されていますので、とりあえず以下を試してみてください。
<body style="background: #000000 !important;color: #ffffff;">
と、「!important」を背景指定に入れてみてください。
WordPressにはカスタマイズ用として子テーマが作成可能ですが、作成済でしょうか？
まだなら「WordPress 子テーマ作成」等で検索してみてください。
※参考先を追記しておきます。
ご丁寧にありがとうございます。頂いた情報を基に以下試してみました。
・!importantを背景指定に→反映されず
・プラグイン"CSS & JavaScript Toolbox"→滞りなくインストールできたが、CSSを記述してもやはり反映されず
・子テーマの作成→こちらも問題無く作成でき、有効化までは完了しました。試しにstyle.cssに以下のように記述してみましたが、やはり反映されませんでした・・・。
/*
Theme Name:xxxx_child
Template:xxxx
Version:3.0
*/
body {background:#000000;}
３パターン全てでchromeのデベロッパーツールも確認したのですが、昨日と同様該当箇所には「type.less:64」「bootstrap.css:1062」の順に表示されます・・・。
参考になりますか？
https://teratail.com/questions/7117
ご回答ありがとうございます。拝見しました。
すみません、variables.lessというファイルはwordpressのどこに格納されているのでしょうか・・・？
0
基本的にはあとから色を指定するだけですが、Bootstrapにより一部厄介なスタイルが適用されています。
CSS
1button, 2input, 3optgroup, 4select, 5textarea { 6 margin: 0; 7 font: inherit; 8 color: inherit; 9}
色を反転する場合はフォームコントロールなどが見えなくならないよう気を付けてみてください。
投稿2018/07/04 09:21
総合スコア13749
0
３パターン全てでchromeのデベロッパーツールも確認したのですが、昨日と同様該当箇所には「type.less:64」「bootstrap.css:1062」の順に表示されます・・・。
下記で指定したものは出てこないのでしょうか。
HTML
1<style type="text/css"> 2body {background:#000000;color:#ffffff} 3</style>
出てきている状態で上書きされている場合（打ち消し線が出ている場合）は下記を試してみてください。
HTML
1<style type="text/css"> 2html>body {background:#000000!important;color:#ffffff} 3</style>
投稿2018/07/11 07:18
総合スコア69407
ご回答ありがとうございます。具体的にはデベロッパーツールでは上から以下のような表示になっています。
element.style {
}
p {
margin: 0 0 10px;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
user agent stylesheet
p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
「-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;」
に打消し線がついています。
その下に
Style Attribute {
background: #000000 !important;
color: #ffffff;
}
html>body {
background: #000000!important;
color: #ffffff;
}
と続いており、最後のcolorと#ffffffに打消し線がついています。
ご教示頂きましたコードを入力してみましたが、やはり背景色は変わらずでした・・・。
とりあえず「背景色」がどこで設定されているかを探す必要があると思います。
使用されているテーマは自作テーマでしょうか？それとも公開されているテーマでしょうか？後者の場合は入手先をリンクつきで質問文に追記してください。
自作テーマです。といっても前任者が外部の人間と共同で作成したもののようでして、恥ずかしながら内容に関しては全く理解できていない状態です。
デベロッパーツールのElementsパネルでbody要素からひと階層ずつ確認していくしかないですね。
0
WordPressにおける実現方法はさておき、CSSは!important記述がない限り基本、後勝ちです。
css
1 body{ 2 background:#000; 3 color:#fff; 4 } 5 body{ 6 background:#fff; 7 color:#000; 8 } 9
上記のように書かれた場合、背景が#fff（白）、文字色が#000（黒）になります。
これをヒントにやってみてください。
投稿2018/07/04 08:45
編集2018/07/04 08:48総合スコア80850
挑戦してみたのですがうまくいきませんでした・・・。時間が無かったため、強引ですがテキストごと一枚の画像ファイルにして貼り付けました。ご回答ありがとうございました。基礎的な知識が不足しすぎているためもう少し勉強して出直してきます。
ちょっともったいないですね。
実際にやってみた内容を質問に追記していただけますか？
もう少し具体的なアドバイスができるかもしれません。
ありがとうございます！
すみません、今日はもう出なければならないため、やってみた具体的な内容を明日こちらに投稿させて頂きます。またお時間のある時にでもご回答頂ければ幸いです。
0
自己解決
ご回答頂いた皆様ありがとうございました。
以下のコードで（黒背景・フォントカラー白・フォントサイズ30ピクセル）解決しました。
<style type="text/css"> .haikei-kuro {background-color: #000000;color: #ffffff;font-size: 30px;}</style> <div class="haikei-kuro">あいうえお</div>
厳密には文字の背景色を黒にしており、ページの背景色を変更できたわけではないのですが、当初のコードのように行間が白くなったりせず、改行しても隙間なく背景が黒になり閲覧上は目的を達成しているため解決としました。ご助言下さった皆様、誠にありがとうございました。
投稿2018/07/12 07:39
総合スコア10
質問は正確に要望を伝えてもらえればと思います。もっと早く解決出来たかもしれません。
解決されて何よりです。
(^^)
何度もご親切にありがとうございました！今後は最終目標がどういう形なのかを詳細に説明できるよう、要点を整理してから質問させて頂きます・・・！
あなたの回答
tips
プレビュー
