サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2021年5月22日 14:01
こんにちは。約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
----------------------------------------------
2021年5月22日 14:28
DAIKIさん
高速化が有効になっており、良く分からないです。
別に「right:10px」がきいていない訳ではないと思います。
おそらく独自のカスタマイズ？か何かで、重ねて「right:10px」を書いていて、そちらが有効になっているだけです。
「position:fixed」もきいているみたいです。
そのカスタマイズ？の箇所で、「display: none;」にしているみたい？
これはむしろデフォルトの気もします。
これはむしろデフォルトの気もします。
インラインスタイルが見当たらないのですが。。。
Cocoonの設定はどうなっているのでしょうか。
（Cocoon設定 ⇒ ボタン ⇒ トップへ戻るボタンの表示）
（Cocoon設定 ⇒ ボタン ⇒ トップへ戻るボタンの表示）
とりあえず、設定をご確認ください。
お問い合わせの際は、高速化を無効にしていただきたいです。
調べる労力が、圧倒的に変わります。
調べる労力が、圧倒的に変わります。
わいひら reacted
2021年5月22日 16:55
DAIKI さん
ｍｋ２さんご案内の、「Cocoonの高速化設定を無効にする方法」は以下のリンクのページに、わいひらさんが書いてくださっています。
高速化設定を無効にするには
2021年5月23日 00:41
DAIKIさん
ちなみに表示させると添付のようにはなりましたが。。。
もしかすると、クリックしてもトップへは戻らないかもしれません。
（私はクリックしても戻りませんでした。）
（私はクリックしても戻りませんでした。）
jQueryに関するエラーがいくつか出ているようですが、それが原因かは分からないです。
わいひら reacted
トピックスターター 2021年5月23日 10:29
PC画面では、右下の表示を確認できましたが、スマホ画面を改めて見てみるとなぜか表示されていません。
ちなみに、「cocoon設定」→「モバイル設定」→「モバイルメニュー」では「ヘッダーモバイルメニュー」を選択しております。
>>もしかすると、クリックしてもトップへは戻らないかもしれません。
（私はクリックしても戻りませんでした。）
私もクリックしてみましたが、戻らない時があります。
2021年5月23日 10:50
DAIKI さん
高速化設定を無効にしたため？か、私の環境ではアイコンフォントは表示されないものの、トップへ戻るボタンが表示され、クリックすると機能するようです。
前述しましたとおり、プラグインのAutoptimize は、削除することをオススメします。
わいひら reacted
トピックスターター 2021年5月23日 11:11
プラグイン「Autoptimize」を削除したところ、アイコンフォントが表示されました。
高速化設定が原因で、「トップに戻るボタンが表示されない」or「クリックしても機能しない」という不具合が起こっているのでしょうか？
トピックスターター 2021年5月23日 11:23
連続の投稿になって申し訳ありません。
◯プラグイン「Autoptimize」削除＋高速化設定
・PC画面では問題なし
・スマホ画面では、トップに戻るボタンは表示されない
◯プラグイン「Autoptimize」削除＋高速化設定を外す
・PC画面は問題なし
・スマホ画面では、大幅にデザインが崩れている
現状ではこのような状態です。
2021年5月23日 11:26
DAIKI さん
念のため、ブラウザのキャッシュをクリアしてみましたが、私の環境では、アイコンフォントがまだ表示されていません。
もう少し調べてみます。
わいひら reacted
2021年5月23日 11:30
DAIKIさん
Cocoonの高速化と、プラグイン「Autoptimize」の機能は、完全に重複します。
どちらが先に働くか分かりませんが、HTMLやCSS、JavaScriptなどを何重にも縮小化することで、不具合が発生します。
意味のないことをしています。
むしろ、不具合を誘発します。
プラグイン「Autoptimize」は不要です。
変な例えかも知れませんが、ZIPファイルを更にZIP圧縮かけるようなものです。
それどころか、HTMLやCSS、JavaScriptの縮小化ですから、不具合を引き起こします。
プラグイン「Autoptimize」は使用しないでください。
わいひら reacted
2021年5月23日 11:37
DAIKIさん
現状がどういう状態か分かりませんが、多数のjQueryのエラーが出ています。
- 画像の拡大効果（baguetteBox）
- スクロールテーブル
- Webフォントの遅延読み込み
- 画像の遅延読み込み（ネイティブのLazyload以外の部分）
- タイトルとURLをコピー
などなど、多数にエラーが出ています。
プラグイン「Autoptimize」の影響の可能性はあります。
JavaScript縮小化した影響の可能性はあります、確実にそれとは言えませんが。
わいひら reacted
2021年5月23日 11:42
ｍｋ２ さん
JavaScript の エラーは、プラグインの「Async JavaScript」が関係している可能性もありますね？
DAIKI さん
モバイル表示では、画像の遅延読み込み機能が有効になっているような気がします。
WordPress5.5からは、画像の遅延読み込み機能は標準で付与されているので、プラグインの機能と重複しているのではないかなと推測しています。
わいひら reacted
トピックスターター 2021年5月23日 11:45
2021年5月23日 11:46
DAIKIさん
この直上の私の返信の添付画像の上から3番目は、フォントの遅延読み込みです。
ここがエラーになっていることでFontAwesomeのCSSの読み込みに失敗しています。
わいひら reacted
2021年5月23日 11:48
リフィトリーさん
その可能性が高いです。
本来の読み込みのタイミングから、変わってしまっているんだと思います。
DAIKIさん
プラグインの「Async JavaScript」も無効化してください。
わいひら reacted
2021年5月23日 11:50
DAIKI さん
プラグインの中にlazyload機能を有効化しているものはありませんか？
例えば、jetpacK とか・・
この投稿は4年前ずつリフィトリーに変更されました
トピックスターター 2021年5月23日 11:53
mk2さん、リフィトリーさん
プラグイン「Async JavaScript」を無効化にしたところ、スマホ画面も問題なく表示されるようになりました。
2021年5月23日 12:01
DAIKI さん
まだ、どうもモバイル表示でlazyload が有効になっているような気がします。
Jetpackの画像遅延読み込み機能「lazy load imeges」は無効になっていますか？
わいひら reacted
トピックスターター 2021年5月23日 12:05
2021年5月23日 12:06
モバイル（とはいえデベロッパーツール上ですが）では、何かのエラーが出ているように思います。
ただ、もうソース等の縮小化が有効になっており、良く分かりません。
2021年5月23日 12:06
mk2 さん
DAIKI さん
私の環境でも、見た目や機能とも正常に見えています。
ただ、トラブルの予防的な観点から、プラグインの lazyload 機能が有効化してある場合は、無効にしておいた方が良いのではないかということです。
2021年5月23日 12:10
先程のエラーは消えました。
まだ何かなさっているのかも。
プラグインのlazyloadが有効になっているならば、無効化すべきだと思います。
意味のない。。。というよりも、むしろ遅くなる可能性が高いです。
プラグインのlazyloadは、JavaScriptな気がします。
ネイティブのlazyloadは優秀ですから。
トピックスターター 2021年5月23日 12:14
現在の状況をまとめると、
・プラグイン「Autoptimize」「Async JavaScript」無効化
・cocoon高速化設定外す
・高速化設定内の「Lazy Loadを有効にする」のチェックを外す
>>モバイル（とはいえデベロッパーツール上ですが）では、何かのエラーが出ているように思います。
少しの間だけ、高速化設定を有効にしていたので、それが原因かもしれません。
トピックスターター 2021年5月23日 12:16
「Lazy Load」設定は以下のようになってます。
2021年5月23日 12:17
DAIKIさん
その状態でCocoonの高速化を有効にするとどうなるか確認したいところですね。
HTML、CSS、JavaScriptの縮小化を有効にしてみるとどうでしょう。
わいひら reacted
トピックスターター 2021年5月23日 12:20
mk2さん
ただいまHTML、CSS、JavaScriptの縮小化を有効にしました。
2021年5月23日 12:20
DAIKI さん
私が気になったのは、Cocoonの設定ではなく、プラグインの中でlazyload機能が備わっているプラグインがあれば、その機能を停止しておく、という意味です。
わいひら reacted
2021年5月23日 12:21
とはいえ、お腹空きました。
すみません、昼食食べます。
（離席します。）
あ、縮小化がされましたね、確認します。
2021年5月23日 12:25
DAIKIさん
やはりエラーが何か出ます。
JavaScriptの縮小化で「Contact Form 7」の除外設定はしていますか？
2021年5月23日 12:26
DAIKI さん
ｍｋ２さん
私の環境では、contact-form-7のエラーが１つ出ているようですが、見た目やトップへ戻るボタンの機能は正常に見えています。
2021年5月23日 12:28
リフィトリーさん
やはり「contact-form-7」ですか。
DAIKIさん
JavaScriptの縮小化の除外設定に、以下のように入力してください。
（まだ除外していない場合は。）
/plugins/contact-form-7/
トピックスターター 2021年5月23日 12:28
リフィトリーさん
Jetpack内の設定は画像のようになっています。
トピックスターター 2021年5月23日 12:31
mk2さん リフィトリーさん
「Contact Form 7」の除外設定を今行いました。
2021年5月23日 12:33
DAIKIさん
エラーは消えました。
「Contact Form 7」は、JavaScript縮小化すると、エラーだけでなく、送信できない可能性があります。
（私は送信できなくなっていました。）
このまま除外したままにしてください。
2021年5月23日 12:36
では、すみませが、そろそろ昼食に。。。
2021年5月23日 12:38
DAIKI さん
lazyloadについても、現在は重複していないようです。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。