Cocoonフォーラム

書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

共有:
通知
すべてクリア

[解決済] google adsenceの関連コンテンツユニット設置時に出る空白を消したい

22 投稿
4 ユーザー
6 Likes
1,399 表示
 piro
(@piro)
Active Member
結合: 4年前
投稿: 12
Topic starter  

お世話になっております。

https://piro02.com/3003.html

上記ページの最後にgoogle adsenceの関連コンテンツユニットを配置しているのですが、空白が目立っており何とかしたいと考えております。※詳細は画像に記載致しましたので、お手数ですがご確認頂ければと思います。

関連コンテンツユニットは以下の手順で配置しております。

【関連コンテンツユニットの設置手順】

外観>ウィジェット>投稿本文下>「テキスト」で関連コンテンツユニットのコードを記載

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


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 5年前
投稿: 4764
 

圧縮されているので元の記載は分かりませんけど、ご自身でスタイルしたCSSに問題があるかと思われます。

さらに上書きする感じですが、以下を追記すればそれなりに余白は狭くなりそうです。

article > .entry-content {
	padding: 1em 1em 0;
	margin: 1em 0 auto;
}

あと。

テキストウィジェットに入れているコードを囲むのがpタグ:段落になってますので、それをdivで囲めば微妙に余白が狭くなりそうに思います。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14349
 

テキストウィジェットに貼り付けているので、余計な段落や改行も追加されているようです。
「HTMLカスタム」ウィジェットに貼り付けると、もう少し良くなるのではないでしょうか。


   
 piro
(@piro)
Active Member
結合: 4年前
投稿: 12
Topic starter  

かうたっくさん

ご返信ありがとうございます。

>圧縮されているので元の記載は分かりませんけど、ご自身でスタイルしたCSSに問題があるかと思われます。

>さらに上書きする感じですが、以下を追記すればそれなりに余白は狭くなりそうです。

→ 昨日cocoonに乗り換えたばかりでCSSは全く触っていない状況です。また頂いたコードを子テーマに記載してみたのですが上手くいきませんでした。CSSファイルの中身をキャプチャした画像を添付しますので、お手数ですがご覧頂ければと思います。

わいひらさん

ご返信ありがとうございます。

>「HTMLカスタム」ウィジェットに貼り付けると、もう少し良くなるのではないでしょうか。

HTMLカスタムウィジェットにしてみたのですが、余白部分は解消されませんでした。その時の設定をキャプチャしてみたので、お手数ですがご覧いただければと思います。

【追伸】ちなみにHTMLウィジェットにadsenceのコードをscriptタグが入ったまま張り付けた場合、「保存」ボタンを押しても設定が反映されないのですが、これは仕様でしょうか?


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 5年前
投稿: 4764
 

>圧縮されているので元の記載は分かりませんけど、ご自身でスタイルしたCSSに問題があるかと思われます。

>さらに上書きする感じですが、以下を追記すればそれなりに余白は狭くなりそうです。

→ 昨日cocoonに乗り換えたばかりでCSSは全く触っていない状況です。また頂いたコードを子テーマに記載してみたのですが上手くいきませんでした。CSSファイルの中身をキャプチャした画像を添付しますので、お手数ですがご覧頂ければと思います。

まだ圧縮されているようなので、原因もわかりませんし、CSSが本当にキチンと反映された状態なのかも、確認のしようがない状態です。

 

>「HTMLカスタム」ウィジェットに貼り付けると、もう少し良くなるのではないでしょうか。

HTMLカスタムウィジェットにしてみたのですが、余白部分は解消されませんでした。その時の設定をキャプチャしてみたので、お手数ですがご覧いただければと思います。

これもHTMLウィジェットにすれば、少し(テキストウィジェットのpタグ分)だけでも反映されるはずですけどねぇ。

 

【追伸】ちなみにHTMLウィジェットにadsenceのコードをscriptタグが入ったまま張り付けた場合、「保存」ボタンを押しても設定が反映されないのですが、これは仕様でしょうか?

違うと思いますよ。

よくあるのが、サーバーのセキュリティの誤認が多いかと思われます。

ロリポップであれば、WAFを一時的に停止(反映するまで20分弱かかるかも)して保存するか、サイトガードでWAFの誤認の原因になったシグネチャを除外するか。

などが有効だと思われます。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14349
 

HTMLカスタムウィジェットにしてみたのですが、余白部分は解消されませんでした。

僕は、「もう少し良くなる」と書いているので、かうたっくさん書かれたこととあわせれば、より狭くなるという意味で書きました。
なので、現在HTMLカスタムウィジェットを使用したことで、pタグとbrタグ分の改行がなくなったので、以前よりは確実に狭くなっていますよ。

本文下に余白が入るのは、本文と別部分を明確に分けるための、Cocoonの仕様です。

完全に余白を無くすには、以下のように子テーマのstyle.cssに記入する必要があるかと思います。

.entry-content {
margin-bottom: 0;
}

   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14349
 

かうたっくさんと、書き込みがかぶった ? 

【追伸】ちなみにHTMLウィジェットにadsenceのコードをscriptタグが入ったまま張り付けた場合、「保存」ボタンを押しても設定が反映されないのですが、これは仕様でしょうか?

ロリポップサーバーの仕様だと思いますよ。
サーバによっては、scriptのような悪意のあるコードはサーバーのファイアウォールによってはじかれる場合があります。
どうしてもそういった入力をする必要がある場合は、一旦WAFを無効にして入力する必要があるかもしれません。
https://lolipop.jp/manual/user/waf-set/


   
 piro
(@piro)
Active Member
結合: 4年前
投稿: 12
Topic starter  

わいひらさん かうたっくさん

お世話になっております。

ご回答ありがとうございました。

結論から申し上げますと意図した設定になりました(空白を消せました)

行った設定ですが、

1.わいひらさんにご教授頂いたコードを子テーマのstyle.cssに記入。

.entry-content {
margin-bottom: 0;
}

2.ただそれでも空白が消えなかったので、以下設定を実施。

Cocoon設定>高速化>「CSSを縮小化する」のチェックを外す。

これで空白はかなり狭くなりました。

「CSSを縮小化する」のチェックを入れると空白が広がるので、一旦はこれで様子を見ようと思います。

WAFの説明も有難うございました。諸々ご対応頂き感謝致します。

 

 

 


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14349
 

Cocoon設定>高速化>「CSSを縮小化する」のチェックを外す。

何かしら、CSSの記述に問題があるのかもしれません。
出来れば不具合状態を見て、原因を調べたくは思いますが、そのままでよければそれでも良いです。


   
 piro
(@piro)
Active Member
結合: 4年前
投稿: 12
Topic starter  

わいひらさん

お世話になっております。

>何かしら、CSSの記述に問題があるのかもしれません。
>出来れば不具合状態を見て、原因を調べたくは思いますが、そのままでよけれ>ばそれでも良いです。

有難うございます。可能であれば調査頂けると有難いです。

現在は「CSSを縮小化する」のチェックを入れておりませんが、どのような設定にしておけば良いでしょうか?


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 5年前
投稿: 4764
 

@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
 piro
(@piro)
Active Member
結合: 4年前
投稿: 12
Topic starter  

かうたっくさん

お世話になっております。

ご返信ありがとうございます。

それらしいプラグインをすべて切ってみました。

これでもまだ見にくいようであれば、プラグインすべてを停止してみますので仰ってください。

以上、よろしくお願いいたします。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14349
 

「CSSを縮小化する」のチェックを入れると空白が広がるので、一旦はこれで様子を見ようと思います。

不具合が出るのは上記状態のようなので、プラグインを無効にしたまま「CSSを縮小化する」のチェックを入れて見せていただいてよろしいでしょうか。

一応、その際該当部分の不具合のキャプチャーも撮影してアップしていただけると助かります。
自分の環境と見比べができるので。


   
 Piro
(@Piro)
Active Member
結合: 4年前
投稿: 12
Topic starter  

わいひらさん

お世話になっております。

「CSSを縮小化する」のチェックをいれ、該当部分の画像をキャプチャしました。

不足部分や認識違いありましたらご連絡お願い致します。

よろしくお願いいたします。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14349
 

子テーマに、カスタマイズCSSコードが書き込まれていて
https://piro02.com/wp-content/themes/cocoon-child-master/style.css


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14349
 

HTMLソースにも縮小化されたコードが出力されている。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14349
 

にもかかわらず、開発ツールで見てみるとCSSが反映されていない。何故…。
以下の方法で環境情報もいただいてよろしいでしょうか。
https://wp-cocoon.com/theme-report/


   
 Piro
(@Piro)
Active Member
結合: 4年前
投稿: 12
Topic starter  

わいひらさん

お世話になっております。

開発情報を添付致します。

よろしくお願いいたします。


   
草村
(@kusamura_mono)
Estimable Member Registered
結合: 4年前
投稿: 174
 

こんにちは。

子テーマのstyle.cssをWindowsのメモ帳で編集して保存したりしましたか?

縮小したコードの子テーマcssの先頭に変なスペースがあったので文字チェックしたらが入ってました。

BOMありで保存すると紛れ込むみたいです。

もしかしたら文字コードUTF-8 BOMなしで保存出来るエディタを利用して、保存し直すと改善するかもしれません。

This post was modified 4年前 by 草村

   
わいひら reacted
 Piro
(@Piro)
Active Member
結合: 4年前
投稿: 12
Topic starter  

草村さん

お世話になっております。

ご回答ありがとうございました。

terapadで「UTF-8 BOMなし」で保存しアップロードしたところ、CSS縮小化にチェックが付いた状態でも空白が消えてくれました。

ありがとうございました。

わいひらさんも調査本当にありがとうございました。

引き続きcocoon使い続けていきます。

よろしくお願いいたします。


   
草村 and わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14349
 

UTF-8 BOMで、そんな不具合が出るとは。
これは多分僕だったらわからなかったと思います。
草村さん、ありがとうございます!


   
草村 reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14349
 

でも確かに、あらためてソースコードを確認してみると、縮小化しているはずなのに余計なスペースがありますね。

これがBOMだったのか。


   
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました