現在デフォルトスキンとして「Season (Autumn)」を適用中。

サイドバーのコンテンツが少ないのに下まで伸びてしまう | Cocoonテーマに関する質問 | Cocoon フォーラム

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

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

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

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

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

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

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
サイドバーのコンテンツが少ないのに下ま...
 
Share:

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

  RSS

leafytree
(@leafytree)
Trusted Member
参加: 7か月 前
投稿: 72
2019年8月28日 18:18  

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

テーマを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)
メンバーサイト Admin
参加: 2年 前
投稿: 6374
2019年8月28日 19:12  

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


返信引用
leafytree
(@leafytree)
Trusted Member
参加: 7か月 前
投稿: 72
2019年8月28日 20:25  

わいひらさん

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

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


返信引用
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 3345
2019年8月29日 07:58  

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

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

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


返信引用
leafytree
(@leafytree)
Trusted Member
参加: 7か月 前
投稿: 72
2019年8月29日 10:36  

かうたっくさん

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

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

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

style="height: auto !important;

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

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


返信引用
Akira
(@akira)
Reputable Memberサイト
参加: 1年 前
投稿: 360
2019年8月29日 13:01  

その 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 2週間 前 2 times by Akira

わいひら 件のいいね!
返信引用
leafytree
(@leafytree)
Trusted Member
参加: 7か月 前
投稿: 72
2019年8月29日 13:20  

ええっ!!

それは、寝耳に水です。

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

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

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

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

This post was modified 2週間 前 by leafytree

返信引用
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 3345
2019年8月29日 17:10  

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

style="height: auto !important;

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

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

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


わいひら 件のいいね!
返信引用
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 3345
2019年8月29日 17:32  

今見たら別サイトで

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

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


返信引用
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 3345
2019年8月29日 17:42  

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

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

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

This post was modified 2週間 前 by かうたっく

返信引用
leafytree
(@leafytree)
Trusted Member
参加: 7か月 前
投稿: 72
2019年8月29日 17:56  

かうたっくさん

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

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

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

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

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

This post was modified 2週間 前 by leafytree

返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6374
2019年8月29日 19:25  

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

style="height: auto !important;"

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

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


返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6374
2019年8月29日 19:27  

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

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

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

This post was modified 2週間 前 by わいひら

返信引用
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 3345
2019年8月29日 20:14  

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

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

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

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


返信引用
leafytree
(@leafytree)
Trusted Member
参加: 7か月 前
投稿: 72
2019年8月29日 21:38  

かうたっくさん

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

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

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

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

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

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

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

This post was modified 2週間 前 by leafytree

返信引用
leafytree
(@leafytree)
Trusted Member
参加: 7か月 前
投稿: 72
2019年8月29日 21:58  

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

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

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

This post was modified 2週間 前 by leafytree

返信引用
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 3345
2019年8月29日 22:54  

どういうことだろ?

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

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

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

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

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


わいひら 件のいいね!
返信引用
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 3345
2019年8月29日 22:57  

広告エリアを足せば

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

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


返信引用
leafytree
(@leafytree)
Trusted Member
参加: 7か月 前
投稿: 72
2019年8月29日 23:37  

かうたっくさん

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

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

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

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

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

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

以上が説明です。

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

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

This post was modified 2週間 前 by leafytree

返信引用
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 3345
2019年8月30日 01:42  

また、かうたっくさんのサイトでも、画面幅が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 2週間 前 by かうたっく

わいひら 件のいいね!
返信引用
leafytree
(@leafytree)
Trusted Member
参加: 7か月 前
投稿: 72
2019年8月30日 10:33  

かうたっくさん

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

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

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

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


わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6374
2019年8月30日 19:10  

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


返信引用
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 3345
2019年8月31日 07:49  

せっかく、お手間をかけていただいたのに、大変こころ苦しいのですが、前述のように子テーマでスタイルを変更(サイドバーの左右 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 2週間 前 2 times by かうたっく

わいひら 件のいいね!
返信引用
ロコ
(@lococo)
Reputable Member
参加: 1年 前
投稿: 367
2019年8月31日 13:39  

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

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


わいひら 件のいいね!
返信引用

返信する


許可された最大ファイルサイズ 3MB

 
Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバ

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
サービス運営期間:1年1ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2019/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:16年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:11ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon
  
動作中

ログイン または 登録 してください

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