現在「イノセンス」スキンを適用中です。

画面の拡大効果が有効にならない | 不具合報告 | 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. ブラウザ環境チェックツール

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

スポンサーリンク
画面の拡大効果が有効にならない
 
共有:
通知
すべてクリア

[解決済] 画面の拡大効果が有効にならない


マサ
 マサ
(@マサ)
ゲスト
結合: 2か月前
投稿: 6
Topic starter  

対象のページのURL:

https://www.born-to-ride.info/motorcycle-sticker-how-to-remove/

(いずれのページでも同様の症状が出ていますがとりあえず一つ記事を貼っています)

相談内容:

Cocoon設定の画像タブにある画面の拡大効果にチェックをいれても反映されたりされなかったりし、画像のリンククリックで画像のURLに飛んでしまいます。管理者としてログインしてるときは正常に動作するのですが、ログアウト時だと動作しない状態となっています。

解決のために試したこと:

キャッシュの削除、子テーマをダウンロードできる最新のものに変更、Async JavaScriptプラグインのオフ

よろしくお願いいたします。

環境情報:

----------------------------------------------
サイト名:自由気ままに。
サイトURL: https://www.born-to-ride.info 
ホームURL: https://www.born-to-ride.info 
コンテンツ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-child-master/skins/skin-template/style.css
WordPressバージョン:5.7.1
PHPバージョン:7.4.14
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.2.8.8
カテゴリ数:56
タグ数:70
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.2
style.cssサイズ:1685バイト
functions.phpサイズ:1136バイト
----------------------------------------------
Gutenberg:1
AMP:1
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/uploads/2020/02/2020-born-to-ride-square-logo.jpg
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:1
CSS縮小化:1
JavaScript縮小化:1
Lazy Load:1
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
AddQuicktag 2.6.0
Admin Slug Column 0.5.0
Advanced Editor Tools (previously TinyMCE Advanced) 5.6.0
Akismet Anti-Spam 4.1.9
Async JavaScript 2.20.12.09
Batch Cat 0.3
Broken Link Checker 1.11.15
Category Order and Taxonomy Terms Order 1.5.7.5
Classic Editor 1.6
Contact Form 7 5.4.1
Edit Author Slug 1.8.1
EWWW Image Optimizer 6.1.3
Google XML Sitemaps 4.1.1
HTML Editor Syntax Highlighter 2.4.2
Image Watermark 1.6.6
Media Library Assistant 2.95
Public Post Preview 2.9.3
Redirection 5.1.1
Rinker 1.8.2
Search Regex 2.4.1
SiteGuard WP Plugin 1.5.2
Site Kit by Google 1.31.0
WordPress Importer 0.7
WP Fastest Cache 0.9.1.7
WP Multibyte Patch 2.9
XO Featured Image Tools 1.6.1
----------------------------------------------

----------------------------------------------
サイト名:自由気ままに。
サイトURL: https://www.born-to-ride.info
ホームURL: https://www.born-to-ride.info
コンテンツ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-child-master/skins/skin-template/style.css
WordPressバージョン:5.7.1
PHPバージョン:7.4.14
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.2.8.8
カテゴリ数:56
タグ数:70
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.2
style.cssサイズ:1685バイト
functions.phpサイズ:1136バイト
----------------------------------------------
Gutenberg:1
AMP:1
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/uploads/2020/02/2020-born-to-ride-square-logo.jpg
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:1
CSS縮小化:1
JavaScript縮小化:1
Lazy Load:1
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
AddQuicktag 2.6.0
Admin Slug Column 0.5.0
Advanced Editor Tools (previously TinyMCE Advanced) 5.6.0
Akismet Anti-Spam 4.1.9
Async JavaScript 2.20.12.09
Batch Cat 0.3
Broken Link Checker 1.11.15
Category Order and Taxonomy Terms Order 1.5.7.5
Classic Editor 1.6
Contact Form 7 5.4.1
Edit Author Slug 1.8.1
EWWW Image Optimizer 6.1.3
Google XML Sitemaps 4.1.1
HTML Editor Syntax Highlighter 2.4.2
Image Watermark 1.6.6
Media Library Assistant 2.95
Public Post Preview 2.9.3
Redirection 5.1.1
Rinker 1.8.2
Search Regex 2.4.1
SiteGuard WP Plugin 1.5.2
Site Kit by Google 1.31.0
WordPress Importer 0.7
WP Fastest Cache 0.9.1.7
WP Multibyte Patch 2.9
XO Featured Image Tools 1.6.1
----------------------------------------------


未解決
mk2
(@mk2_mk2)
メンバー Moderator
結合: 3か月前
投稿: 947
 

マサさん

申し訳ないですが、私にはちょっと理由が分からないのですが、現在の状況のみ書かせていただきます。

jQueryのエラーが出ているようです。
(未定義?)

 
 
jQuery Core、jQuery Migrateは読み込まれているように見受けられますが…。
 
詳しい方の回答をお待ちいただくのが良いと思います。
 
 
それまでに、全プラグインの停止をお試しいただければと思います。

わいひら 件のいいね!
はる
(@haruinoue)
メンバーサイト Moderator
結合: 10か月前
投稿: 609
 

scriptタグにdefer='defer'が付いてるためにjQueryが読み込まれる前にjQueryが必要なものが実行されてしまっているような…?

とりあえず試してみることとしては

  • プラグイン「Async JavaScript」を無効に
  • (無効にして改善されて、かつAsync JavaScriptは使いたい場合)設定の調整

でしょうか。


mk2わいひら 件のいいね!
マサ
 マサ
(@マサ)
ゲスト
結合: 2か月前
投稿: 6
Topic starter  

お二方、大変お早いお返事ありがとうございます。

Async JavaScriptの設定項目を確認したところ、たしかにログインユーザーにも適用するのチェックを入れてないのと、Deferの部分にチェックが入っています。

とりあえずここらへんの情報で原因はAsync JavaScriptのプラグインにあったと考えてもよろしいでしょうか?

このプラグインを入れたのはだいぶ前ですが、サーチコンソールのページスピードインサイトでJavaScriptの読み込みを遅らせる必要があるみたいな項目の点数を上げるためにオンにした覚えがあります。

どのような設定がベストなのかちょっと詳しくないのでわからないのですが、この部分の点数を維持しつつLightboxを動作させるのは難しそうでしょうか?

度々申し訳ありません、よろしくお願いいたします。


マサ
 マサ
(@マサ)
ゲスト
結合: 2か月前
投稿: 6
Topic starter  

Async JavascriptのプラグインをオフにしたらSpotlight、baguetteBox、Lifty、Lightboxのいずれでも正常に動作するようになりました。ありがとうございます。

おそらく以前添付画像の項目を見て設定した覚えがあります。

最適な設定はどのようにすべきかアドバイスをいただけると幸いです。

よろしくお願いいたします。


mk2
(@mk2_mk2)
メンバー Moderator
結合: 3か月前
投稿: 947
 

マサさん

原因はプラグイン「Async JavaScript」のようです。
プラグインによってdeferが追加され、Scriptのロードが遅延されたことが原因だと思います。

今回はたまたま画像の拡大効果で現象が発覚しましたが、以下の4つで同様にエラーが出ています。

baguetteBox.min.js
stickyfill.min.js
scroll-hint-min.js
clipboard.min.js

テーブルの横スクロールやクリップボードへのコピー、スクロール追従?などにも影響が出ていたものと思われます。

確かにPageSpeed Insightsでは、イロイロと指摘をされるのですが。。。
(確かに、レンダリングの妨げにはなるのでしょうから。)
だからと言って、それらの対応を全てしてしまうと動かなくなるものもあるということだと思います。

無駄なものを読み込んでいるのであれば対応してしまえば良いですが。
必要な機能は、仕方ないのではと思います。

個人的な意見ですが。

PageSpeed Insightsの数値はあくまでも目安でしかないと思います。
気にし過ぎる必要はないと思っています。
(PageSpeed Insightsの数値より、記事の内容が遥かに大事だと思います。)

 

私は「Async JavaScript」を使ったことがありませんので、どうすれば良いのかは分かりませんが。
もし特定のものを除外するような設定ができるのであれば、上記4つは除外しておくと良いと思います。

 

きっと、詳しい方がアドバイスをくださると思います。


わいひら 件のいいね!
マサ
 マサ
(@マサ)
ゲスト
結合: 2か月前
投稿: 6
Topic starter  

mk2さん

Async Javascriptの設定項目に、特定のjavascriptを除外する項目と、テーマで使われているものの除外の設定があったので、エラーが出ているとご指摘いただいたものを追加とテーマの除外をしておき、他については遅延設定をしておきました。

設定の方向性のアドバイスをいただき非常に助かりました。ありがとうございます。

 

mk2さん、はるさんのお二方ご丁寧にありがとうございました!


mk2
(@mk2_mk2)
メンバー Moderator
結合: 3か月前
投稿: 947
 

マサさん

確かにdeferは無くなりましたが、まだエラーが出ているようです。

特に赤枠で囲った部分は、親テーマのJavaScript.jsのようです。

先程はなかったものが増えていますから、親テーマのJavaScript.jsが読み込めなくて、エラーが出ているのかも知れません。


わいひら 件のいいね!
マサ
 マサ
(@マサ)
ゲスト
結合: 2か月前
投稿: 6
Topic starter  

現在色々設定を試していますがなかなかうまくいっておりません。

ひとまず原因については特定できたので、別のプラグインを試すか、最悪javascriptの遅延処理は諦める方向性で考えたいと思います。

問題解決後もサポートしていただき非常にありがたく存じておりますm(__)m


mk2わいひら 件のいいね!
共有:
スポンサーリンク
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:2年10ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに50%割引キャンペーン中!
※BOX2 ~ BOX8プラン契約の場合

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:2年8ヶ月

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:17年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:4年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:5年

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