WordPressテーマSANGOの質問

PC表示でヘッダーメニューの背景色を合わせたい

アバター
hiroa

初めまして。
「ロゴ画像の最大幅をメインコンテンツと合わせるCSS」で揃えてみたのですが、
PC表示でヘッダーメニューの背景も一緒に揃えることは可能でしょうか?

ヘッダーのロゴ画像を横いっぱいに表示するカスタマイズ
コメントへの回答
サルワカくん
サルワカくん
2018/02/26

はじめまして。ヘッダーメニューの背景とは、背景色でしょうか。
背景色であれば、外観⇒カスタマイズ⇒色から変更できます。

アバター
hiroa
2018/02/26

先ほどhiroaで投稿した者なのですが、言葉足らずで分かり難かったと思うので補足させて下さい。
URLのように「ロゴ画像の最大幅をメインコンテンツと合わせるCSS」を貼り付けると、
PC閲覧時にロゴの左右の背景が黒っぽく残ったため、メインコンテンツの背景と同色に変更しました。
これだとヘッダーメニューの背景色の濃い赤色だけが画面の両端まで達してしまうため、
このヘッダーメニューの背景色もロゴ画像やメインコンテンツの幅に合わせたいと考えています。

URLは載せて欲しくないので、こちらは確認して頂けたら削除して頂けると助かります。

サルワカくん
サルワカくん
2018/02/26

あ、そういうことですね。

header.header {
  background-color: #色コード;
}

でいけるかと思います。

アバター
hiroa
2018/02/27

早速のお返事有難うございました。
https://yahoo.jp/box/P13OuE
こんな感じにしたいと思ったのですが、
教わったものだと出来なかったのですが、
CSS内に普通に付け加えるだけで良いのですよね?
何度もお手数お掛けして本当に申し訳ありませんが
何卒よろしくお願いいたします。

サルワカくん
サルワカくん
2018/02/27

あー、なるほど。勘違いしておりました。
①以下のCSSを追加

nav.desktop-nav {
    max-width: 1000px;
    margin: 0 auto;
    background: #ee807a;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);/*影が不要であれば、この行削除*/
}
.header {
    box-shadow: none;
}

② ヘッダーの背景色は薄いピンク(全体の背景色と同じもの)にして頂けますか?

アバター
hiroa
2018/02/27

無事出来ました!
何度もお手数お掛けして申し訳ありませんでした。
有難う御座いました!!

アバター
Hiroshi.SND
2018/03/29

何とかSANGO を使わせていただいております超初心者ですが、
ここでの質疑を拝見しても、以下の用語について、どの部分をさしているのかが、
理解できないので、出来ましたら、画像にて教えていただければ、幸いです。

1)ヘッダーの場所はの「場所」とはどこをさしているの?

2)ヘッダーの背景色の「背景色」の位置はどこ?

3)ヘッダーメニューの背景色の「ヘッダーメニュー」のある位置は?

4)ヘッダーメニューの背景色、、の「ロゴ画像」の位置は?

5)ロゴの左右の背景が黒っぽくの「ロゴの左右の背景」の位置は?
前掲のhiroa様のご質問と同じ現象、
「ロゴ画像の最大幅をメインコンテンツと合わせるCSS」を貼り付けた場合に、
PC閲覧時にロゴの左右の背景が黒っぽく残ったため」という現象が解決できずにおります。・・・」

実は、私もこれと同じ問題があり、未だに解決できていません。(黒色を変更したい)
ご教授よろしく、お願い致します。
尚、ここに至るまでには、サルワカ様のご指導のように、
子テーマのstyle.cssを編集し、子テーマを有効化して使用しております。
以上、よろしくお願いいたします。

サルワカくん
サルワカくん
2018/03/30

私の方も質問のやり取りの中でどこを指しているのかよく分からなくなってしまったので、整理して説明します。
まず、ロゴ画像の左右の黒色の部分は、以下のCSSのbackground: #323232;で指定されています。このコードは子テーマのstyle.cssにあるはずです。

.header--center #logo {
    padding: 0;
    background: #323232;
}

#323232を使いたい色コードに変えて頂ければと思います。

次に、左右端まで伸びるメニュー部分の背景色(ロゴ画像の下)は、外観⇒カスタマイズ⇒色⇒「ヘッダー背景色」から指定できます。デフォルトでは水色になっています。

最後に、ピンク色になってしまった部分は、前のコメント上のCSSをコピペされたからだと思います。ピンクなどにしたくない場合、こちらのCSSは削除して頂くのが良いと思います。

nav.desktop-nav {
    max-width: 1000px;
    margin: 0 auto;
    background: #ee807a;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);/*影が不要であれば、この行削除*/
}

もしピンク色の部分の色だけ変えたいという場合には、background: #ee807a;の色コードを変えて頂ければと思います。

アバター
Hiroshi.SND
2018/03/31

早速のご回答、有難うございました。
ご指導の通りに設定しましたところ、期待通りにカスタマイズできました。