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

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

スクロール追従が効かない
 
共有:
通知
すべてクリア

スクロール追従が効かない

25 投稿
6 ユーザー
23 Reactions
5,295 表示
(@haineons)
Trusted Member Registered
結合: 7年前
投稿: 73
トピックスターター  

スマホ画面で横にしてみたあと、縦に戻してみるとサイドバーが消える

上記修正用に追加されたセレクタとサイドバースクロール追従部分が干渉するらしく

追従部分が効かなくなっているみたいです

メインの方は使っていないので分かりませんが、もしかしたらこちらも効かないかもしれません

親要素にoverflow: hiddenを指定している場合、position: stickyを使うことができません。

という事みたいなので現在は削除して使っています…アドセンス広告がちゃんとリサイズされてくれれば問題無いんですけどねぇ


   
わいひら reacted
引用
トピックタグ
草村
(@kusamura_mono)
Reputable Member Registered
結合: 6年前
投稿: 174
 

広告の不具合が再現できなくてちゃんと試せていないのですが、広告を囲んでいる要素に指定する事で解決出来たらposition:sticky;が使えて便利なんですがどうなんでしょう。

.ad-area {
    overflow:hidden;
}

こういう感じとか…


   
Akira, ジャム君, わいひら and 1 people reacted
返信引用
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

あー…。ごめんなさい。追従ウィジェットエリアを忘れてました。

こうかな。

html {
  overflow-x: hidden;
}

body {
  overflow: visible;
}

   
ジャム君, 草村, わいひら and 1 people reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

ご報告ありがとうございます。
position: stickyにそんな仕様があるのはしませんでした。

とりあえず、草村さんの方法を試したら、僕の環境では画面の横→縦にしても正常動作しているようでした。
なのでダウンロードページのファイルを1.5.7.2にアップデートしておきました。


   
Akira, ジャム君, 草村 and 1 people reacted
返信引用
(@haineons)
Trusted Member Registered
結合: 7年前
投稿: 73
トピックスターター  

草村さん、Akiraさん、有難うございます

レスを見て自分でも確認していて少し遅くなりましたが、自分の所でも草村さんの方法で上手くいきました

Akiraさんの物だと追従は効くようになるんですが、自分の所ではバナーがカラムをオーバーするようになってしまいました

どちらかの影響だとは思うのですが、自分ではちょっと分かりませんでした

 

わいひらさん、修正&アップロード有難うございます


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

それでしたら、草村さんの方法でこのまま行こうと思います。
ご確認ありがとうございます。


   
返信引用
(@jamkun)
Estimable Member Registered
結合: 7年前
投稿: 158
 

どうやら修正があった影響なのか、Internet Explorer 11だとスクロール追従が無効になっているようです。

(IE 11より古いIEは、実際にテストできる環境がないため不明)

ChromeだとこのサイトでもMixHostの広告が追従してきますが、IEだと追従部分の内容表示はされているものの動きません。

IE利用のユーザーがどれだけ訪れるのか昨今では怪しい部分もありますが、もしかすると同様の現象が別のブラウザでも発生している可能性があるかもしれませんね。マイナーなブラウザだとは思いますが…

出先からの検証なもので以前のバージョンやら比較し詳細を調べるのは難しいのですが、IEはCSSを別途記述いただくか、AdSenseの関係上追従しないものとして、いったん推奨ブラウザから除外が必要かもしれないです。


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

IE11は、以前は動作していましたでしょうか?
IE11はstickyが使えないので、基本的に動作はしません。
ただ、対応のJavaScriptで動作させていたと思うのですが、うまく動作していないのかも(lib/utils.phpのwp_enqueue_stickyfill関数部分)。
ただ、この際IE11は無視して良いのかなと思ったり。
でもまだまだ、日本の場合はそれなりにユーザーはいそうですね。


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

今、僕の環境のIE11で試してみたのですが、問題なく動作しているようです。
何でだろう。
とりあえず、IEのバージョンは、添付画像です。


   
返信引用
(@jamkun)
Estimable Member Registered
結合: 7年前
投稿: 158
 

確認くださりありがとございます。なぜこちらのIEでは動かないのか…ネットカフェのPC(Windows 10)で正常に更新がなされていないのかもしれません。

バージョンは以下のものでした。

https://gyazo.com/0d3959fe9ccaa551bc701a69209c598a

以前自宅のIE 11(Windows 7)で確認していた時には動作していたかと思うのですが、現状どうなっているのか、帰宅しましたら報告いたします。


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

あら、僕の環境のIE11が古いのかと思いきや、「更新バージョン」は僕のバージョンの方が高い…。
ここら辺わよくわからないですね…(僕の環境はWindows8.1)。

とりあえず、こちらのページを最下部までスクロールした限りでは、IEでも一番下までついてくるようです。
https://wp-cocoon.com/bugs-and-wants/


   
返信引用
(@jamkun)
Estimable Member Registered
結合: 7年前
投稿: 158
 

自宅(Windows 7)のIE 11のバージョンは以下のものでした。

https://gyazo.com/add583ed2b4c99692d0e389b779bfacb

提示いただいたページでは、スクロール追従がネットカフェのPCでも自宅のPCでも、IEでは機能しませんでした。まさに謎です…

ただ自サイトにて確認したところ、Cocoon 1.5.7.5でも正常に動作するパターンと動作しないパターンがあるようで、

  • WP Fastest Cache

のキャッシュが関係しているのかもしれません。

IEで新規にキャッシュを生成させた場合には追従しましたが、Chrome/Firefox/Cronでの自動生成など「IE以外でキャッシュが生成された」場合、追従なされないようです。

本当にプラグインが原因とすれば、サポート対象外のケースとなるとおりですので自己責任の範囲内なのですが、ほぼ同時刻に同ページでも検証し、わいひらさんの環境では動作し、当方環境では動作しない、というのは何が原因なのか、謎が深まるばかりです。


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

当サイトも現在「WP Fastest Cache」を使っています。
でも今のところ問題はないようです。
プラグインのオプションの設定具合とかなんですかね。
でもそれだったら、症状が出たり出なかったりはおかしいですし…。謎ですね。

デベロッパーツールのコンソールに何かエラーは出ていますか?


   
返信引用
(@jamkun)
Estimable Member Registered
結合: 7年前
投稿: 158
 

そうですよね、ここでも「WP Fastest Cache」を同じく使っていらっしゃるため、問題があるときとないときが謎です。ちなみにですが、昨日ご提示いただいていたページで試したところ、IEでも正常動作を確認しました。

当方で問題確認している、あえてChromeを最初のアクセスにしてキャッシュを再生成させたページで確認したところ、やはりIEではスクロール追従せず、Chrome/IEそれぞれ添付画像のメッセージでした。

確認したページ

https://cocoon.oyashirosama.xyz/jamkun/cocoon/503

これと言って目立ったエラーはないように見受けられました。

当方環境でも高速化のチェック有無は無関係のようでしたので、まっさらな新規テスト環境(+WP Fastest Cacheあり環境)も作成し、もう少し原因を探ってみます。


   
返信引用
(@jamkun)
Estimable Member Registered
結合: 7年前
投稿: 158
 

まっさらな環境で検証してみました。スクロール追従に置いてみたのは、「[c] 新着記事」に「チェック・入力したページで表示>投稿とAMPにチェック」したもの。

https://gyazo.com/5f9b616e5e4145ab07f89aa5b6c22d22

(AMPが隠れていますがこの状態)

 

IEでも動作する(Cocoon 1.5.7.5 + 子テーマ 1.0.6のみ)

https://cocoontest1.oyashirosama.xyz/2019/02/01/%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E8%BF%BD%E5%BE%93%E3%83%86%E3%82%B9%E3%83%88/

IEだと動作しない(上記ページにWP Fastest Cache加えたもの)

https://cocoontest2.oyashirosama.xyz/2019/02/01/%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E8%BF%BD%E5%BE%93%E3%83%86%E3%82%B9%E3%83%88/

----------------------------------------------
サイト名:Cocoonテスト2
サイトURL: https://cocoontest2.oyashirosama.xyz
ホームURL: https://cocoontest2.oyashirosama.xyz
コンテンツ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.0.3
PHPバージョン:7.2.6
ブラウザ:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.81 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7
----------------------------------------------
テーマ名:Cocoon
バージョン:1.5.7.5
カテゴリ数:1
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.0.6
----------------------------------------------
Gutenberg:1
ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
WP Fastest Cache 0.8.9.0
----------------------------------------------

エックスサーバーを利用していますが、「Xアクセラレータ」「mod_pagespeed」「ブラウザキャッシュ」のサーバー側設定はオフにしてあります。

ドメインの階層が深くなる「サブドメインなのが原因」かとも思ったのですが、本番環境では独自ドメインそのまま利用して問題が発生しているため、「プラグインの問題」としてキャッシュ生成時に、やはり何か問題があるのかもしれませんね。


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

確かに、上記テストページは、僕のIE11でも動作しないようです。
原因までは今のところ分からないですが。

オプションはどうしてます?
僕の環境では、添付画像のような感じです。


   
返信引用
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

ジャム君さん

https://www.wpfastestcache.com/features/preload-settings/

あとプリロードの設定もどんなのかな?って思います。

※私のテスト環境用サブドメインはキチンと停止するので。

 

※ちなみに私のIE11ではCocoonも停止しません。さらに再読み込み後デバッガ―を見ると(スライドインのさいご)『初めての方はサイトの始め方参照。』のあとに</a>と変な終了タグが付いて、個人的に謎が謎を呼んでます。


   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

</a>と変な終了タグが付いて、個人的に謎が謎を呼んでます。

ウィジェットのソースコードを見ても、該当するa終了タグは入っていないようなんだけど、何でだろう…。


   
返信引用
(@jamkun)
Estimable Member Registered
結合: 7年前
投稿: 158
 

お二方、ありがとうございます。テスト環境の「WP Fastest Cache」本体の設定と「Preload」の設定は、添付画像のとおりです。

本番環境では「Preload」のチェックに「タグ」や「カテゴリ」が含まれるなど、少し違いがある部分もありますが、「Reset After Completed」にはあえてチェックを入れず運用しております。

(多少負荷が上がるのは承知ですが、ランダムに広告を入れ替えつつキャッシュも維持したいため)


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

テスト環境サブドメインで、添付画像通りに設定してみました。

するとスクロール追従領域は華麗にスルー、追従しませんねぇ ? 

この通りで特に問題なかったです。※『ファイル』パーマリンクは503ではないですが。

 

ただ追従する時としないときがあるんですよね。

例えばCocoonトップページ。

  • 一昨日は追従OK
  • 昨日は追従NG
  • 今朝は追従OK!みたいな。

</a>と変な終了タグが付いて、個人的に謎が謎を呼んでます。

ウィジェットのソースコードを見ても、該当するa終了タグは入っていないようなんだけど、何でだろう…。

https://wp-cocoon.com/bugs-and-wants/

このページのIE、DOMでも表示されてないのに、デバッガ―では…ですね。

挙動が不安定過ぎてよく分かりません ?  ?  ? 


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

テスト環境サブドメインで、添付画像通りに設定してみました。

するとスクロール追従領域は華麗にスルー、追従しませんねぇ ? 

スクロール追従領域に設定するのを忘れてました!※そりゃ華麗にスルーして当然 ? 

 

って事で、サイドスクロール追従に入れると問題なく『追従OK!状態』でした。※エックスサーバー高速化のアクセラレータ・キャッシュはONのまま。

どっちにしても不安定な気もします。


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

テスト環境サブドメインで、添付画像通りに設定してみました。

するとスクロール追従領域は華麗にスルー、追従しませんねぇ ? 

スクロール追従領域に設定するのを忘れてました!※そりゃ華麗にスルーして当然 ? 

 

って事で、サイドスクロール追従に入れると問題なく『追従OK!状態』でした。※エックスサーバー高速化のアクセラレータ・キャッシュはONのまま。

どっちにしても不安定な気もします。


   
返信引用
(@jamkun)
Estimable Member Registered
結合: 7年前
投稿: 158
 

検証くださりありがとうございます。

ただ追従する時としないときがあるんですよね。

例えばCocoonトップページ。

  • 一昨日は追従OK
  • 昨日は追従NG
  • 今朝は追従OK!みたいな。

確かに日によって状況が変わっていることもあります。先日私が検証したような、

あえてChromeを最初のアクセスにしてキャッシュを再生成させたページで確認したところ、やはりIEではスクロール追従せず、Chrome/IEそれぞれ添付画像のメッセージでした。

このような形式で、「WP Fastest Cache」のキャッシュがパージ→「初回アクセスのブラウザによって動作が変わる」ことも確認できはしたのですが、ほぼ同時間帯にわいひらさんと同じページを見て挙動が違ったことから、不安定感は否めません。

Cocoonテーマ側というより、「プラグイン」やサーバー機能の「キャッシュ類」の影響が大きそうな部分でもあるので、「サポート対象外」分野になりそうですかね。

IEでスクロール追従してくれない件に関しては、ほかのテーマでも情報を集めつつ、プラグイン作者さんに改善要望を出したほうがいいかもしれないですね。


   
返信引用
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

サブドメインテスト環境でプラグインを導入したうえ、再度いまIEで試したんですが。やっぱり追従します。ただキャッシュが保存されてないようです。FTPソフトでcacheディレクトリ以下を確認した結果です。

とりあえず情報的にどうか不明ですが、一応。

複数テスト環境構築+テスト、お疲れ様でした❦


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

うーん、不具合がプラグイン特有のもので具合再現も不安定となると、ちょっとお手上げかもしれません。

サイドバー追従に関しては、最初からJavaScriptで動作させれば、そういったことも起こらないのかもしれません。
ただ、IEを省いてでも、position: stickyの追従動作が一番美しいんですよね…。画面もチラつかないし、AMPでも使えるし。
IEは、今後確実に減少傾向にはあると思うので、様子を見つつ、上手い対応方法があれば対応出来ればと思います。


   
ジャム君 reacted
返信引用
共有:

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

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

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

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

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

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

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

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