サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020年4月6日 00:43
いつもお世話になっております。
テーマの設定ではないかもしれませんが、表題の現象が下記の記事で起きています。
https://fuku-channnel.com/before_led_exchange
通常、段落の余白はmargin: 1em 0 3em 0;にしていますが、上記記事は下記のCSSが適応されているようです。自分で設定した記憶はありませんが、テーマ設定によって変更されているのでしょうか？
- margin-top: 3.7em;
- margin-bottom: 3.7em;
子テーマのスタイルCSSでは記載されていないので原因不明です。
大変お手数ですが、アドバイスいただけますと幸いです。
よろしくお願いいたします。
2020年4月6日 10:08
スキンの設定でしょうかね。
スクリーンショットにもある
.entry-content>*, .demo .entry-content p {
margin-top: 3.7em;
margin-bottom: 3.7em;
}
というのが見受けられます。
p, .paragraph {
margin: 1em 0 3em 0;
}
は別途設定されており、「.paragraph」に対しては、指定しているマージンが取られています。
「.paragraph」以外の要素は、まだスキンで設定されているデフォルトのCSSの影響を受けていますので、子テーマに上書きして、お好きなマージンを取ってみてはいかがでしょう。
わいひら reacted
Topic starter
2020年4月6日 14:10
ジャム君様
ご返信ありがとうございます。
初心者のため頭を悩ませています。
最初に添付した画像のまとめから下の文章は.paragraphではないということでしょうか？
添付した記事だけが段落のはじめの余白が多くなっています。
子テーマのスタイルCSS以外で記事によって書式が変わるように設定することができるのでしょうか？
【問題がある記事】
https://fuku-channnel.com/before_led_exchange
【問題ない記事】
2020年4月6日 15:05
ちょっと書き方があれだったので、一部訂正を。
p, .paragraph {
margin: 1em 0 3em 0;
}
この「.paragraph」が付いたCSSでは、現状「p」に対してマージンが適用されています。
ただしCSSのセレクタの関係上、「.entry-content>*, .demo .entry-content p」に負けており、優先して「.entry-content>*, .demo .entry-content p」で設定した値がマージンとして使用されています。
この「.entry-content>*, .demo .entry-content p」の値は、
「Cocoon設定」＞「本文」の中にある「行の余白」で変更可能です。
問題ない記事としてサンプル提示いただいた記事だと、導入文に問題があります。
（コードが正常ではありません）
このコードより上は「.entry-content>*, .demo .entry-content p」が適用されていますが、それよりも下は「p, .paragraph」で「p」のマージンを決定しているようです。
1.Cocoonの設定からマージンの量を調整する
2.記事にある誤ったままのコードを正常に処理する
3.なお問題が続くようであればもう少し詳細な環境情報をいただければほかの方からの的確な回答がもらいやすいかもしれません
書き込みの前に以下の3点をご確認ください。
1.1つのトピックにつき1つの質問を書き込んでください
2.不具合・カスタマイズ対象ページのURLを提示し高速化を無効にしてください
3.該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります
This post was modified 5年前 2回 by ジャム君
わいひら reacted
Topic starter
2020年4月6日 16:55
ジャム君様
ご回答ありがとうございます。
コクーン設定本文の行の余白が効いていたようです。
また、エラーコードを修正したところ、記事によって行の余白が異なる問題が解決しました。
解決済みにする前に一点だけ教えていただきたいのですが、なぜ下記コードがコクーン設定本文の行の余白と分かったのでしょうか？
.entry-content>*, .demo .entry-content p {
margin-top: 3.7em;
margin-bottom: 3.7em;
}
わいひら reacted
2020年4月6日 17:16
1.私のサイト（テスト環境含め）にも同じ記載があった
2.style.cssのように、CSSファイルが別途出力されていない（HTMLファイルに埋め込んだ状態になっている）
3.本文に影響を与えるとしたらCocoon本体の設定か、プラグイン含め、別途用意したCSSファイルの影響
などなど考えていくと、Cocoon設定の線が強いようにお見受けしました。
Cocoonは子テーマも含め、「高速化」設定の「CSS縮小化」を行うと、CSSがHTMLファイル上に縮小化され埋め込まれるようになっています。
どのファイルが影響しているのかChromeの検証ツールからでもわかりにくかったら、「高速化」の設定をすべて一度解除しておくと、どこの記述の影響なのか見えやすくなりますよ。
わいひら reacted
Topic starter
2020年4月6日 22:18
ジャム君様
ご返信ありがとうございます。
勉強のためもう一つだけ質問させてください。
3.本文に影響を与えるとしたらCocoon本体の設定か、プラグイン含め、別途用意したCSSファイルの影響
とありますが、Cocoon本体の設定かも、と思った時にそれが「本文」の中にある「行の余白」とどうしてわかったのでしょうか？
ソースコードを見るとスキンスタイルに.entry-contentがあることまでは確認できましたが、本文の行の余白とまではたどり着けませんでした。
この「.entry-content>*, .demo .entry-content p」の値は、
「Cocoon設定」＞「本文」の中にある「行の余白」で変更可能です。
2020年4月6日 22:44
.entry-content>*, .demo .entry-content p {
margin-top: 3.7em;
margin-bottom: 3.7em;
}
このコードを見たとき、marginで行間（topとbottomで上下余白）の設定をしているのがわかります。
また私のサイト（テスト環境含む）や、Cocoonのサイトでも同様のCSSはありましたが、marginで指定されている数値が異なっていました。
その中でCocoonの設定となると、「Cocoon設定」＞「本文」の中にある「行の余白」が関連しているのではないかとテスト環境で数値を変更したところ、再現した次第です。
サーバーに余裕があればですが、WordPress本体やプラグインのアップデートをしてもプラグインが正常に動作するか、本番環境でおかしなところがあるけど設定あまりいじれない、というようなときにテスト環境が用意されていると、最悪壊してしまっても再インストールすれば済む話ですので、テスト環境があると便利ですよ。
わいひら reacted
Topic starter
2020年4月6日 23:10
ジャム君様
早急なご返信ありがとうございます。
テスト環境知りませんでした。
サブドメインでテスト環境を作成する手順が記事にのっていましたので、トライしてみようと思います。
サーバーに余裕があればですが、WordPress本体やプラグインのアップデートをしてもプラグインが正常に動作するか、本番環境でおかしなところがあるけど設定あまりいじれない、というようなときにテスト環境が用意されていると、最悪壊してしまっても再インストールすれば済む話ですので、テスト環境があると便利ですよ。
私の質問は以上になります。ご教示いただき大変ありがとうございました。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。