CSS というのは、HTML や他の要素の CSS を見ないと指定できません。

サイト URL のご提示と、どの部分の要素に指定されたいかのご説明をいただけるでしょうか。

想像するに、こんな CSS かなとは思いますが。

.haikei {
  background: f4f4f4;
  margin: 0 calc((100% - 100vw) / 2)
}

セミコロンが抜けているので、再度の書き込み。

.haikei {
  background: f4f4f4;
  margin: 0 calc((100% - 100vw) / 2);
}

Akiraさん

こんにちは。お忙しい中ありがとうございます。

以下のURLになります。

https://goo.gl/rFVSMt

例えば、上記ページはh2が5つありますので、2つ目と4つ目のh2以下の要素に対して、アクセントを付ける目的で、横幅いっぱいの背景色を付けたいと考えています。

お手数をおかけしますがよろしくお願いします。

こんにちは。背景は#f4f4f4が必要だと思います。

background: f4f4f4;

HTMLを実際に書いて、iPhoneで確認したときどんな感じではみ出し表示されているか、画像を添付していただけたらと思います。

Mac・iPhoneがそろってなければ、iPhone上でのスタイルを確認することができないと思うので、想像だけでのCSSになる可能性はあるかと思います。

あ。たぶん平気だと思いますが、確認はキャッシュのない状況でおねがいします。プラグイン・場合によってはサーバーなど。

Akiraさん

こんにちは。

Akiraさんに教えていただいたCSSを入れてみましたが、添付画像のように、本文の部分が左右いっぱいに広がっています。どのような理由が考えられますでしょうか？

背景色のみ広げることは可能でしょうか？

背景色の色は少し濃くしましたので、以下のようなCSSを書いております。

.haikei {

  background: bcb8b8;

  margin: 0 calc((100% - 100vw) / 2);

}

かうたっくさん

ありがとうございます。

以下のCSSの場合、Mac版Safariで、右にスクロールしてしまいます。Chromeでは大丈夫です。またモバイル版のSafariでも横にスクロールすることはありませんでした。

.haikei {
background: bcb8b8;
margin: 0 -200%;
padding: 0 200%;
}

本文の部分が左右いっぱいに広がっています。どのような理由が考えられますでしょうか？

ご質問が、特定の要素に「背景色を付けて」「横幅いっぱい広げる」カスタマイズとのことだったからです。

本文は別の指定が必要です。

このような CSS でどうでしょうか。

.haikei {
  background: #bcb8b8;
  margin: 0 calc((100% - 100vw) / 2);
  padding: 0 29px 1em;
}

.haikei > h2 {
  margin: 0 calc((100% - 100vw) / 2);
  padding: 25px calc((100vw - 1142px) / 2) 15px;
}

.haikei > p,
.haikei > div,
.haikei > h3 {
  margin-left: auto;
  margin-right: auto;
  max-width: 1142px;
}

@media screen and (max-width: 1202px) {
  
  .haikei > h2 {
    padding: 25px calc((100vw - 100%) / 2) 15px;
  }
}

@media screen and (max-width: 768px) {
  
  .haikei {
    padding: 0 10px 1em;
  }
  
  .haikei .column-wrap {
    text-align: center;
  }
}

@media screen and (max-width: 480px) {
  
  .haikei > h2 {
    padding: 10px calc((100vw - 100%) / 2) 8px;
  }
}

Akiraさん

僕の説明が下手ですみませんでした。

まさに希望通りのカスタマイズです。本当にありがとうございます！

1点教えていただいてもいいでしょうか？

以下のようにHTMLを書いているのですが、一番上のh2の部分に背景色を適用するにはどうすればいいのでしょうか？

<div class="haikei">
<h2>〇〇〇〇</h2>

先程の CSS の中に、下記の指定があります。

.haikei > h2 {
  margin: 0 calc((100% - 100vw) / 2);
  padding: 25px calc((100vw - 1142px) / 2) 15px;
}

ここに background を指定されると、背景色が変わります。また、color を指定されると、フォント色の変更も可能です。

指定後は、こんな感じです。

.haikei > h2 {
  background: #000026;
  color: #fff;
  margin: 0 calc((100% - 100vw) / 2);
  padding: 25px calc((100vw - 1142px) / 2) 15px;
}

それと、今回のご質問とは関係がありませんが、jQuery にエラーが出ています。

エラー箇所は、子テーマの tmp-user / head-insert.php にあると思われる jQuery です。

WordPress では $ が使えないので、変更が必要です。

現在の jQuery と変更後のコードは、notepad.pw に貼り付けました。

https://notepad.pw/share/35a68a6s9

Akiraさん

ありがとうございます！

H2に適用したCSS（下線）が横幅いっぱいに広がっているのを、広がらないようにすることはできるのでしょうか？

同じページ内のh2と比較すると、H2に適用したCSS（下線）が横幅いっぱいに表示されています。これを同じページ内のh2と同じようにできればと思っているのですが…画像を添付します。

jQueryのエラーについても教えて頂きありがとうございます。全く気がついておりませんでした。早速修正しました。本当に感謝しています。

大きな画面幅で横いっぱいにならないように。と言う意味でしたら以下を追加してご確認いただけますか

@media screen and (min-width: 1203px) {
	.haikei > h2 {
		margin: 0;
	}
	.haikei {
		margin: 0;
	}
}

そのようなデザインであれば、もっと少ない CSS でできます。

このフォーラムをもとに追加された CSS を全て削除し、下記の CSS を追加します。

/* 背景色を横幅いっぱいに */
.haikei {
  background: #f4f4f4;
  margin: 0 calc((100% - 100vw) / 2);
  padding: 0 29px 1em;
}

.haikei > p,
.haikei > div,
.haikei > h2,
.haikei > h3 {
  margin-left: auto;
  margin-right: auto;
  max-width: 1142px;
}

.haikei > h2 {
  background: #f4f4f4;
}

@media screen and (max-width: 768px) {
  
  .haikei {
    padding: 0 10px 1em;
  }
  
  .haikei .column-wrap {
    text-align: center;
  }
}

それと、まだ jQuery でエラーが出ています。

jQuery を書かれているファイルも、エラーの原因でした。

現在は tmp-user / head-insert.php に書かれていると思うのですが、子テーマの javascript.js に jQuery をお書きください。

でないと、jQuery の本体が読み込まれる前にコードが読み込まれ、実行できずにエラーが出てしまいます。

javascript.js に書かれる際には、script タグでコードを囲む必要はありません。そのまま jQuery コードだけを追加します。

Akiraさん

ありがとうございます！

何度もすみませんでした。思い描いていたイメージのものが出来ました。本当にありがとうございました！

jQuery のエラーについてもありがとうございます。

tmp-user / head-insert.php に書いていたものを、子テーマの javascript.js へ書き直しました。また、scriptタグも外して、そのまま jQuery コードだけを書きました。

Chromeのデベロッパーツールで確認したところ、エラーは出ておりません。

今回は質問以外のこともご丁寧に教えてくださり、本当に感謝しています。ありがとうございました！