サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
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
----------------------------------------------
2019年8月29日 07:58
今アップデートしましたけど、Cocoon自体は問題ないみたいです。
ソースコードを見ても『サイドバースクロール追従 』にはウィジェットが入ってないので、そのようになるのが変ですね。
親テーマの再アップロードを試したり、プラグインを停止してみるとどうなりますか。おそらく前者が怪しそうかも?
Topic starter
2019年8月29日 10:36
かうたっくさん
いつもお世話になっております。
テーマをFTPでアップデートし直してみたのですが、改善しませんでした。
かうたっくさんのサイトでも containar , content , content-in , sidebar の各 idに
style="height: auto !important;
が付与されていますが、付与の仕方が、私は、なんとなく応急的な感じを受けました。
ですので、わいひらさんの見解を待とうと思います。
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 5年前 2回 by Akira
わいひら reacted
Topic starter
2019年8月29日 13:20
ええっ!!
それは、寝耳に水です。
全く、考えてもいませんんでした。
Akiraさん、有用な情報をありがとうございます。
ご案内の方法を参考に、ちょっと対策を考えます。
しかし、インラインに !important で入れてくるとは・・・
2019年8月29日 17:10
かうたっくさんのサイトでも containar , content , content-in , sidebar の各 idに
style="height: auto !important;
が付与されていますが、付与の仕方が、私は、なんとなく応急的な感じを受けました。
私のサイト、例えばトップ画面など https://bibabosi-rizumu.com/ では仕様だと思います。
サイドバースクロール追従にウィジェットを入れているので。
わいひら reacted
2019年8月29日 17:32
今見たら別サイトで
アドセンスをサイドバートップを入れて、サイドバースクロール追従に何も入ってない状態ではそうなる。
サイドバーにアドセンスなし。サイドバースクロール追従なし。ならそうなっている模様。詳しく見てないぱっと見だけど。
2019年8月29日 17:42
CSSを入れると領域からはみ出すようです。
スクロール領域が入ってないとき、且つ。サイドバーに広告ウィジェットが入っているときのみスタイル属性をなくす??って事であればPHPで削除するとか?
もしくは個人単位でstyle属性をCSSで上書きするとか??
This post was modified 5年前 by かうたっく
Topic starter
2019年8月29日 17:56
かうたっくさん
この際、サイドバースクロール追従を利用してコンテンツを追加するというのも、有りかもです。
安直な手ではありますけど・・
せっかくAkiraさんにも解決方法をご案内いただいたのですが、すぐに考えがまとまりそうにないです。
なので、このトピックをどうするかは、わいひらさんにお任せということで良いでしょうか?
それにしても、サイト運営者の意図に関わらずスタイル属性が挿入されるこの仕様、んー、どうなんでしょう?・・ ? ? ? ?
2019年8月29日 19:25
Cocoon自体は、基本的にclassにクラス名を指定して、CSSファイルで指定する形なので、基本的に以下のようなインラインスタイルは入れないように意図的にしています。
style="height: auto !important;"
このようになるのは、やはりスクリプトでスタイルを指定している可能性が高いかと思います。
それにしても、AdSenseがそんな仕様になっていたのは気づいてませんでした。
こればっかりは、AdSense側のスクリプトが!importantを用いてまでインラインに入れているものなので、テーマ側で対応するのは難しいかもしれません。
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かもです。
Topic starter
2019年8月29日 21:38
かうたっくさん
CSSのご提案ありがとうございます。
サイドバーのboxを透明にして、中身のコンテンツの背景色を白にして、box-shadowで外側に白地を膨らませるんですね。
これにAkiraさんご案内の広告エリアを足せば、いけそうな感じもしますが、Cocoonのサイドバーの幅はレスポンシブになっているので、box-shadow(サイドバーの見た目の左右の余白)も可変にしないといけない。
親のboxの○○パーセントで指定しないと可変にならない。
案外、面倒な事に気づきました。
このトピックをご覧になる方のために、ヒントになるCSSを書いてみようかと思ったのですが、適当なものが、いまのところ思いつかないです。
むしろ、『サイドバースクロール追従 』のコンテンツ追加の方が無難のような気もしてきました。
Topic starter
2019年8月29日 21:58
追伸:私の勘違いでした。
私のサイトは子テーマでサイドバーの余白を可変にしていたのを忘れていました。
可変じゃないですね。すみません。
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;を入れたほうがキレイだったんで追記しておきます。
ココが変!って言ってくださいね。気を使ってると、状況がわからないので。
わいひら reacted
2019年8月29日 22:57
広告エリアを足せば
広告エリアはaside内にあるんで、問題ない気もします。
自動広告はasideの記事一覧などのaタグに紛れ込むので、自動広告もクリアしてるのは自分の記事ページで確認できました。
Topic starter
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さんの情報や、かうたっくさんのご案内などを受けて、サイドバーの見た目と今後のメンテナンス性のどちらを優先したら良いかを検討しているところです。
いまのところ、かうたっくさんのサイトのように、サイドバースクロール追従のコンテンツを設けた方が、スペースが有効に使えるのでベターなのかなと考えているところです。
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に。
あとスマホビューは、左サイドバーのように、右側が長いときなど関係ないので放置で大丈夫だと思われます。おそらく。
この辺りでしたら、誰でもチェックしてくれると思いますので!
This post was modified 5年前 by かうたっく
わいひら reacted
Topic starter
2019年8月30日 10:33
かうたっくさん
この度は、ご自分のサイトでテストまでしてくださり、より工夫したCSSのご提案をいただき、ありがとうございます。
せっかく、お手間をかけていただいたのに、大変こころ苦しいのですが、前述のように子テーマでスタイルを変更(サイドバーの左右 padding を2%で指定)していることもあり、ご提案をそのまま導入するのは難しい状況です。
またサイドバーの padding は、そのまま(親のboxの padding のまま)の方が私にとっては扱いやすい構成です。
とりあえずは、サイドバーが下まで伸びたままのデザインのまま、かうたっくさんのサイトのように「サイドバースクロール追従」のコンテンツを追加することで対処したいと思います。
わいひら reacted
2019年8月30日 19:10
なんか、このAdSenseコードの不具合は、他の部分にも不具合としては影響が出ているみたいですね。
カスタマイズ画面プレビュー表示不具合について | 不具合報告 | Cocoon フォーラム
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 5年前 2回 by かうたっく
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。