１カラムブロックを画面全幅に表示したいが、 両脇と上下のブロック間に余白ができてしまう - Cocoonテーマに関する質問 https://wp-cocoon.com/community/cocoon-theme/%ef%bc%91%e3%82%ab%e3%83%a9%e3%83%a0%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%82%92%e7%94%bb%e9%9d%a2%e5%85%a8%e5%b9%85%e3%81%ab%e8%a1%a8%e7%a4%ba%e3%81%97%e3%81%9f%e3%81%84%e3%81%8c%e3%80%81-%e4%b8%a1/ Cocoon ディスカッション掲示板 ja Fri, 15 May 2026 17:36:31 +0000 wpForo 60 RE: １カラムブロックを画面全幅に表示したいが、 両脇と上下のブロック間に余白ができてしまう https://wp-cocoon.com/community/cocoon-theme/%ef%bc%91%e3%82%ab%e3%83%a9%e3%83%a0%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%82%92%e7%94%bb%e9%9d%a2%e5%85%a8%e5%b9%85%e3%81%ab%e8%a1%a8%e7%a4%ba%e3%81%97%e3%81%9f%e3%81%84%e3%81%8c%e3%80%81-%e4%b8%a1/#post-86347 Wed, 10 Sep 2025 10:28:16 +0000 ご回答ありがとうございます！
勝ち負けがあるのですね。

「CSSが効かない・反映されないときの対処法まとめ」を見て勉強致しますm(__)m

失礼いたしました。「ブロック下余白」についても確認済での質問でした。

解決済させていただきます。大変ありがとうございました。

]]> Cocoonテーマに関する質問 takamaru7131 https://wp-cocoon.com/community/cocoon-theme/%ef%bc%91%e3%82%ab%e3%83%a9%e3%83%a0%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%82%92%e7%94%bb%e9%9d%a2%e5%85%a8%e5%b9%85%e3%81%ab%e8%a1%a8%e7%a4%ba%e3%81%97%e3%81%9f%e3%81%84%e3%81%8c%e3%80%81-%e4%b8%a1/#post-86347 RE: １カラムブロックを画面全幅に表示したいが、 両脇と上下のブロック間に余白ができてしまう https://wp-cocoon.com/community/cocoon-theme/%ef%bc%91%e3%82%ab%e3%83%a9%e3%83%a0%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%82%92%e7%94%bb%e9%9d%a2%e5%85%a8%e5%b9%85%e3%81%ab%e8%a1%a8%e7%a4%ba%e3%81%97%e3%81%9f%e3%81%84%e3%81%8c%e3%80%81-%e4%b8%a1/#post-86344 Wed, 10 Sep 2025 10:15:55 +0000 負けているだけだと思います。

 
CSSには詳細度というものがあり、勝ち負けがあります。
（重なった場合に、どちらが優先されるか、どちらが勝つか）
 
詳細度については、解説サイトが多数あると思います。
一例をリンクしておきます、他にも多数あります。
 
CSSが効かない・反映されないときの対処法まとめ
https://saruwakakun.com/html-css/wordpress/cant
 
上記の「他のスタイル指定より優先順位が低いとうまく反映されない」あたりに記載があると思います。
 
CSSにこだわらなくても、先に書いた「ブロック下余白」を調整することで反映されるのですけれど。
（サラッとスルーされましたけれど）
 
このページだけに設定する場合は、今のようなCSSの書き方だと、同じ指定のものには全部適用されて困ると思いますが、それは問題ないのですよね。
（全ページ・同様のすべてのブロックに適用するのであれば問題ないです。その辺の詳細は提示されていませんので）
 
例えば、今の書き方だと、「テキスト中央寄せ」のものに全部適用されます。
（「has-text-align-center」は「テキスト中央寄せ」のためのclass）
]]> Cocoonテーマに関する質問 ｍｋ２ https://wp-cocoon.com/community/cocoon-theme/%ef%bc%91%e3%82%ab%e3%83%a9%e3%83%a0%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%82%92%e7%94%bb%e9%9d%a2%e5%85%a8%e5%b9%85%e3%81%ab%e8%a1%a8%e7%a4%ba%e3%81%97%e3%81%9f%e3%81%84%e3%81%8c%e3%80%81-%e4%b8%a1/#post-86344 RE: １カラムブロックを画面全幅に表示したいが、 両脇と上下のブロック間に余白ができてしまう https://wp-cocoon.com/community/cocoon-theme/%ef%bc%91%e3%82%ab%e3%83%a9%e3%83%a0%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%82%92%e7%94%bb%e9%9d%a2%e5%85%a8%e5%b9%85%e3%81%ab%e8%a1%a8%e7%a4%ba%e3%81%97%e3%81%9f%e3%81%84%e3%81%8c%e3%80%81-%e4%b8%a1/#post-86343 Wed, 10 Sep 2025 10:04:18 +0000 ご回答ありがとうございます！
そこでしたか、、余白の部分を特定するのにコツがいりますね。。

頂いたcss追加したら解決できました！大変助かりましたm(__)m
後ほど解決済・いいね！させていただきます！


すみません。最後に確認させてください。

添付画像の「よくある質問」段落テキストの下余白を調整したいので、
デベロッパツールで確認したオレンジ部分の.has-text-align-centerがmargin-bottom: 46.8pxとありました。

よって、以下を追加CSSに入れたのですが何も変わりませんでした。。

.has-text-align-center {
margin-bottom: 20;

}

この見方は間違っているのでしょうか？CSSの入れ方が違っているのでしょうか？
margin: 0;　と入れてもダメです。

]]> Cocoonテーマに関する質問 takamaru7131 https://wp-cocoon.com/community/cocoon-theme/%ef%bc%91%e3%82%ab%e3%83%a9%e3%83%a0%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%82%92%e7%94%bb%e9%9d%a2%e5%85%a8%e5%b9%85%e3%81%ab%e8%a1%a8%e7%a4%ba%e3%81%97%e3%81%9f%e3%81%84%e3%81%8c%e3%80%81-%e4%b8%a1/#post-86343 RE: １カラムブロックを画面全幅に表示したいが、 両脇と上下のブロック間に余白ができてしまう https://wp-cocoon.com/community/cocoon-theme/%ef%bc%91%e3%82%ab%e3%83%a9%e3%83%a0%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%82%92%e7%94%bb%e9%9d%a2%e5%85%a8%e5%b9%85%e3%81%ab%e8%a1%a8%e7%a4%ba%e3%81%97%e3%81%9f%e3%81%84%e3%81%8c%e3%80%81-%e4%b8%a1/#post-86342 Wed, 10 Sep 2025 09:03:55 +0000 そもそもなのですけれど。

ブロックエディタを使いこなしていないのかもしれないです。

Cocoonの場合、「ブロック下余白」を、ブロックエディタで調整できます。
（CSSが分からない方でも、エディタ操作だけで調整ができます）

初期はちょっと分かりづらいですが「未設定」になっています。

 
ここを、調整することで、自由にブロック下余白を調整できます。
ゼロにもできます。
 
 
例えば、デフォルトでは以下ですが。
 
「ブロック下余白」を各々ゼロにすることで、以下のようにもできます。
（CSSは一切書いていません、エディタ操作だけで、調整しています）
 
 
 
操作の様子です。
 
 
今は、ブロックエディタ操作だけで、できることも増えています。
（WordPress標準＋Cocoonの拡張部分を合わせると、結構いろいろできます）
 
今一度、ブロックエディタで何ができるのか、確認なさった方が良いのかもしれません。
]]> Cocoonテーマに関する質問 ｍｋ２ https://wp-cocoon.com/community/cocoon-theme/%ef%bc%91%e3%82%ab%e3%83%a9%e3%83%a0%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%82%92%e7%94%bb%e9%9d%a2%e5%85%a8%e5%b9%85%e3%81%ab%e8%a1%a8%e7%a4%ba%e3%81%97%e3%81%9f%e3%81%84%e3%81%8c%e3%80%81-%e4%b8%a1/#post-86342 RE: １カラムブロックを画面全幅に表示したいが、 両脇と上下のブロック間に余白ができてしまう https://wp-cocoon.com/community/cocoon-theme/%ef%bc%91%e3%82%ab%e3%83%a9%e3%83%a0%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%82%92%e7%94%bb%e9%9d%a2%e5%85%a8%e5%b9%85%e3%81%ab%e8%a1%a8%e7%a4%ba%e3%81%97%e3%81%9f%e3%81%84%e3%81%8c%e3%80%81-%e4%b8%a1/#post-86341 Wed, 10 Sep 2025 08:48:36 +0000 @takamaru7131 さんへ。

ご対応ありがとうございます。

追加でご質問いただいている件について、ここまでできているようでしたら、あとは1つ1つ選択していけば、原因は特定できそうなものだと思いますが……（スクリーンショット参照）。

 

▼以下を追加して、問題はないでしょうか？

.wp-block-cover.is-light {
    margin: 0;
}
]]> Cocoonテーマに関する質問 Y.INABA https://wp-cocoon.com/community/cocoon-theme/%ef%bc%91%e3%82%ab%e3%83%a9%e3%83%a0%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%82%92%e7%94%bb%e9%9d%a2%e5%85%a8%e5%b9%85%e3%81%ab%e8%a1%a8%e7%a4%ba%e3%81%97%e3%81%9f%e3%81%84%e3%81%8c%e3%80%81-%e4%b8%a1/#post-86341 RE: １カラムブロックを画面全幅に表示したいが、 両脇と上下のブロック間に余白ができてしまう https://wp-cocoon.com/community/cocoon-theme/%ef%bc%91%e3%82%ab%e3%83%a9%e3%83%a0%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%82%92%e7%94%bb%e9%9d%a2%e5%85%a8%e5%b9%85%e3%81%ab%e8%a1%a8%e7%a4%ba%e3%81%97%e3%81%9f%e3%81%84%e3%81%8c%e3%80%81-%e4%b8%a1/#post-86340 Wed, 10 Sep 2025 08:25:59 +0000 ご回答ありがとうございます！
大変申し訳ございません、デベロッパツールは見ていたのですが見方が理解できてなかったようです。。

添付頂いたURLを見てよく理解して確認していきます。

ヘッダー下の余白はpadding0 で解決できたのですが、カラムブロック間の余白はデベロッパツールは見ても
消し切れていないところは無いようでした。（添付画像参照）

認識不足でしたら申し訳ございませんが、ご指摘頂けたら大変有難く思います。
何卒宜しくお願い致します。

]]> Cocoonテーマに関する質問 takamaru7131 https://wp-cocoon.com/community/cocoon-theme/%ef%bc%91%e3%82%ab%e3%83%a9%e3%83%a0%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%82%92%e7%94%bb%e9%9d%a2%e5%85%a8%e5%b9%85%e3%81%ab%e8%a1%a8%e7%a4%ba%e3%81%97%e3%81%9f%e3%81%84%e3%81%8c%e3%80%81-%e4%b8%a1/#post-86340 RE: １カラムブロックを画面全幅に表示したいが、 両脇と上下のブロック間に余白ができてしまう https://wp-cocoon.com/community/cocoon-theme/%ef%bc%91%e3%82%ab%e3%83%a9%e3%83%a0%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%82%92%e7%94%bb%e9%9d%a2%e5%85%a8%e5%b9%85%e3%81%ab%e8%a1%a8%e7%a4%ba%e3%81%97%e3%81%9f%e3%81%84%e3%81%8c%e3%80%81-%e4%b8%a1/#post-86339 Wed, 10 Sep 2025 07:01:34 +0000 @takamaru7131 さんへ。

確認ですが、以下のトピックはご覧いただいておりますでしょうか？

 

サイトを拝見させていただきまして、ブラウザに搭載されているデベロッパツールで確認したところ、どうも上記で取り上げられているとおり、main要素にあたっているpaddingが消し切れていないようです（スクリーンショット）。

よって、このpaddingを無効化する（0にする）追加CSSが必要となります。

.main {
    padding: 0px;
}

※上記は一例です。必ず自分で調べたり試したりしてみるなどして、ご確認よろしくお願いいたします。

 

なお、デザイン・CSSを編集いただく上ではデベロッパツールは必須級のツールになりますので、これを機に使えるようになっていただくと良いかと思います。

（上記はChromeの例ですが、主要ブラウザではどちらでもご利用いただけるかと思います）

]]> Cocoonテーマに関する質問 Y.INABA https://wp-cocoon.com/community/cocoon-theme/%ef%bc%91%e3%82%ab%e3%83%a9%e3%83%a0%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%82%92%e7%94%bb%e9%9d%a2%e5%85%a8%e5%b9%85%e3%81%ab%e8%a1%a8%e7%a4%ba%e3%81%97%e3%81%9f%e3%81%84%e3%81%8c%e3%80%81-%e4%b8%a1/#post-86339 １カラムブロックを画面全幅に表示したいが、 両脇と上下のブロック間に余白ができてしまう https://wp-cocoon.com/community/cocoon-theme/%ef%bc%91%e3%82%ab%e3%83%a9%e3%83%a0%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%82%92%e7%94%bb%e9%9d%a2%e5%85%a8%e5%b9%85%e3%81%ab%e8%a1%a8%e7%a4%ba%e3%81%97%e3%81%9f%e3%81%84%e3%81%8c%e3%80%81-%e4%b8%a1/#post-86338 Wed, 10 Sep 2025 04:52:36 +0000 不具合・カスタマイズ対象ページのURL：
https://chakamaru.xsrv.jp/ken-test

相談内容：
制作途中ですが、１カラムなどのブロックを画面全幅に表示したいのですが、
両脇と上下のブロック間に余白ができてしまうのは何故でしょうか？

ヘッダー下の余白も広いので狭く調整したいです。

解決のために試したこと：
Cocoon設定⇒カラム⇒コンテンツ幅1600、カラム間余白設定0にしてます。
色々調べても改善されず、こちらのＱ＆Ａにて子テーマの追加CSSに以下を入れても変わりません。
https://wp-cocoon.com/community/customs/%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E4%B8%8B%E3%81%A8%E8%A8%98%E4%BA%8B%E3%81%AE%E4%BD%99%E7%99%BD%E8%AA%BF%E6%95%B4%E6%96%B9%E6%B3%95/

子テーマの追加CSSに入れた内容
.article h2, .article h3, .article h4, .article h5, .article h6 {
margin-top: 0;
}

その他、追加CSS等は入れてません。
固定ページのページタイプ⇒1カラム（フルワイド）にしてますが、その影響でしょうか？

何卒宜しくお願い致します。

環境情報：
----------------------------------------------
サイト名：ken-test
サイトURL：https://chakamaru.xsrv.jp/ken-test
ホームURL：https://chakamaru.xsrv.jp/ken-test
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン：6.8.2
PHPバージョン：8.0.30
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja,en-US;q=0.9,en;q=0.8,zh-CN;q=0.7,zh;q=0.6
----------------------------------------------
テーマ名：Cocoon
バージョン：2.8.7.1
カテゴリー数：1
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：845 バイト
functions.phpサイズ：203 バイト
----------------------------------------------
Gutenberg：1
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
CloudSecure WP Security 1.3.18
----------------------------------------------

]]> Cocoonテーマに関する質問 takamaru7131 https://wp-cocoon.com/community/cocoon-theme/%ef%bc%91%e3%82%ab%e3%83%a9%e3%83%a0%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%82%92%e7%94%bb%e9%9d%a2%e5%85%a8%e5%b9%85%e3%81%ab%e8%a1%a8%e7%a4%ba%e3%81%97%e3%81%9f%e3%81%84%e3%81%8c%e3%80%81-%e4%b8%a1/#post-86338