サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2019年6月24日 23:34
お世話になっております。
上記ページの最後にgoogle adsenceの関連コンテンツユニットを配置しているのですが、空白が目立っており何とかしたいと考えております。※詳細は画像に記載致しましたので、お手数ですがご確認頂ければと思います。
関連コンテンツユニットは以下の手順で配置しております。
【関連コンテンツユニットの設置手順】
外観＞ウィジェット＞投稿本文下＞「テキスト」で関連コンテンツユニットのコードを記載
何卒宜しくお願い致します。
2019年6月24日 23:46
圧縮されているので元の記載は分かりませんけど、ご自身でスタイルしたCSSに問題があるかと思われます。
さらに上書きする感じですが、以下を追記すればそれなりに余白は狭くなりそうです。
article > .entry-content {
padding: 1em 1em 0;
margin: 1em 0 auto;
}
あと。
テキストウィジェットに入れているコードを囲むのがpタグ：段落になってますので、それをdivで囲めば微妙に余白が狭くなりそうに思います。
わいひら reacted
2019年6月25日 20:06
テキストウィジェットに貼り付けているので、余計な段落や改行も追加されているようです。
「HTMLカスタム」ウィジェットに貼り付けると、もう少し良くなるのではないでしょうか。
トピックスターター 2019年6月25日 23:20
かうたっくさん
ご返信ありがとうございます。
＞圧縮されているので元の記載は分かりませんけど、ご自身でスタイルしたCSSに問題があるかと思われます。
＞さらに上書きする感じですが、以下を追記すればそれなりに余白は狭くなりそうです。
→ 昨日cocoonに乗り換えたばかりでCSSは全く触っていない状況です。また頂いたコードを子テーマに記載してみたのですが上手くいきませんでした。CSSファイルの中身をキャプチャした画像を添付しますので、お手数ですがご覧頂ければと思います。
わいひらさん
ご返信ありがとうございます。
＞「HTMLカスタム」ウィジェットに貼り付けると、もう少し良くなるのではないでしょうか。
HTMLカスタムウィジェットにしてみたのですが、余白部分は解消されませんでした。その時の設定をキャプチャしてみたので、お手数ですがご覧いただければと思います。
【追伸】ちなみにHTMLウィジェットにadsenceのコードをscriptタグが入ったまま張り付けた場合、「保存」ボタンを押しても設定が反映されないのですが、これは仕様でしょうか？
2019年6月25日 23:32
＞圧縮されているので元の記載は分かりませんけど、ご自身でスタイルしたCSSに問題があるかと思われます。
＞さらに上書きする感じですが、以下を追記すればそれなりに余白は狭くなりそうです。
→ 昨日cocoonに乗り換えたばかりでCSSは全く触っていない状況です。また頂いたコードを子テーマに記載してみたのですが上手くいきませんでした。CSSファイルの中身をキャプチャした画像を添付しますので、お手数ですがご覧頂ければと思います。
まだ圧縮されているようなので、原因もわかりませんし、CSSが本当にキチンと反映された状態なのかも、確認のしようがない状態です。
＞「HTMLカスタム」ウィジェットに貼り付けると、もう少し良くなるのではないでしょうか。
HTMLカスタムウィジェットにしてみたのですが、余白部分は解消されませんでした。その時の設定をキャプチャしてみたので、お手数ですがご覧いただければと思います。
これもHTMLウィジェットにすれば、少し（テキストウィジェットのpタグ分）だけでも反映されるはずですけどねぇ。
【追伸】ちなみにHTMLウィジェットにadsenceのコードをscriptタグが入ったまま張り付けた場合、「保存」ボタンを押しても設定が反映されないのですが、これは仕様でしょうか？
違うと思いますよ。
よくあるのが、サーバーのセキュリティの誤認が多いかと思われます。
ロリポップであれば、WAFを一時的に停止（反映するまで20分弱かかるかも）して保存するか、サイトガードでWAFの誤認の原因になったシグネチャを除外するか。
などが有効だと思われます。
2019年6月25日 23:36
HTMLカスタムウィジェットにしてみたのですが、余白部分は解消されませんでした。
僕は、「もう少し良くなる」と書いているので、かうたっくさん書かれたこととあわせれば、より狭くなるという意味で書きました。
なので、現在HTMLカスタムウィジェットを使用したことで、pタグとbrタグ分の改行がなくなったので、以前よりは確実に狭くなっていますよ。
本文下に余白が入るのは、本文と別部分を明確に分けるための、Cocoonの仕様です。
完全に余白を無くすには、以下のように子テーマのstyle.cssに記入する必要があるかと思います。
.entry-content {
margin-bottom: 0;
}
2019年6月25日 23:40
かうたっくさんと、書き込みがかぶった ?
【追伸】ちなみにHTMLウィジェットにadsenceのコードをscriptタグが入ったまま張り付けた場合、「保存」ボタンを押しても設定が反映されないのですが、これは仕様でしょうか？
ロリポップサーバーの仕様だと思いますよ。
サーバによっては、scriptのような悪意のあるコードはサーバーのファイアウォールによってはじかれる場合があります。
どうしてもそういった入力をする必要がある場合は、一旦WAFを無効にして入力する必要があるかもしれません。
https://lolipop.jp/manual/user/waf-set/
トピックスターター 2019年6月26日 23:07
わいひらさん かうたっくさん
お世話になっております。
ご回答ありがとうございました。
結論から申し上げますと意図した設定になりました（空白を消せました）
行った設定ですが、
１．わいひらさんにご教授頂いたコードを子テーマのstyle.cssに記入。
.entry-content {
margin-bottom: 0;
}
２．ただそれでも空白が消えなかったので、以下設定を実施。
Cocoon設定＞高速化＞「CSSを縮小化する」のチェックを外す。
これで空白はかなり狭くなりました。
「CSSを縮小化する」のチェックを入れると空白が広がるので、一旦はこれで様子を見ようと思います。
WAFの説明も有難うございました。諸々ご対応頂き感謝致します。
2019年6月27日 20:09
Cocoon設定＞高速化＞「CSSを縮小化する」のチェックを外す。
何かしら、CSSの記述に問題があるのかもしれません。
出来れば不具合状態を見て、原因を調べたくは思いますが、そのままでよければそれでも良いです。
トピックスターター 2019年6月27日 23:12
わいひらさん
お世話になっております。
＞何かしら、CSSの記述に問題があるのかもしれません。
＞出来れば不具合状態を見て、原因を調べたくは思いますが、そのままでよけれ＞ばそれでも良いです。
有難うございます。可能であれば調査頂けると有難いです。
現在は「CSSを縮小化する」のチェックを入れておりませんが、どのような設定にしておけば良いでしょうか？
2019年6月28日 05:47
@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Template: cocoon-master
Version: 1.0.8
*/
.entry-content{margin-bottom:0}
/*アニメーションの@keyframes用のCSSコードを書く（ここに書くとAMP用で約500KBまで記入できます）*/
Cocoonのものは停止されたようですが、プラグインで圧縮されてませんか？
圧縮されていればコードが1本になるので、ソースコードが見にくいので圧縮を切って待っていただけたらと思います。
わいひら reacted
トピックスターター 2019年6月28日 07:27
かうたっくさん
お世話になっております。
ご返信ありがとうございます。
それらしいプラグインをすべて切ってみました。
これでもまだ見にくいようであれば、プラグインすべてを停止してみますので仰ってください。
以上、よろしくお願いいたします。
2019年6月28日 19:34
「CSSを縮小化する」のチェックを入れると空白が広がるので、一旦はこれで様子を見ようと思います。
不具合が出るのは上記状態のようなので、プラグインを無効にしたまま「CSSを縮小化する」のチェックを入れて見せていただいてよろしいでしょうか。
一応、その際該当部分の不具合のキャプチャーも撮影してアップしていただけると助かります。
自分の環境と見比べができるので。
トピックスターター 2019年6月28日 21:49
わいひらさん
お世話になっております。
「CSSを縮小化する」のチェックをいれ、該当部分の画像をキャプチャしました。
不足部分や認識違いありましたらご連絡お願い致します。
よろしくお願いいたします。
2019年6月29日 20:34
子テーマに、カスタマイズCSSコードが書き込まれていて
https://piro02.com/wp-content/themes/cocoon-child-master/style.css
2019年6月29日 20:34
HTMLソースにも縮小化されたコードが出力されている。
2019年6月29日 20:35
にもかかわらず、開発ツールで見てみるとCSSが反映されていない。何故…。
以下の方法で環境情報もいただいてよろしいでしょうか。
https://wp-cocoon.com/theme-report/
2019年7月2日 19:12
でも確かに、あらためてソースコードを確認してみると、縮小化しているはずなのに余計なスペースがありますね。
これがBOMだったのか。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。