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カスタマイズ依頼

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

サイドバーのコンテンツが少ないのに下ま...
 
共有:
通知
すべてクリア

サイドバーのコンテンツが少ないのに下まで伸びてしまう

24 投稿
5 ユーザー
8 Likes
2,770 表示
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
Topic starter  

いつもお世話になっております。

テーマを1.9.4にアップデートしたときに気づいたのですが、サイドバーがサイト下部まで伸びて表示されてしまいます。

https://leafytree.info/windows10-clean-install

でも、もしかすると、アップデート前からだったかもしれません。

デベロッパーツールで見てみるとサイドバーのタグに

style="height: auto !important;"

インラインでスタイルシートが付与されています。

特に最近ウィジェットの追加等は行っていなのですが・・

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

----------------------------------------------
サイト名:リフィトリーインフォ
サイトURL: https://leafytree.info
ホームURL: https://leafytree.info
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
Wordpressバージョン:5.2.2
PHPバージョン:7.2.17
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-US;q=0.7,en;q=0.3
----------------------------------------------
テーマ名:Cocoon
バージョン:1.9.4
カテゴリ数:5
タグ数:8
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.0.6
----------------------------------------------
Gutenberg:0
AMP:0
PWA:0
Auto Post Thumbnail:0
ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
JavaScript(フッター):1
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam 4.1.2
BackWPup 3.6.10
Broken Link Checker 1.11.8
Classic Editor 1.5
Contact Form 7 5.0.5
EWWW Image Optimizer 4.9.2
Google XML Sitemaps 4.1.0
No Right Click Images Plugin 3.4
PS Auto Sitemap 1.1.9
Regenerate Thumbnails 3.1.1
SiteGuard WP Plugin 1.4.3
Table of Contents Plus 1601
TinyMCE Advanced 5.2.1
WP Maintenance Mode 2.2.4
WP Multibyte Patch 2.8.2
----------------------------------------------


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

僕の環境からは伸びているように見えないのですが。
ちょっとテキストとソースコードだけでは、認識の齟齬が出てしまうかもしれません。
出来れば不具合状態のキャプチャーもいただければと思います。


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
Topic starter  

わいひらさん

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

キャプチャを添付します。


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

今アップデートしましたけど、Cocoon自体は問題ないみたいです。

ソースコードを見ても『サイドバースクロール追従 』にはウィジェットが入ってないので、そのようになるのが変ですね。

親テーマの再アップロードを試したり、プラグインを停止してみるとどうなりますか。おそらく前者が怪しそうかも?


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
Topic starter  

かうたっくさん

いつもお世話になっております。

テーマをFTPでアップデートし直してみたのですが、改善しませんでした。

かうたっくさんのサイトでも containar , content , content-in , sidebar の各 idに

style="height: auto !important;

が付与されていますが、付与の仕方が、私は、なんとなく応急的な感じを受けました。

ですので、わいひらさんの見解を待とうと思います。


   
返信引用
(@akira)
Noble Member Registered
結合: 5年前
投稿: 1224
 

その style 属性を入れてくる犯人は、おそらく Google AdSense です。Google AdSense の仕様が変わったので、その一環だと思います。

見た限り、Google AdSense をラップする要素に、全て style 属性が入ります。親要素から body タグ直下の要素まで、広告をラップする要素に全部。

なので、対策としては、こんな感じでしょうか。

①サイドバーに Google AdSense を配置しない。

②CSS で何とかする。例えば、こんな CSS。サイドバーの背景色を .sidebar で指定するのではなく、サイドバーに入っているウィジェットなどに指定すればいい。※見た目が少し変わるので微調整が必要。また、変更後の状態をきちんと確認していません。

@media screen and (min-width: 1023px) {
  .no-scrollable-sidebar .sidebar {
    background: transparent;
    padding: 0;
  }
  
  .sidebar .widget,
  .sidebar .ad-area {
    background: #fff;
    margin: 0;
    padding: 19px 29px;
  } 
}
This post was modified 3年前 2回 by Akira

   
わいひら reacted
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
Topic starter  

ええっ!!

それは、寝耳に水です。

全く、考えてもいませんんでした。

Akiraさん、有用な情報をありがとうございます。

ご案内の方法を参考に、ちょっと対策を考えます。

しかし、インラインに !important で入れてくるとは・・・


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

かうたっくさんのサイトでも containar , content , content-in , sidebar の各 idに

style="height: auto !important;

が付与されていますが、付与の仕方が、私は、なんとなく応急的な感じを受けました。

私のサイト、例えばトップ画面など https://bibabosi-rizumu.com/ では仕様だと思います。

サイドバースクロール追従にウィジェットを入れているので。


   
わいひら reacted
返信引用
かうたっく
(@kautakku)
Famed Member Moderator
結合: 5年前
投稿: 4764
 

今見たら別サイトで

アドセンスをサイドバートップを入れて、サイドバースクロール追従に何も入ってない状態ではそうなる。

サイドバーにアドセンスなし。サイドバースクロール追従なし。ならそうなっている模様。詳しく見てないぱっと見だけど。


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

CSSを入れると領域からはみ出すようです。

スクロール領域が入ってないとき、且つ。サイドバーに広告ウィジェットが入っているときのみスタイル属性をなくす??って事であればPHPで削除するとか?

もしくは個人単位でstyle属性をCSSで上書きするとか??

This post was modified 3年前 by かうたっく

   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
Topic starter  

かうたっくさん

この際、サイドバースクロール追従を利用してコンテンツを追加するというのも、有りかもです。

安直な手ではありますけど・・

せっかくAkiraさんにも解決方法をご案内いただいたのですが、すぐに考えがまとまりそうにないです。

なので、このトピックをどうするかは、わいひらさんにお任せということで良いでしょうか?

それにしても、サイト運営者の意図に関わらずスタイル属性が挿入されるこの仕様、んー、どうなんでしょう?・・ ? ? ? ? 


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

Cocoon自体は、基本的にclassにクラス名を指定して、CSSファイルで指定する形なので、基本的に以下のようなインラインスタイルは入れないように意図的にしています。

style="height: auto !important;"

このようになるのは、やはりスクリプトでスタイルを指定している可能性が高いかと思います。

それにしても、AdSenseがそんな仕様になっていたのは気づいてませんでした。
こればっかりは、AdSense側のスクリプトが!importantを用いてまでインラインに入れているものなので、テーマ側で対応するのは難しいかもしれません。


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

このサイトでも、サイドバーにAdSenseを入れているので確認してみましたが、確かにインラインスタイルが入っていますね…。
背景が白色だから気づきませんでした。

ただ、いずれにせよAdSenseの意図に反するのは怖いので、変更はないと思います。そのような表示にさせたいのは、AdSenseの強い意志だと思うので。

インラインかつ、!important指定に強い意志を感じます ? 


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

たしかに。チェックしたらCocoon関係ないですね^^

見栄えだけなら以下CSSで対応できそう。

.sidebar {
	background: transparent;
}
.sidebar aside {
	background: #fff;
	box-shadow: 0 0 0 30px #fff;
}

30pxは指定している内側余白。20pxや15pxなどご自身のサイトに合わせればOKかもです。


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
Topic starter  

かうたっくさん

CSSのご提案ありがとうございます。

サイドバーのboxを透明にして、中身のコンテンツの背景色を白にして、box-shadowで外側に白地を膨らませるんですね。

これにAkiraさんご案内の広告エリアを足せば、いけそうな感じもしますが、Cocoonのサイドバーの幅はレスポンシブになっているので、box-shadow(サイドバーの見た目の左右の余白)も可変にしないといけない。

親のboxの○○パーセントで指定しないと可変にならない。

案外、面倒な事に気づきました。

このトピックをご覧になる方のために、ヒントになるCSSを書いてみようかと思ったのですが、適当なものが、いまのところ思いつかないです。

むしろ、『サイドバースクロール追従 』のコンテンツ追加の方が無難のような気もしてきました。


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
Topic starter  

追伸:私の勘違いでした。

私のサイトは子テーマでサイドバーの余白を可変にしていたのを忘れていました。

可変じゃないですね。すみません。


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

どういうことだろ?

何か不具合がありましたか?どこがオカシイ。って事をハッキリ書いていただければ❦

自分のページで確認したら、私の所はサイドバーのpaddingが19pxだったんで、以下のように追記したら問題ないようです。

.sidebar {
	background: transparent;
	padding-top: 0;
}
.sidebar aside {
	background: #fff;
	box-shadow: 0 0 0 19px #fff;
}

でもサイドバーのpadding-top: 0;を入れたほうがキレイだったんで追記しておきます。

ココが変!って言ってくださいね。気を使ってると、状況がわからないので。


   
わいひら reacted
返信引用
かうたっく
(@kautakku)
Famed Member Moderator
結合: 5年前
投稿: 4764
 

広告エリアを足せば

広告エリアはaside内にあるんで、問題ない気もします。

自動広告はasideの記事一覧などのaタグに紛れ込むので、自動広告もクリアしてるのは自分の記事ページで確認できました。


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
Topic starter  

かうたっくさん

説明させていただきますと、

私のサイトでは、広告がサイドバーの最上部にあるため、aside 内にはなっていないようです。

また、私は自分のサイトの子テーマに以下のようなCSSを書いているのをうっかり忘れていた次第です。

@media screen and (max-width: 1240px){
.sidebar {
padding: 9px 2%;
width: 32.5%;
}
}

また、かうたっくさんのサイトでも、画面幅が1074pxより狭くなると、サイドバーの左右の padding は10pxになるようです。

なので、ご案内の案を採用する場合でも、もう少し修正が必要かなと思った次第です。

以上が説明です。

なお、トピックを立てた当初は、AdSense の仕様などとは思ってもいなかったのですが、Akiraさんの情報や、かうたっくさんのご案内などを受けて、サイドバーの見た目と今後のメンテナンス性のどちらを優先したら良いかを検討しているところです。

いまのところ、かうたっくさんのサイトのように、サイドバースクロール追従のコンテンツを設けた方が、スペースが有効に使えるのでベターなのかなと考えているところです。


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

また、かうたっくさんのサイトでも、画面幅が1074pxより狭くなると、サイドバーの左右の padding は10pxになるようです。

ですね。

タブレット・モバイルビューの幅で私がチェックしたのは、はみ出していなきゃOK!という感じでした。

 

どこをどうしたいかが、コチラ側にも伝わる説明があると助かります!

 

って事で、モバイルの余白を調整している。そしてサイドバートップの広告asideではなく、divの場合限定のCSS。且つ、スマホビューでもサイドバーをmain下に表示させる設定を行っている場合。

@media screen and (min-width: 1241px) {
	.sidebar {
		background: transparent;
	}
	.sidebar aside,
	.sidebar .ad-area {
		background: #fff;
		box-shadow: 0 0 0 30px #fff;
	}
	.sidebar .ad-area {
		margin-top: -9px;
	}
}

これでどこかが変。と思う箇所があれば、また詳細を書いてくださいね。

※.sidebar .ad-area { margin-top: -9px; } こちらはサイドバーのpaddingが39px。box-shadowの30pxがあるので39-30で9pxに。

 

あとスマホビューは、左サイドバーのように、右側が長いときなど関係ないので放置で大丈夫だと思われます。おそらく。

この辺りでしたら、誰でもチェックしてくれると思いますので!

https://leafytree.info/toyo-tires-nanoenergy3plus

This post was modified 3年前 by かうたっく

   
わいひら reacted
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
Topic starter  

かうたっくさん

この度は、ご自分のサイトでテストまでしてくださり、より工夫したCSSのご提案をいただき、ありがとうございます。

せっかく、お手間をかけていただいたのに、大変こころ苦しいのですが、前述のように子テーマでスタイルを変更(サイドバーの左右 padding を2%で指定)していることもあり、ご提案をそのまま導入するのは難しい状況です。

またサイドバーの padding は、そのまま(親のboxの padding のまま)の方が私にとっては扱いやすい構成です。

とりあえずは、サイドバーが下まで伸びたままのデザインのまま、かうたっくさんのサイトのように「サイドバースクロール追従」のコンテンツを追加することで対処したいと思います。


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

なんか、このAdSenseコードの不具合は、他の部分にも不具合としては影響が出ているみたいですね。
カスタマイズ画面プレビュー表示不具合について | 不具合報告 | Cocoon フォーラム


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

せっかく、お手間をかけていただいたのに、大変こころ苦しいのですが、前述のように子テーマでスタイルを変更(サイドバーの左右 padding を2%で指定)していることもあり、ご提案をそのまま導入するのは難しい状況です。

またサイドバーの padding は、そのまま(親のboxの padding のまま)の方が私にとっては扱いやすい構成です。

@media screen and (max-width: 1240px)

との事だったんで、@media screen and (min-width: 1241px)と指定しただけ。

好みは色々あるんで大丈夫ですよ。ってか、他の人が見てもできるように対応した感じでもあるので❦

***********

対応方法としても

  • 上記CSS以外
  • サイドバースクロール追従
  • サイドバーに広告を表示するのをやめてみる

など、情報が集まったんで、ユーザーさんの選択肢も増えて良かったと思います。

トピック&スレッドお疲れさまでした❦

**********************

なんか、このAdSenseコードの不具合は、他の部分にも不具合としては影響が出ているみたいですね。

これから設定する人にしては、カスタマイザーやCocoon設定のプレビュー画面での表示もきになりますもんね。

Gさんは色んな事をやってくれるようです ? ? ? 

 

This post was modified 3年前 2回 by かうたっく

   
わいひら reacted
返信引用
ろこ
(@lococo)
Prominent Member Registered
結合: 5年前
投稿: 830
 

インラインスタイルを挿入するアドセンスのコードを読んでみましたが、バグの可能性もありそうですね。

アドセンスを表示する範囲内で判定を行い、サイトのスタイルがアドセンス表示の妨げにならないように適宜インラインスタイルを挿入するつもりが、表示範囲の指定が抜けていることで、判定がブラウザ全体に及んでしまっている(表示範囲の外枠で止めるところが、外枠のさらに外枠...と発散してしまっている)
と読めなくもないです。


   
edit and わいひら reacted
返信引用
共有:

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

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

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

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

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

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

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

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