ワードプレスのブロック(カバー画像)をメインカラム幅いっぱいに表示したいです。

ワードプレスのブロック(カバー画像)とは、具体的にはどの部分のことでしょうか？

質問内容的にどの部分か分からないので、スクショで、この部分と提示すれば分かってもらえて、回答がもらえるかも知れないです。

現状以下の状態で、どれがカバー画像。とおしゃってるか、さっぱり分からない❦

https://gyazo.com/c8fcfeea907beae30a627c361f4dfbd8

丁寧な指摘ありがとうございます。

初めての質問のため分かりにくくて申し訳ないです。

問題の部分は下記のスクショの海の画像の部分です。

この部分はワードプレスブロックのカバー画像で実装しました。これをメインカラムいっぱいに表示したいです。よろしくお願いします。

http://darumaya-syoku.com/

追記ですが、cocoonのメインカラム設定では1600、メインカラム余白は36で設定しており、メインカラムいっぱいに表示するのはカバー画像で実装した画像のみにしたいです。

可能でしょうか？

HTMLで見てもらえたら分かると思いますが

HTMLはこんな感じ

<
div class="wp-block-cover has-background-dim" style="background-image:url(背景画像のURL)"><
div class="wp-block-cover__inner-container">
<p style="text-align:center" class="has-large-font-size"></p>
<
/div><
/div>

ブルーで書いたclass属性wp-block-coverの幅とmarginを変更すればイケると思います。

.wp-block-cover, .wp-block-cover-image {
	width: 100%;
	margin: 0 0 1.5em;
}

widthが100%ですが、左右の余白が画像のとおり36pxずつ入ってるので、トータル（100%+72px）の幅になるように装飾を変更する感じです。

※clac　CSSなどで検索したら実装できるかも知れません。※私のChromeデベロッパーツールがおバカちゃんなのか？いつも試せないので、そちらで実装して試してください。

あとmarginは、0 0 1.5em;　赤文字の部分を36pxに変更する感じです。

margin: 0 -36px 1.5em;

上余白は0、左右余白は36px　はみ出し幅いっぱいに、下余白は1.5文字の幅。という指定です。

PC上ではみ出る幅があるはずだと思います。その場合は子テーマの下にあるメディアクエリで左右の余白marginを再度設定し直してください。

実際チェックできないので、やり方だけですが。

clac()が使えない場合、&　プチ説明

トータル（100%+72px）の幅になるように装飾を変更する感じです。

• 余白36px　main領域に海の画像　余白36px
• 余白をなくしたい➡
• 両サイド余白を、36pxずつ　はみ出して表示するイメージ

余白を%で表示した場合

• 余白3%　main領域に海の画像(ココはwidth100％)　余白3%
• あわせて106%にする

それで

• margin: 0 -3% 1.5em;

左右余白は3％づつ　はみ出すようなイメージです。

キッチリ調整しないと横揺れの元になりますので、ご注意を。

かうたっく様ありがとうございます。

クラスで指定したらいいのですね！なにぶん自分も初心者なので非常に参考になりました！

後日実装させていただいて報告します。本当にありがとうございます。

おかげさまでなんとか実装させていただきました。

/*カバー画像全幅表示*/
.wp-block-cover, .wp-block-cover-image {
	min-height: 600px !important;
	width: auto !important;
	margin: 0 -36px 1.5em !important;
}
.page .main {
  border: none;
}

最終的にこのようなコードで落ちつきました。

なぜかclassを指定しても親テーマのcssを読み込んでしまうのでやむおえず「!important」をつけましたが、問題なければいいのですが、、、

さらにwidthも100％だと左に寄るのでautoにすることでカラムいっぱいに表示できました。さらに1pxほどの隙間もあったのでborderも消しました。

スマホで見た際に、横スクロールが発生しています。

そのため、まずは↓の CSS を削除します。

.wp-block-cover, .wp-block-cover-image {
	min-height: 600px !important;
	width: auto !important;
	margin: 0 -36px 1.5em !important;
}

そして、↓の CSS を追加します。

.entry-content .wp-block-cover,
.entry-content .wp-block-cover-image {
  margin: 0 calc((100% - 100vw)/2) 1.5em;
  min-height: 600px;
  width: auto;
}

!important は、使ってはダメです。ちなみに、子テーマに書いた CSS が適用されないのは、子テーマの CSS より後で WordPress が Gutenberg の CSS を読み込んでいるため。ただ、優先度がより高いセレクタ名で指定すると反映されます。

なぜかclassを指定しても親テーマのcssを読み込んでしまうのでやむおえず「!important」をつけましたが、問題なければいいのですが、、

問題が出るとしたら、AMPでは無視されたような気がするので、気になるのであればやめたほうが良いかも。って思います。

Akira様、かうたっく様ありがとうございます

スマホで横スクロールが発生しているのに気付いていませんでした

Akira様の通りにさせてもらったらうまくいきました。

classの優先順位が未だに理解できておらず恥ずかしいかぎりです。

AMPも有効にしたいので!impotantは使わないように心がけます。

本当にありがとうございます