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

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

ただいまの
回答率

90.33%

  • HTML

    9597questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • WordPress

    7682questions

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

  • CSS

    6216questions

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

  • Bootstrap

    1039questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

  • CSSフレームワーク

    157questions

    CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Bootstrapで特定ページのみ背景色を変更する方法

解決済

回答 5

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 605

kikkk

score 2

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>

次に以下のように記述してみたところ、文字は白くなり背景は黒になっているのですが、ページ全体ではなく「文字」の背景だけが黒になっており、行間は白くなるため縞々になってしまいます。

<style type="text/css">
p {background:#000000;color:#ffffff}
</style>
</head>
<body>
<p>あいうえお</p>
</body>

何か根本的に間違っているのかもしれませんが見当がつきません・・・。よろしくお願い致します。

7/11追記
テーマは前任者が作成した自作テーマを使用しております。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • mts10806

    2018/07/04 17:20

    「可能でしょうか。」という質問だと「可能です」という回答しかつきません。自身が調べてみたことやってみたことを追記し、「何がどう分からないのか」具体的に記載して回答を得やすい質問内容にしてください。質問は編集することができます。

    キャンセル

  • perpouh

    2018/07/04 17:23

    「特定ページ」が何を指すのかも加えてほしいです。記事一覧なのか、特定記事なのか、固定ページなのかなど。

    キャンセル

  • kei344

    2018/07/11 10:38

    (質問文は編集できます)質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

    キャンセル

回答 5

+3

基本的にはあとから色を指定するだけですが、Bootstrapにより一部厄介なスタイルが適用されています。

button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}


色を反転する場合はフォームコントロールなどが見えなくならないよう気を付けてみてください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/04 20:38

    ご回答ありがとうございました。せっかくご回答頂いたにも関わらず知識不足のためうまくいきませんでした。もう少し基礎的な勉強をして出直してきます・・・。

    キャンセル

+3

Chromeの「検証機能(デベロッパーツール)」で確認された方が良いかと思いますが、以下を試してみてください。

<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 18:25 編集

    ご回答ありがとうございます。以下の記述で合ってますでしょうか・・・?

    <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が優先されてしまっているということでしょうか・・・?

    キャンセル

  • 2018/07/06 09:15

    そうですね、優先されていますので、とりあえず以下を試してみてください。

    <body style="background: #000000 !important;color: #ffffff;">
    と、「!important」を背景指定に入れてみてください。

    WordPressにはカスタマイズ用として子テーマが作成可能ですが、作成済でしょうか?
    まだなら「WordPress 子テーマ作成」等で検索してみてください。
    ※参考先を追記しておきます。

    キャンセル

  • 2018/07/06 17:40 編集

    ご丁寧にありがとうございます。頂いた情報を基に以下試してみました。

    ・!importantを背景指定に→反映されず
    ・プラグイン"CSS & JavaScript Toolbox"→滞りなくインストールできたが、CSSを記述してもやはり反映されず
    ・子テーマの作成→こちらも問題無く作成でき、有効化までは完了しました。試しにstyle.cssに以下のように記述してみましたが、やはり反映されませんでした・・・。

    /*
    Theme Name:xxxx_child
    Template:xxxx
    Version:3.0
    */
    body {background:#000000;}

    3パターン全てでchromeのデベロッパーツールも確認したのですが、昨日と同様該当箇所には「type.less:64」「bootstrap.css:1062」の順に表示されます・・・。

    キャンセル

  • 2018/07/11 10:36

    参考になりますか?
    https://teratail.com/questions/7117

    キャンセル

  • 2018/07/11 11:54

    ご回答ありがとうございます。拝見しました。
    すみません、variables.lessというファイルはwordpressのどこに格納されているのでしょうか・・・?

    キャンセル

+2

WordPressにおける実現方法はさておき、CSSは!important記述がない限り基本、後勝ちです。

    body{
        background:#000;
        color:#fff;
    }        
    body{
        background:#fff;
        color:#000;
    }

上記のように書かれた場合、背景が#fff(白)、文字色が#000(黒)になります。

これをヒントにやってみてください。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/04 20:34

    挑戦してみたのですがうまくいきませんでした・・・。時間が無かったため、強引ですがテキストごと一枚の画像ファイルにして貼り付けました。ご回答ありがとうございました。基礎的な知識が不足しすぎているためもう少し勉強して出直してきます。

    キャンセル

  • 2018/07/04 20:35

    ちょっともったいないですね。
    実際にやってみた内容を質問に追記していただけますか?
    もう少し具体的なアドバイスができるかもしれません。

    キャンセル

  • 2018/07/04 20:42

    ありがとうございます!
    すみません、今日はもう出なければならないため、やってみた具体的な内容を明日こちらに投稿させて頂きます。またお時間のある時にでもご回答頂ければ幸いです。

    キャンセル

+2

3パターン全てでchromeのデベロッパーツールも確認したのですが、昨日と同様該当箇所には「type.less:64」「bootstrap.css:1062」の順に表示されます・・・。

下記で指定したものは出てこないのでしょうか。

<style type="text/css">
body {background:#000000;color:#ffffff}
</style>

出てきている状態で上書きされている場合(打ち消し線が出ている場合)は下記を試してみてください。

<style type="text/css">
html>body {background:#000000!important;color:#ffffff}
</style>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/11 17:41 編集

    ご回答ありがとうございます。具体的にはデベロッパーツールでは上から以下のような表示になっています。

    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;」
    に打消し線がついています。

    キャンセル

  • 2018/07/11 17:49

    その下に

    Style Attribute {
    background: #000000 !important;
    color: #ffffff;
    }

    html>body {
    background: #000000!important;
    color: #ffffff;
    }

    と続いており、最後のcolorと#ffffffに打消し線がついています。

    ご教示頂きましたコードを入力してみましたが、やはり背景色は変わらずでした・・・。

    キャンセル

  • 2018/07/11 17:54

    とりあえず「背景色」がどこで設定されているかを探す必要があると思います。

    使用されているテーマは自作テーマでしょうか?それとも公開されているテーマでしょうか?後者の場合は入手先をリンクつきで質問文に追記してください。

    キャンセル

  • 2018/07/11 17:58

    自作テーマです。といっても前任者が外部の人間と共同で作成したもののようでして、恥ずかしながら内容に関しては全く理解できていない状態です。

    キャンセル

  • 2018/07/11 18:03

    デベロッパーツールのElementsパネルでbody要素からひと階層ずつ確認していくしかないですね。

    キャンセル

check解決した方法

+1

ご回答頂いた皆様ありがとうございました。
以下のコードで(黒背景・フォントカラー白・フォントサイズ30ピクセル)解決しました。

<style type="text/css">
.haikei-kuro {background-color: #000000;color: #ffffff;font-size: 30px;}</style>

<div class="haikei-kuro">あいうえお</div>

厳密には文字の背景色を黒にしており、ページの背景色を変更できたわけではないのですが、当初のコードのように行間が白くなったりせず、改行しても隙間なく背景が黒になり閲覧上は目的を達成しているため解決としました。ご助言下さった皆様、誠にありがとうございました。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/12 18:02

    質問は正確に要望を伝えてもらえればと思います。もっと早く解決出来たかもしれません。

    解決されて何よりです。
    (^^)

    キャンセル

  • 2018/07/12 18:08

    何度もご親切にありがとうございました!今後は最終目標がどういう形なのかを詳細に説明できるよう、要点を整理してから質問させて頂きます・・・!

    キャンセル

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

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

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

  • HTML

    9597questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • WordPress

    7682questions

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

  • CSS

    6216questions

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

  • Bootstrap

    1039questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

  • CSSフレームワーク

    157questions

    CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。