「メイド・イン・ヘブン」スキン適用中

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

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

しばらくアクセスしないとサイトページの...
 
共有:
通知
すべてクリア

[解決済] しばらくアクセスしないとサイトページの表示が崩れるものの、更新すると復旧する事象について

71 投稿
8 ユーザー
49 Likes
5,062 表示
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16475
 

CSSの圧縮化を有効にしている場合は、閉じ括弧が無いのでそのまま下に通常のCocoonのStyleが記述されてしまい、表示が崩れるのかなと。

詳細な分析ありがとうございます!
確かに、括弧の閉じ忘れがあると縮小化で不具合が出る可能性はかなり高いと思います。

現状、Jetpackの以下の部分を直接編集して、括弧を付け足して、アップデートを待つというのが最適かもしれないですね。
https://github.com/Automattic/jetpack/blob/d6211b1e30d5905e61608d61f12fa34757fc3293/modules/scan/class-admin-bar-notice.php#L117

ただ、僕の環境では不具合は出ていないようなので、Akiraさんが書かれているように、なにか機能に依存したコードでその機能を無効にすると、改善する可能性もありますね。


   
 kyan
(@kyan)
New Member
結合: 4年前
投稿: 4
 

@yhiraさま

投稿者:: @yhira

①一度テーマを「何も手を加えていない親テーマ」に変更して、症状が再現されるかを確認してみてください。

②出来ればその状態で、全てのプラグインを無効にした状態でも試してみていただければと思います。

結論からいいますと、こちらの検証は時間がかかりそうです。

テーマは元々Simplicity2を愛用しておりましたが、Cocoonへ移行の際、親テーマ側に設定情報を移行してしまい、そのまま親テーマで運用しておりました。

今回検証にあたって ①親テーマの設定情報をバックアップ ②子テーマをインストール ③親テーマの設定情報をリセット、の順番で行いましたが、③で設定がリセットされませんでした。設定をリセットできなければ、わいひら様の仰せになる「何も手を加えていない親テーマ」に変更したことにならないと思い、苦慮しております。

ちなみに③でやったことは、

1)Cocoon設定>リセット、で「全ての設定をリセットする」と「リセット動作の確認」の両方にチェックをいれて「変更をまとめて保存」ボタンを押しました

 ⇒設定情報(たとえば背景色やスキン選択、Adsenseのコード等)が残っておりました。

2)設定が残ったままなので、一度別のテーマ(その時は「Twenty twenty」)に変更後、親テーマをWP上で削除し、わいひら様のサイトよりテーマをDLして再インストール。インストールしたばかりの親テーマに設定

 ⇒同様に設定情報が残っております。

このように、当方ではわいひら様のご要望にはすぐには応えられない状態です。
どなたか同じ症状が出ている他の方でお試しいただける方がいらっしゃいましたらありがたいです。

力不足で申し訳ございません。

投稿者:: @yhira

ちなみに、みなさんのサーバーはどこを利用されているのでしょうか。
そこら辺の共通点も探る必要があるかもしれません。

お返事が遅くなりましたが、当方はmixhostを使用しております。
(わいひら様の紹介記事に感銘を受けて契約させていただきました)

キャッシュ等は、これまでLitespeed cacheプラグインを使用していた以外は設定していません。
(サーバ側の初期設定で何か設定しているということもあるかもしれませんが、当方では変更しておりません)

なお、当方でもJetPackをインストールしておりますので、後述のJetPack側の問題かもしれません。

 

   
わいひら reacted
(@ねっす~)
Active Member
結合: 4年前
投稿: 8
 

@akira さん
@yhira さん

Jetpackの設定を見直しても、scanは有料オプションみたいで、無料プランではOn/Offもなさそうです。
何か状況が発生するきっかけが見つかればいいのですが、難しそうですね。
マルチサイト、VaultPress利用者はコード上でfalseになって抜けているので、scanは動かないようですけど・・・。

CSSの縮小化はしたいので、Jetpackの該当箇所に閉じ括弧をつけてアップロードして対応することにしました。(アップデートで治ることを祈りながら)


   
わいひら reacted
さる子
(@saruko)
Reputable Member Moderator
結合: 4年前
投稿: 482
 

投稿者:: @akira

ちなみに、threat notifications(脅威通知のスキャン機能?)を管理者バーに表示するための CSS みたいです(下記リンクの最初の画像の赤い警告マークと Threats Found の部分)。

Add Jetpack Scan threat notifications

この Jetpack の CSS はインラインで書き込んでいるため、Cocoon 設定から除外できません。該当箇所を直接修正するか、スキャン機能?を無効にすれば直るかもしれません。

Jetpack→設定→セキュリティ内の「バックアップとセキュリティスキャン」辺りが近そうな雰囲気…?

バックアップとセキュリティスキャン」機能がオフになっているWordPressで、Jetpackを最新にしてCSSの縮小化をしましたが、特に表示はおかしくなっていません。

 

(追記)

ねっす〜さんと被った…。

バックアップとセキュリティスキャン」をオフにしてても起きるんですね…。


   
わいひら reacted
ヒロアキ
(@y-hiroaki)
Reputable Member Registered
結合: 6年前
投稿: 221
 

僕が持っているブログで、さっきJetPackを最新にしてみたら、一発でCSSなしのページが表示されました。

今回の問題はこれですよね?

やったことは、JetPackを8.6.1に更新しただけです。

ちなみに、「CSSを縮小化」はONです。

Cocoonのバージョンは2.1.4.1で、Chromeで再現しました。

 

あれから、10分ぐらい時間をあけてページを表示させても、問題は発生していません。

1時間ぐらい放置すればまたCSSなしのページになるんでしょうか?


   
(@changbeer)
Reputable Member Moderator
結合: 6年前
投稿: 252
 

当ブログでもときおりCSS未適用の表示がされることがあります。

おそらく1週間くらいの間と記憶、プラグインとかの追加はしばらくしてませんね。画面をリフレッシュすると元になります。

切り分け材料は多くの方が出しているので、ひとまず影響サイトの一つとしてご報告します。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16475
 
投稿者:: @kyan

お返事が遅くなりましたが、当方はmixhostを使用しております。

ということは、サーバーが原因ということはなさそうですね。
ありがとうございます!

投稿者:: @ねっす~

マルチサイト、VaultPress利用者はコード上でfalseになって抜けているので、scanは動かないようですけど・・・。

当サイトは、確かに使ってます。
なるほど。だからなのか。


   
(@changbeer)
Reputable Member Moderator
結合: 6年前
投稿: 252
 

あ、今うちで再現しましたね。

ブラウザはChrome。PCで1,000pxくらいの幅で崩れました。スマホ幅(400px)くらいにすると普通です。

画面リフレッシュしないようにしていますが、デベロッパーツールでみるべきところとかありますかね?

リフレッシュかけると多分直っちゃうかと。

うちはMixhostです。サブブログはカラフルボックスですが、そちらでも1, 2回見かけました。

とりあえず画面リフレッシュかけずに放置しておきます。

 


   
(@changbeer)
Reputable Member Moderator
結合: 6年前
投稿: 252
 
投稿者:: @changbeer

ブラウザはChrome。PCで1,000pxくらいの幅で崩れました。スマホ幅(400px)くらいにすると普通です。

上記を表すGIF画像(困惑させる材料になってしまったらすみません)


   
(@ねっす~)
Active Member
結合: 4年前
投稿: 8
 
投稿者:: @changbeer

画面リフレッシュしないようにしていますが、デベロッパーツールでみるべきところとかありますかね?

<style>タグの中に

@media screen and (max-width: 959px) {

があれば、昨日自分がコメントしているJetpackのコードに閉じ括弧が無いのが原因です。
Jetpackのこの機能がどういうタイミングで動くのかがわからないので、対応できるとすれば

  • 気にしない(症状が出た時は更新する)
  • CocoonのCSSの縮小化機能を停止する(Jetpackが修正されるのを待つ)
  • Jetpackを過去のバージョン(8.6以前)に戻す(難易度高い)
  • Jetpackのコードを一時的に直接修正しておく

くらいしかないと思います。

もしコードを修正する場合、対象は

/wp-content/plugins/jetpack/modules/scan/class-admin-bar-notice.php 117行目

$hide_wording_on_mobile = '#wp-admin-bar-jetpack-scan-notice .is-hidden { display:none; } @media screen and (max-width: 959px ) { #wpadminbar #wp-admin-bar-jetpack-scan-notice { width:32px; } #wpadminbar #wp-admin-bar-jetpack-scan-notice a { color: transparent!important; } }';

です。(閉じ括弧の追加)

 


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

@ねっす~くん

仕事が早い


   
ヒロアキ
(@y-hiroaki)
Reputable Member Registered
結合: 6年前
投稿: 221
 
投稿者:: @ねっす~

<style>タグの中に

@media screen and (max-width: 959px) {

があれば、昨日自分がコメントしているJetpackのコードに閉じ括弧が無いのが原因です。

さっき、CSSなしのページになったのでソースを確認したら、このコードがありました。

念の為、報告します。


   
(@changbeer)
Reputable Member Moderator
結合: 6年前
投稿: 252
 
投稿者:: @ねっす~

もしコードを修正する場合、対象は

ありがとうございます。

当初は、20〜30アクセスに一度くらいかな...と思っていましたが、タイミングによっては連発...

ひとまず週末の時間あるときにご紹介の方法もやってみようかな...

JETPACK!!!... 


   
 kyan
(@kyan)
New Member
結合: 4年前
投稿: 4
 

こんにちは。

ねっす~さんの書き込みを参考に、Jetpackを8.6.1から8.5へロールバックしたところ、Cocoon(2.1.8)のCSS圧縮オプションをオンにしてもCSS表示崩れは起きなくなりました。
(2日ほど不定期にF5で更新して試しました)

以上、ご報告でした。

こちらのフォーラムがなければいつまでも原因がわからず途方に暮れていたと思います。
皆様ありがとうございました。


   
(@大竹)
Eminent Member
結合: 5年前
投稿: 48
Topic starter  

皆様の書き込みを見てJetpackを停止して様子を見てみましたところ、表示崩れが無くなりました!

最初にすべてのプラグインを停止して検証した時には事象は解決しなかったのになぜだろうと考えてみたところ・・・かなり情けない話ですが、Jetpackをセキュリティで使っていたため夜に停止しようと後回しにしていたのですが、そのまま忘れて全て検証した気になっていたように思います・・・。

そして、事象が起こる前後で環境を変えていないと思い込んでいましたが、今から思い返すと無意識にJetpackのプラグインを更新したような気もします・・・。色々と記憶が曖昧で我ながら情けないです。

色々と意識が足りず、正確な情報を報告できずに申し訳ありませんでした、反省致しました。同じような事象の方々や有識者の皆様が分析してくださり、とても助かりました、本当にありがとうございました。

とりあえず自分のPCだけに生じる事象のようなので、そのまま放置してJetpackが更新されるのを待ちたいと思います。今後とも宜しくお願い致します。


   
(@lukehide)
Active Member
結合: 4年前
投稿: 9
 

みなさま、アドバイスありがとうございます。

昨日、Jetpackを8.5にRollbackしました。

  https://www.escape2bangkok.com/

◆Chrome/Safari@Mac

 1日様子を見ましたが、現象は再現しませんでした。

◆Safari/Chrome@iPad

 1日様子を見ました。
 当初のテキストが表示されることはなくなりましたが、レイアウトのズレは再読み込みしても変化なしです。

レイアウトの確認はPCで可能ですので、iPadでのレイアウトのズレは我慢し、Jetpackのアップデートを待ちたいと思います。

色々と有難うございました。

 


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

最近のJetpackのアップデートが原因ということで確定っぽいですね。
あとは、次のバージョンで修正されるかですね。


   
(@ねっす~)
Active Member
結合: 4年前
投稿: 8
 

@yhira さん

Githubを確認したら、少し前に修正が入っていました。
次?の更新あたりで修正されそうです。

https://github.com/Automattic/jetpack/pull/16155/files


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

やっぱ不具合だったんですね^^;
今後改善されるようによかったです。

ご連絡ありがとうございます!


   
(@ねっす~)
Active Member
結合: 4年前
投稿: 8
 

Jetpackの更新がありました。

例の箇所も修正されていましたよ。


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

ご連絡ありがとうございます!
そしたら、トピックを解決として閉じてもよさそうですね。


   
固定ページ 2 / 2
共有:

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

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

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

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

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

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

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

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