何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
こんにちは。約2年ほどCocoonを使わせて頂いているものです。
対象のページのURL: https://daiki-zinsei.com
相談内容:
PC上でのページ上に戻るボタンの位置がおかしいです。
デフォルト通り、右下に表示させたいのですが、解決方法が全く分からないので相談させて
頂きました。
デベロッパーツールで見てみると、「position:fixed」と「right:10px」という部分がうまく機能していないみたいです。
お手数おかけしますが、どうぞよろしくお願いします。
----------------------------------------------
サイト名:DAIKI LIFE
サイトURL: https://daiki-zinsei.com
ホームURL: https://daiki-zinsei.com
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
スキン:/wp-content/themes/cocoon-master/skins/skin-fuwari-mirucha/style.css
WordPressバージョン:5.7.2
PHPバージョン:7.4.16
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36
サーバーソフト:LiteSpeed
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.2.9
カテゴリ数:22
タグ数:27
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.0.8
style.cssサイズ:985バイト
functions.phpサイズ:3375バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:1
ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:1
CSS縮小化:1
JavaScript縮小化:1
Lazy Load:1
WEBフォントLazy Load:1
----------------------------------------------
利用中のプラグイン:
Advanced Editor Tools (previously TinyMCE Advanced) 5.6.0
Akismet Anti-Spam 4.1.9
Async JavaScript 2.20.12.09
Autoptimize 2.8.4
Broken Link Checker 1.11.15
Classic Editor 1.6
Compress JPEG & PNG images 3.2.1
Contact Form 7 5.4.1
Edit Author Slug 1.8.1
Google XML Sitemaps 4.1.1
Jetpack by WordPress.com 9.7
Limit Login Attempts Reloaded 2.22.1
MediaElement.js - HTML5 Audio and Video 4.2.8
Public Post Preview 2.9.3
Really Simple SSL 4.0.15
Regenerate Thumbnails 3.1.5
SiteGuard WP Plugin 1.6.0
WP Multibyte Patch 2.9
WP SVG Icons 3.2.3
----------------------------------------------
DAIKIさん
高速化が有効になっており、良く分からないです。
別に「right:10px」がきいていない訳ではないと思います。
おそらく独自のカスタマイズ?か何かで、重ねて「right:10px」を書いていて、そちらが有効になっているだけです。
「position:fixed」もきいているみたいです。
これはむしろデフォルトの気もします。
(Cocoon設定 ⇒ ボタン ⇒ トップへ戻るボタンの表示)
調べる労力が、圧倒的に変わります。
DAIKI さん
mk2さんご案内の、「Cocoonの高速化設定を無効にする方法」は以下のリンクのページに、わいひらさんが書いてくださっています。
高速化設定を無効にするには
プラグイン「Autoptimize」を削除したところ、アイコンフォントが表示されました。
高速化設定が原因で、「トップに戻るボタンが表示されない」or「クリックしても機能しない」という不具合が起こっているのでしょうか?
連続の投稿になって申し訳ありません。
◯プラグイン「Autoptimize」削除+高速化設定
・PC画面では問題なし
・スマホ画面では、トップに戻るボタンは表示されない
◯プラグイン「Autoptimize」削除+高速化設定を外す
・PC画面は問題なし
・スマホ画面では、大幅にデザインが崩れている
現状ではこのような状態です。
DAIKIさん
Cocoonの高速化と、プラグイン「Autoptimize」の機能は、完全に重複します。
どちらが先に働くか分かりませんが、HTMLやCSS、JavaScriptなどを何重にも縮小化することで、不具合が発生します。
意味のないことをしています。
むしろ、不具合を誘発します。
プラグイン「Autoptimize」は不要です。
変な例えかも知れませんが、ZIPファイルを更にZIP圧縮かけるようなものです。
それどころか、HTMLやCSS、JavaScriptの縮小化ですから、不具合を引き起こします。
プラグイン「Autoptimize」は使用しないでください。
mk2 さん
JavaScript の エラーは、プラグインの「Async JavaScript」が関係している可能性もありますね?
DAIKI さん
モバイル表示では、画像の遅延読み込み機能が有効になっているような気がします。
WordPress5.5からは、画像の遅延読み込み機能は標準で付与されているので、プラグインの機能と重複しているのではないかなと推測しています。
リフィトリーさん
その可能性が高いです。
本来の読み込みのタイミングから、変わってしまっているんだと思います。
DAIKIさん
プラグインの「Async JavaScript」も無効化してください。
DAIKI さん
プラグインの中にlazyload機能を有効化しているものはありませんか?
例えば、jetpacK とか・・
mk2さん、リフィトリーさん
プラグイン「Async JavaScript」を無効化にしたところ、スマホ画面も問題なく表示されるようになりました。
DAIKI さん
まだ、どうもモバイル表示でlazyload が有効になっているような気がします。
Jetpackの画像遅延読み込み機能「lazy load imeges」は無効になっていますか?
mk2 さん
DAIKI さん
私の環境でも、見た目や機能とも正常に見えています。
ただ、トラブルの予防的な観点から、プラグインの lazyload 機能が有効化してある場合は、無効にしておいた方が良いのではないかということです。
先程のエラーは消えました。
まだ何かなさっているのかも。
プラグインのlazyloadが有効になっているならば、無効化すべきだと思います。
意味のない。。。というよりも、むしろ遅くなる可能性が高いです。
プラグインのlazyloadは、JavaScriptな気がします。
ネイティブのlazyloadは優秀ですから。
現在の状況をまとめると、
・プラグイン「Autoptimize」「Async JavaScript」無効化
・cocoon高速化設定外す
・高速化設定内の「Lazy Loadを有効にする」のチェックを外す
>>モバイル(とはいえデベロッパーツール上ですが)では、何かのエラーが出ているように思います。
少しの間だけ、高速化設定を有効にしていたので、それが原因かもしれません。
DAIKIさん
その状態でCocoonの高速化を有効にするとどうなるか確認したいところですね。
HTML、CSS、JavaScriptの縮小化を有効にしてみるとどうでしょう。
mk2さん
ただいまHTML、CSS、JavaScriptの縮小化を有効にしました。
DAIKI さん
私が気になったのは、Cocoonの設定ではなく、プラグインの中でlazyload機能が備わっているプラグインがあれば、その機能を停止しておく、という意味です。
とはいえ、お腹空きました。
すみません、昼食食べます。
(離席します。)
あ、縮小化がされましたね、確認します。
DAIKI さん
mk2さん
私の環境では、contact-form-7のエラーが1つ出ているようですが、見た目やトップへ戻るボタンの機能は正常に見えています。
リフィトリーさん
やはり「contact-form-7」ですか。
DAIKIさん
JavaScriptの縮小化の除外設定に、以下のように入力してください。
(まだ除外していない場合は。)
/plugins/contact-form-7/
mk2さん リフィトリーさん
「Contact Form 7」の除外設定を今行いました。
DAIKIさん
エラーは消えました。
「Contact Form 7」は、JavaScript縮小化すると、エラーだけでなく、送信できない可能性があります。
(私は送信できなくなっていました。)
このまま除外したままにしてください。
では、すみませが、そろそろ昼食に。。。
DAIKI さん
lazyloadについても、現在は重複していないようです。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。