メンバーメニュー

ようこそ、ゲストさん

トップ > カテゴリ一覧 > WPblog > カスタム背景について…。

質問

  • カスタム背景について…。
  • 本文:

    いつもお世話になります。

    WordPressでブログを始めたばかりの頃には背景色や背景画像に、管理画面の「外観」→「背景」からブログの背景色や背景画像の設定はしていませんでした。

    しかし、6月頃に管理画面のこの方法でバックグラウンドの背景画像を指定してみました。

    それまではcssにて<body>内の背景色や背景画像を指定していました。

    背景に画像を使用するのではなくただ単に色のみを指定し直したいなと思い、
    以前にcssにて、

    【1】
    body {
    background-color: #000000;
    }

    というように指定していました。

    ですが、
    Chromeブラウザのデベロッパーツールにてcssの確認をしてみると、
    【2】
    body.custom-background {
    }

    となっています。

    何度はじめの【1】のようにCSSにて設定してもバックグラウンドの背景色に反映されず困っています。

    調べてみると、bodyのclass属性になっているとありました。

    カスタム背景という機能を一度使用すると、
    自分で背景色や背景画像を【1】のように指定するにはどうしたら良いのでしょうか?


    カスタム背景の機能を無効(削除?)するコードをfunction内に記載すると、
    カスタム背景の機能は使えなくなります。

    ですが、
    はじめの【1】のように指定してあげてもバックグラウンドの背景色や背景画像のCSSでの指定が反映されません。

    カスタム背景の機能を無効化するコードは以下のコードを使用しました。

    add_action( 'after_setup_theme', 'my_remove_custom_background', 100 );
    function my_remove_custom_background() {
    remove_theme_support( 'custom_background' );
    }

    そして、
    このままですとbody属性にclassが残ってしまうとあり以下のコードも実施してみました。

    add_filter( "body_class", "remove_custom_background_class" );

    function remove_custom_background_class( $args ){
    $classes = array();
    foreach ($args as $class) {
    if ($class !== 'custom-background') {
    $classes[] = $class;
    }
    }
    return $classes;
    }


    しかし、
    元の【1】のようにCSSで背景を指定しても反映されなくなってしまいました。


    テーマのテンプレートのbody部分を見ると以下のようになっています。
    <body <?php body_class(); ?> >

    この<?php body_class(); ?>を削除すれば、
    はじめの【1】のようにCSSで指定することで反映されるようになりますでしょうか?


    それとも、
    他になにか方法がありますでしょうか?

    body.custom-background

    というのを使用してしまうと変更できないのでしょうか?


    変更の仕方を(元通りに戻す?)ご教授お願い申し上げます。





  • 緊急度:緊急投稿者:universeさん投稿時間:2016/11/23 12:47
質問に対する回答は締め切られました

回答 No.5422

  • この回答がベストアンサーです

  • 本文:

    > AMP対応の際にカスタム背景のcustom-backgroundがスクリプト化

    何か特殊なことをしているのですか?

    少なくとも、twentyfifteen では、costom-backgroundを無効にするだけならば、functions.php の
    >>>
    // Setup the WordPress core custom background feature.
    add_theme_support( 'custom-background', apply_filters( 'twentyfifteen_custom_background_args', array(
    'default-color' => $default_color,
    'default-attachment' => 'fixed',
    ) ) );
    <<<
    をコメントアウトするだけで足ります。
    ( ただ、例によって、wpblogでは、キャッシュが効きすぎているので、すぐには反映されません。)

    また、ダッシュボードの「外観」-「CSS変更」で、
    >>>
    body.custom-background{background-color:#000}
    <<<
    と書けば、それは反映されます。
    (こちらも、wpblogでは、キャッシュが効きすぎているので、すぐには反映されないようですが)

    生成されたhtmlコード的には、
    <head>
    ...
    (custom-backgroundで出力されるスタイル)
    <style type="text/css" id="custom-background-css">
    body.custom-background { background-color: #dd9933; }
    </style>
    ...
    (プラグインなどで出力されるスタイルなど)
    ...
    (CSS変更で作成された部分)
    <style id="custom-css-css">body.custom-background{background-color:#000}</style>
    </head>

    といった感じになるので、custom-backgroundの部分は、CSS変更の修正で上書きされます。

    header.php で、

    <?php wp_head(); ?>
    の前に css を読み込む指定をしても、custom-background の出力の方が、下に出力されるので、それを上書きしたければ、<?php wp_head(); ?>の後に書く必要があります。
    # 行儀の悪い書き方なので、お勧めしません。

  • 投稿者:ジョバンニさん 投稿時間:2016/11/24 06:13
質問者からのコメント

ジョバンニ様。
ご回答ありがとうございます。

特に特殊なことはしていませんよ。
AMP対応できたら良いなと思いましてその際にカスタム背景のジャバスクリプト?がエラーになってしまうので伺った際です。m(__)m

><?php wp_head(); ?>
の前に css を読み込む指定をしても、custom-background の出力の方が、下に出力されるので、それを上書きしたければ、<?php wp_head(); ?>の後に書く必要があります。
# 行儀の悪い書き方なので、お勧めしません。

かしこまりました。


カスタム背景に関しましてはジョバンニ様にご教示して頂きましたように、
body.custom-background{background-color:#000}
にて対応しました。


詳しくご説明下さいまして誠にありがとうございます。

回答 No.5419

  • 本文:


    > 何度はじめの【1】のようにCSSにて設定してもバックグラウンドの背景色に反映されず困っています。

    自分で作った、cssファイルの方に
    body.custom-background {
    background-color: #000000;
    }
    と書くのでは、不満ですか?

    > この<?php body_class(); ?>を削除すれば、

    これを消すのは、いろんなプラグインがこの機能を利用しているから、トラブルの元です。
    (ま、消したら絶対ダメというものではないですが、残すのが「作法」です)


    > カスタム背景の機能を無効化するコードは以下のコードを使用しました。
    > add_action( 'after_setup_theme', 'my_remove_custom_background', 100 );

    こういうことをしだすと限がないので、止めた方がいいです。

  • 投稿者:ジョバンニさん 投稿時間:2016/11/23 13:58
質問者からのコメント

ジョバンニ様。
いつもありがとうございます。

>自分で作った、cssファイルの方に
body.custom-background {
background-color: #000000;
}



そうしようと思ったのですが、AMP対応の際にカスタム背景のcustom-backgroundがスクリプト化?で動いているようで、そのスクリプトタグの部分でエラーが出てしまいます。

>これを消すのは、いろんなプラグインがこの機能を利用しているから、トラブルの元です。
(ま、消したら絶対ダメというものではないですが、残すのが「作法」です)


はい。
わかりました。
残しておきます。教えていただいてよかったです。


>こういうことをしだすと限がないので、止めた方がいいです。


はい。
おっしゃる通りだ思います。

一度、背景画像を設定するのにこのカスタム背景の機能を使ってしまうと、cssのbodyのみでは指定できないのでしょうか?

ただ、bodyのpaddingの指定(px)は可能です。
カスタム背景でバックグラウンドに画像を使用する前から残しておいたCSSを編集すると、
ちゃんと指定ができます。

(これは、class属性化されてないからでしょか?)


カスタム背景を使用していなかった(cssのbodyで指定できていた状態?)ように元に戻すには、
どのようにしたら良いのでしょうか?

それとも、できまないのでしょうか?

お忙しいところ恐れ入りますが、
どうぞご教示お願い致します。