サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Cocoonテーマに関する質問
8
投稿
3
ユーザー
9
Reactions
185
表示
トピックスターター 2025年9月10日 13:52
不具合・カスタマイズ対象ページの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
----------------------------------------------
2025年9月10日 16:01
@takamaru7131 さんへ。
確認ですが、以下のトピックはご覧いただいておりますでしょうか？
サイトを拝見させていただきまして、ブラウザに搭載されているデベロッパツールで確認したところ、どうも上記で取り上げられているとおり、main要素にあたっているpaddingが消し切れていないようです（スクリーンショット）。
よって、このpaddingを無効化する（0にする）追加CSSが必要となります。
.main {
padding: 0px;
}
※上記は一例です。必ず自分で調べたり試したりしてみるなどして、ご確認よろしくお願いいたします。
なお、デザイン・CSSを編集いただく上ではデベロッパツールは必須級のツールになりますので、これを機に使えるようになっていただくと良いかと思います。
（上記はChromeの例ですが、主要ブラウザではどちらでもご利用いただけるかと思います）
takamaru7131 and わいひら reacted
トピックスターター 2025年9月10日 17:25
ご回答ありがとうございます！
大変申し訳ございません、デベロッパツールは見ていたのですが見方が理解できてなかったようです。。
添付頂いたURLを見てよく理解して確認していきます。
ヘッダー下の余白はpadding0 で解決できたのですが、カラムブロック間の余白はデベロッパツールは見ても
消し切れていないところは無いようでした。（添付画像参照）
認識不足でしたら申し訳ございませんが、ご指摘頂けたら大変有難く思います。
何卒宜しくお願い致します。
2025年9月10日 17:48
@takamaru7131 さんへ。
ご対応ありがとうございます。
追加でご質問いただいている件について、ここまでできているようでしたら、あとは1つ1つ選択していけば、原因は特定できそうなものだと思いますが……（スクリーンショット参照）。
▼以下を追加して、問題はないでしょうか？
.wp-block-cover.is-light {
margin: 0;
}
takamaru7131 reacted
2025年9月10日 18:03
そもそもなのですけれど。
ブロックエディタを使いこなしていないのかもしれないです。
Cocoonの場合、「ブロック下余白」を、ブロックエディタで調整できます。
（CSSが分からない方でも、エディタ操作だけで調整ができます）
初期はちょっと分かりづらいですが「未設定」になっています。
ここを、調整することで、自由にブロック下余白を調整できます。
ゼロにもできます。
例えば、デフォルトでは以下ですが。
「ブロック下余白」を各々ゼロにすることで、以下のようにもできます。
（CSSは一切書いていません、エディタ操作だけで、調整しています）
（CSSは一切書いていません、エディタ操作だけで、調整しています）
操作の様子です。
今は、ブロックエディタ操作だけで、できることも増えています。
（WordPress標準＋Cocoonの拡張部分を合わせると、結構いろいろできます）
（WordPress標準＋Cocoonの拡張部分を合わせると、結構いろいろできます）
今一度、ブロックエディタで何ができるのか、確認なさった方が良いのかもしれません。
トピックスターター 2025年9月10日 19:04
ご回答ありがとうございます！
そこでしたか、、余白の部分を特定するのにコツがいりますね。。
頂いたcss追加したら解決できました！大変助かりましたm(__)m
後ほど解決済・いいね！させていただきます！
すみません。最後に確認させてください。
添付画像の「よくある質問」段落テキストの下余白を調整したいので、
デベロッパツールで確認したオレンジ部分の.has-text-align-centerがmargin-bottom: 46.8pxとありました。
よって、以下を追加CSSに入れたのですが何も変わりませんでした。。
.has-text-align-center {
margin-bottom: 20;
}
この見方は間違っているのでしょうか？CSSの入れ方が違っているのでしょうか？
margin: 0; と入れてもダメです。
2025年9月10日 19:15
負けているだけだと思います。
CSSには詳細度というものがあり、勝ち負けがあります。
（重なった場合に、どちらが優先されるか、どちらが勝つか）
（重なった場合に、どちらが優先されるか、どちらが勝つか）
詳細度については、解説サイトが多数あると思います。
一例をリンクしておきます、他にも多数あります。
CSSが効かない・反映されないときの対処法まとめ
https://saruwakakun.com/html-css/wordpress/cant
https://saruwakakun.com/html-css/wordpress/cant
上記の「他のスタイル指定より優先順位が低いとうまく反映されない」あたりに記載があると思います。
CSSにこだわらなくても、先に書いた「ブロック下余白」を調整することで反映されるのですけれど。
（サラッとスルーされましたけれど）
このページだけに設定する場合は、今のようなCSSの書き方だと、同じ指定のものには全部適用されて困ると思いますが、それは問題ないのですよね。
（全ページ・同様のすべてのブロックに適用するのであれば問題ないです。その辺の詳細は提示されていませんので）
（全ページ・同様のすべてのブロックに適用するのであれば問題ないです。その辺の詳細は提示されていませんので）
例えば、今の書き方だと、「テキスト中央寄せ」のものに全部適用されます。
（「has-text-align-center」は「テキスト中央寄せ」のためのclass）
（「has-text-align-center」は「テキスト中央寄せ」のためのclass）
わいひら and takamaru7131 reacted
トピックスターター 2025年9月10日 19:28
ご回答ありがとうございます！
勝ち負けがあるのですね。
「CSSが効かない・反映されないときの対処法まとめ」を見て勉強致しますm(__)m
失礼いたしました。「ブロック下余白」についても確認済での質問でした。
解決済させていただきます。大変ありがとうございました。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。