grayishスキン適用中

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

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

ページ上に戻るボタンの位置がおかしい(...
 
共有:
通知
すべてクリア

[解決済] ページ上に戻るボタンの位置がおかしい(左下に表示)

40 投稿
3 ユーザー
19 Likes
1,091 表示
(@DAIKI)
Active Member
結合: 3年前
投稿: 14
Topic starter  

こんにちは。約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バイト
----------------------------------------------
Gutenberg1
AMP0
PWA0
Font Awesome4
Auto Post Thumbnail0
Retina1
ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:1
CSS縮小化:1
JavaScript縮小化:1
Lazy Load1
WEBフォントLazy Load1
----------------------------------------------
利用中のプラグイン:
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
----------------------------------------------


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6679
 

DAIKIさん

高速化が有効になっており、良く分からないです。

 

別に「right:10px」がきいていない訳ではないと思います。

おそらく独自のカスタマイズ?か何かで、重ねて「right:10px」を書いていて、そちらが有効になっているだけです。

position:fixed」もきいているみたいです。

 
 
そのカスタマイズ?の箇所で、「display: none;」にしているみたい?
これはむしろデフォルトの気もします。
 
インラインスタイルが見当たらないのですが。。。
 
Cocoonの設定はどうなっているのでしょうか。
(Cocoon設定 ⇒ ボタン ⇒ トップへ戻るボタンの表示)
 
 
とりあえず、設定をご確認ください。
お問い合わせの際は、高速化を無効にしていただきたいです。
調べる労力が、圧倒的に変わります。

   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 5年前
投稿: 6845
 

前略、DAIKI さん

過去のフォーラムのトピックでの経験から、プラグインの Autoptimize とCocoonの高速化設定を併用すると不具合が生じてしまうようです。

 

Cocoonをお使いになる場合は、Autoptimize は削除してしまった方が良いような気がします。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 5年前
投稿: 6845
 

DAIKI さん

mk2さんご案内の、「Cocoonの高速化設定を無効にする方法」は以下のリンクのページに、わいひらさんが書いてくださっています。

 

高速化設定を無効にするには

https://wp-cocoon.com/theme-trouble/


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6679
 

DAIKIさん

ちなみに表示させると添付のようにはなりましたが。。。

 
 
もしかすると、クリックしてもトップへは戻らないかもしれません。
(私はクリックしても戻りませんでした。)
 
jQueryに関するエラーがいくつか出ているようですが、それが原因かは分からないです。

   
わいひら reacted
(@DAIKI)
Active Member
結合: 3年前
投稿: 14
Topic starter  

@mk2_mk2

ご返信ありがとうございます。

「高速化」を無効にしました。

 

cocoonの設定は以下のようになっています。

 


   
(@DAIKI)
Active Member
結合: 3年前
投稿: 14
Topic starter  

PC画面では、右下の表示を確認できましたが、スマホ画面を改めて見てみるとなぜか表示されていません。

ちなみに、「cocoon設定」→「モバイル設定」→「モバイルメニュー」では「ヘッダーモバイルメニュー」を選択しております。

 

>>もしかすると、クリックしてもトップへは戻らないかもしれません。
(私はクリックしても戻りませんでした。)

私もクリックしてみましたが、戻らない時があります。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 5年前
投稿: 6845
 

DAIKI さん

高速化設定を無効にしたため?か、私の環境ではアイコンフォントは表示されないものの、トップへ戻るボタンが表示され、クリックすると機能するようです。

前述しましたとおり、プラグインのAutoptimize は、削除することをオススメします。

 

 


   
わいひら reacted
(@DAIKI)
Active Member
結合: 3年前
投稿: 14
Topic starter  

プラグイン「Autoptimize」を削除したところ、アイコンフォントが表示されました。

高速化設定が原因で、「トップに戻るボタンが表示されない」or「クリックしても機能しない」という不具合が起こっているのでしょうか?


   
(@DAIKI)
Active Member
結合: 3年前
投稿: 14
Topic starter  

@leafytree

連続の投稿になって申し訳ありません。

◯プラグイン「Autoptimize」削除+高速化設定

・PC画面では問題なし

・スマホ画面では、トップに戻るボタンは表示されない

◯プラグイン「Autoptimize」削除+高速化設定を外す

・PC画面は問題なし

・スマホ画面では、大幅にデザインが崩れている

 

現状ではこのような状態です。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 5年前
投稿: 6845
 

DAIKI さん

念のため、ブラウザのキャッシュをクリアしてみましたが、私の環境では、アイコンフォントがまだ表示されていません。

もう少し調べてみます。

 


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6679
 

DAIKIさん

Cocoonの高速化と、プラグイン「Autoptimize」の機能は、完全に重複します。

どちらが先に働くか分かりませんが、HTMLやCSS、JavaScriptなどを何重にも縮小化することで、不具合が発生します。

意味のないことをしています。
むしろ、不具合を誘発します。

プラグイン「Autoptimize」は不要です。

 

変な例えかも知れませんが、ZIPファイルを更にZIP圧縮かけるようなものです。
それどころか、HTMLやCSS、JavaScriptの縮小化ですから、不具合を引き起こします。

プラグイン「Autoptimize」は使用しないでください。


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6679
 

DAIKIさん

現状がどういう状態か分かりませんが、多数のjQueryのエラーが出ています。

  • 画像の拡大効果(baguetteBox)
  • スクロールテーブル
  • Webフォントの遅延読み込み
  • 画像の遅延読み込み(ネイティブのLazyload以外の部分)
  • タイトルとURLをコピー

 

などなど、多数にエラーが出ています。

 

プラグイン「Autoptimize」の影響の可能性はあります。
JavaScript縮小化した影響の可能性はあります、確実にそれとは言えませんが。


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 5年前
投稿: 6845
 

mk2 さん

JavaScript の エラーは、プラグインの「Async JavaScript」が関係している可能性もありますね?

 

DAIKI さん

モバイル表示では、画像の遅延読み込み機能が有効になっているような気がします。

 

WordPress5.5からは、画像の遅延読み込み機能は標準で付与されているので、プラグインの機能と重複しているのではないかなと推測しています。


   
わいひら reacted
(@DAIKI)
Active Member
結合: 3年前
投稿: 14
Topic starter  

@mk2_mk2

現在は、プラグイン「Autoptimize」とCocoonの高速化設定の両方を外している状態です。

スマホのデザインがめちゃくちゃになっています、、、


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6679
 

DAIKIさん

この直上の私の返信の添付画像の上から3番目は、フォントの遅延読み込みです。
ここがエラーになっていることでFontAwesomeのCSSの読み込みに失敗しています。


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6679
 

リフィトリーさん

その可能性が高いです。

本来の読み込みのタイミングから、変わってしまっているんだと思います。

 

DAIKIさん

プラグインの「Async JavaScript」も無効化してください。


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 5年前
投稿: 6845
 

DAIKI さん

プラグインの中にlazyload機能を有効化しているものはありませんか?

例えば、jetpacK とか・・

This post was modified 3年前 by リフィトリー

   
(@DAIKI)
Active Member
結合: 3年前
投稿: 14
Topic starter  

mk2さん、リフィトリーさん

プラグイン「Async JavaScript」を無効化にしたところ、スマホ画面も問題なく表示されるようになりました。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6679
 

DAIKIさん

私もPC画面は問題なさそうに見えます。
トップへ戻るも機能しているようです。

jQueryに関するエラーも消えました。

 


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 5年前
投稿: 6845
 

DAIKI さん

まだ、どうもモバイル表示でlazyload が有効になっているような気がします。

Jetpackの画像遅延読み込み機能「lazy load imeges」は無効になっていますか?


   
わいひら reacted
(@DAIKI)
Active Member
結合: 3年前
投稿: 14
Topic starter  

@leafytree

Cocoon設定内の「Lazy Load設定」にて、「Lazy Loadを有効にする」にチェックが入っておりました。

ちょうど今チェックを外しました。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6679
 

モバイル(とはいえデベロッパーツール上ですが)では、何かのエラーが出ているように思います。

 
 
ただ、もうソース等の縮小化が有効になっており、良く分かりません。
 

   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 5年前
投稿: 6845
 

mk2 さん

DAIKI さん

私の環境でも、見た目や機能とも正常に見えています。

ただ、トラブルの予防的な観点から、プラグインの lazyload 機能が有効化してある場合は、無効にしておいた方が良いのではないかということです。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6679
 

先程のエラーは消えました。

まだ何かなさっているのかも。

 

プラグインのlazyloadが有効になっているならば、無効化すべきだと思います。
意味のない。。。というよりも、むしろ遅くなる可能性が高いです。

プラグインのlazyloadは、JavaScriptな気がします。

ネイティブのlazyloadは優秀ですから。


   
(@DAIKI)
Active Member
結合: 3年前
投稿: 14
Topic starter  

@mk2_mk2

現在の状況をまとめると、

・プラグイン「Autoptimize」「Async JavaScript」無効化

・cocoon高速化設定外す

・高速化設定内の「Lazy Loadを有効にする」のチェックを外す

>>モバイル(とはいえデベロッパーツール上ですが)では、何かのエラーが出ているように思います。

少しの間だけ、高速化設定を有効にしていたので、それが原因かもしれません。


   
(@DAIKI)
Active Member
結合: 3年前
投稿: 14
Topic starter  

「Lazy Load」設定は以下のようになってます。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6679
 

DAIKIさん

その状態でCocoonの高速化を有効にするとどうなるか確認したいところですね。

HTML、CSS、JavaScriptの縮小化を有効にしてみるとどうでしょう。


   
わいひら reacted
(@DAIKI)
Active Member
結合: 3年前
投稿: 14
Topic starter  

mk2さん

ただいまHTML、CSS、JavaScriptの縮小化を有効にしました。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 5年前
投稿: 6845
 

DAIKI さん

私が気になったのは、Cocoonの設定ではなく、プラグインの中でlazyload機能が備わっているプラグインがあれば、その機能を停止しておく、という意味です。


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6679
 

とはいえ、お腹空きました。

すみません、昼食食べます。
(離席します。)

あ、縮小化がされましたね、確認します。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6679
 

DAIKIさん

やはりエラーが何か出ます。

JavaScriptの縮小化で「Contact Form 7」の除外設定はしていますか?


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 5年前
投稿: 6845
 

DAIKI さん

mk2さん

私の環境では、contact-form-7のエラーが1つ出ているようですが、見た目やトップへ戻るボタンの機能は正常に見えています。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6679
 

リフィトリーさん

やはり「contact-form-7」ですか。

 

DAIKIさん

JavaScriptの縮小化の除外設定に、以下のように入力してください。
(まだ除外していない場合は。)

/plugins/contact-form-7/

   
(@DAIKI)
Active Member
結合: 3年前
投稿: 14
Topic starter  

リフィトリーさん

Jetpack内の設定は画像のようになっています。


   
(@DAIKI)
Active Member
結合: 3年前
投稿: 14
Topic starter  

mk2さん リフィトリーさん

Contact Form 7」の除外設定を今行いました。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6679
 

DAIKIさん

エラーは消えました。

Contact Form 7」は、JavaScript縮小化すると、エラーだけでなく、送信できない可能性があります。
(私は送信できなくなっていました。)

このまま除外したままにしてください。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6679
 

では、すみませが、そろそろ昼食に。。。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 5年前
投稿: 6845
 

DAIKI さん

lazyloadについても、現在は重複していないようです。

 


   
(@DAIKI)
Active Member
結合: 3年前
投稿: 14
Topic starter  

リフィトリーさん mk2さん

長い時間にわたってご丁寧に対応して頂きありがとうございました。


   
共有:

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

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

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

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

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

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

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

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