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

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

スマホ(Android Chrome)...
 
共有:
通知
すべてクリア

[解決済] スマホ(Android Chrome)で別ページへのアンカーリンクが飛ばない

14 投稿
3 ユーザー
14 Reactions
377 表示
(@dongurie)
Eminent Member Registered
結合: 2年前
投稿: 15
Topic starter  

いつもお世話になっております。
Cocoon子テーマを使わせていただいております。

●不具合・カスタマイズ対象ページのURL: https://sweetcocoro.com/my-baystars-2024/

相談内容:複数ページに分けられている上記のページにて、AndroidのChromeで別ページへのアンカーリンクをタップした時に、別ページのトップには飛ぶけれど正しい場所にジャンプしません。
いつまでかはわかりませんが、以前は正しくジャンプしていたように記憶しています。

●不具合の発生手順:
(例)
1. AndroidのChromeで上記ページの
  ・選手の誕生日一覧 ←リニューアルしました
 をタップ 
2. https://sweetcocoro.com/my-baystars-2024/4/#PLAYER_BIRTHDAY が読み込まれる
3. https://sweetcocoro.com/my-baystars-2024/4/ のトップが表示されてしまう

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

・全てのプラグインを無効化しても現象は同じでした。
・Cocoon子テーマでも親テーマでも現象は同じでした。
・他テーマ(Twenty Twenty-Three)では正しい位置にジャンプします。
・Chromeのキャッシュ削除をしても現象は同じでした。
・PCのChrome、iPadのSafariでは正しい位置にジャンプします。他の環境は持っていません。
https://sweetcocoro.com/my-baystars-2024/4/#PLAYER_BIRTHDAY をアドレスバーに入力しても現象は同じでした。
https://sweetcocoro.com/my-baystars-2024/4/ のページ内アンカーリンク(目次など)は正しい位置にジャンプします。
・高速化は無効にしてあります。

なにか設定すべき場所があるでしょうか。
どうぞよろしくお願いいたします。

環境情報:

----------------------------------------------
サイト名:ひとりじゃないよ
サイトURL: https://sweetcocoro.com 
ホームURL: https://sweetcocoro.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-tegakinote-blue-coral/style.css
WordPressバージョン:6.6.2
PHPバージョン:8.1.27
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.0
エンコーディング:none
言語:ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7,th;q=0.6,id;q=0.5
----------------------------------------------
テーマ名:Cocoon
バージョン:2.7.7.3
カテゴリー数:31
タグ数:248
ユーザー数:2
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:845 バイト
functions.phpサイズ:203 バイト
----------------------------------------------
Gutenberg:1
Font Awesome:4
Auto Post Thumbnail:1
Retina:0
ホームイメージ:/wp-content/uploads/2023/01/20230130_213854.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
----------------------------------------------
利用中のプラグイン:
Ad Invalid Click Protector 1.3.0
Advanced Ads 1.54.1
Advanced Ads – Google AdSense In-feed Placement 1.1.3
Advanced Editor Tools 5.9.2
Akismet Anti-spam: Spam Protection 5.3.3
BackWPup 4.1.4
Broken Link Checker 2.4.0
ConoHa WING コントロールパネルプラグイン 1.2
ConoHa WING 自動キャッシュクリア 1.0.0
EWWW Image Optimizer 7.9.0
Jetpack 13.8.1
Jetpack Boost 3.4.9
Jetpack Protect 3.0.2
Pochipp 1.15.0
SiteGuard WP Plugin 1.7.8
W3 Total Cache 2.7.5
WebSub (FKA. PubSubHubbub) 3.2.1
WP Multibyte Patch 2.9
WP ULike 4.7.4
XML Sitemap Generator for Google 4.1.21
----------------------------------------------

   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 7945
 

必ずしも、飛ばない訳ではなさそうです。

以下は、Android実機で確認したものです。

3回試して、3回目にはジャンプしています。

(元GIFが24.5MBだったもので、かなり圧縮しましたので、画質はとても粗いです)

 
1・2回目と、3回目の違いは、自動広告が入るか入らないかです。
(PC用広告ウィジェットの下に入るみたいです)
 
 
ちなみに、PCのデベロッパーツールで、スマホの表示にすると、同じく自動広告が入り込んで、アンカーリンクまで飛ばないです。
 
残念ながら、デベロッパーツールのスマホ表示で、自動広告が入らない状態にはなってくれないため、この自動広告が原因と、言い切れないところがあります。
 
通常のPC表示だと、この位置に自動広告が入らないため、これまた確認・検証ができない状態です。
PC表示では、自動広告が入らないために、アンカーリンクへ飛ぶのかなという気はしているのですが。

   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17211
 

僕のAndroidエミュレーター環境だと添付画像の場所にジャンプしているようです。
ただ1回目に「ページ移動すると出るAdSense広告」出た際は、ジャンプしなかったように思います。
一度広告をオフにしてみるとどうなりますでしょうか。


   
dongurie reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17211
 

mk2さんと書き込みがかぶってしまいました…。


   
dongurie and mk2 reacted
(@dongurie)
Eminent Member Registered
結合: 2年前
投稿: 15
Topic starter  

mk2さん、わいひらさん、返信ありがとうございます。
自動広告をオフにしたところ、バッチリアンカーリンクにジャンプしました!

自動広告が原因とすると、自動広告をオフにするしか対処法がないのでしょうか・・・


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 7945
 

dongurieさん

投稿者:: @dongurie

自動広告をオフにするしか対処法がないのでしょうか・・・

オフではなく、「除外エリア」を設定すれば良さそうに思いますけれど。
(AdSense側の設定です。他の自動広告を使いたい場合ですけれど)

使ったことがないもので、そこまで細かく設定できるのかは分かりませんけれど。

ページの特定のエリアをページ内自動広告の表示から除外する
https://support.google.com/adsense/answer/12626543?hl=ja


   
(@dongurie)
Eminent Member Registered
結合: 2年前
投稿: 15
Topic starter  

mk2さん

投稿者:: @mk2_mk2

オフではなく、「除外エリア」を設定すれば良さそうに思いますけれど。
(AdSense側の設定です。他の自動広告を使いたい場合ですけれど)

使ったことがないもので、そこまで細かく設定できるのかは分かりませんけれど。

ページの特定のエリアをページ内自動広告の表示から除外する
https://support.google.com/adsense/answer/12626543?hl=ja

確かにその通りですね。
ありがとうございます!ひとまずGoogle AdSense の設定をいじることとします。

ただ1点だけ気になるのは、他のテーマ(Twenty Twenty-Three)の時はこの現象が全く起きないことです。
これはスムーススクロールの宿命なのでしょうか?


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 7945
 

dongurieさん

投稿者:: @dongurie

ただ1点だけ気になるのは、他のテーマ(Twenty Twenty-Three)の時はこの現象が全く起きないことです。
これはスムーススクロールの宿命なのでしょうか?

「Twenty Twenty-Three」で以下のものを書くとどうなるのでしょう?

https://github.com/xserver-inc/cocoon/blob/fba01d625dc3eaf03a0bc5f04181b038aea82856/style.css#L539-L541

只今スマホからなもので、上記の範囲選択がうまくできていないかもしれません。

 


   
(@dongurie)
Eminent Member Registered
結合: 2年前
投稿: 15
Topic starter  

mk2さん

投稿者:: @mk2_mk2

「Twenty Twenty-Three」で以下のものを書くとどうなるのでしょう?

https://github.com/xserver-inc/cocoon/blob/fba01d625dc3eaf03a0bc5f04181b038aea82856/style.css#L539-L541

Twenty Twenty-ThreeはCSSファイルを使っていないのか?
設定がうまくいかなかったので(能力不足ですみません)

AstraやOceanWPなどスムーススクロールしているテーマをいくつかインストールしてみました。
全てスマホで自動広告が出た後にも別ページのアンカーリンクにジャンプしました。
※ただAstraはJSファイルでスムーススクロール設定してるっぽいです。

もう少し切り分けて考えてみます。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 7945
 

dongurieさん

とりあえず「追加CSS」に書いてみてはと思うのですけれど。

ブロックテーマは、何か勝手が違いますね。

 
「外観」-「エディター」-「スタイル」-「縦三点リーダー」に、追加CSSはあるみたいです。
 
上の画像の場所に記載すると、グローバルスタイルという場所に保存されました。
(global-styles-inline-cssに出てくるみたいです)

   
(@dongurie)
Eminent Member Registered
結合: 2年前
投稿: 15
Topic starter  

mk2さん

投稿者:: @mk2_mk2

「外観」-「エディター」-「スタイル」-「縦三点リーダー」に、追加CSSはあるみたいです。

ありがとうございます!
Twenty Twenty-Threeに追加CSSでスムーススクロール指定を書いたところ、Cocoonと同じように別ページのアンカーリンクにジャンプしなくなりました。
やはりスムーススクロール+Google AdSenseの自動広告がダメみたいですね。

Google AdSenseをなんとか活かしたく /themes/Cocoon-master 直下の style.css の scroll-behavior を削除してみたのですが、PCのサイトはスムースでなくなったもののスマホのサイトは相変わらずスムーススクロールしてしまいます。

スマホ専用の設定が探してもよくわからなくて・・・場所をご教授いただければと思います。
どうぞよろしくお願いいたします。
今夜はもう遅いので明日また来ますね。おやすみなさいませ

※現在トピック冒頭に記載したURLのページは自動広告をオフにしてあり、以下のテストページで動作確認しています↓↓
https://sweetcocoro.com/test_anchor/

This post was modified 2か月前 3回 by dongurie

   
(@dongurie)
Eminent Member Registered
結合: 2年前
投稿: 15
Topic starter  

自己解決です。

投稿者:: @dongurie

スマホ専用の設定が探してもよくわからなくて・・・場所をご教授いただければと思います。

サイト高速化のチェックを入れたところ(CSSを読み込み直したのか?)スマホでもスムーススクロールが解除されました。
失礼いたしました。

解決済みとさせていただいます。

mk2さん、わいひらさん、ありがとうございました 😊 


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17211
 

投稿者:: @dongurie

やはりスムーススクロール+Google AdSenseの自動広告がダメみたいですね。

スムーススクロールがこういう問題を引き起こすとは想定しておりませんでした。
一旦、元に戻しておこうと思います。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 7945
 

dongurieさん

自己解決とのことですが、念のため

モバイル用には特に何も指定はしていないと思います。
スムーススクロールに関しては、先にご提示した箇所だと思います。

また、親テーマは、修正しないのが基本かと思います。
意図的にテストしたい場合もあるかもしれませんが、基本的には子テーマや追加CSSをご利用いただく方が良いと思います。
(忘れたりすると面倒な場合も。アップデートが簡単に戻せますけれど)

今回反映されなかったのは、以下の影響の可能性はあると思います。

  • W3 Total Cache
  • WEXAL

後者は結構強力なんですよね。
(テーマを縮小化して、おそらくキャッシュもしていると思います)

カスタマイズだったり、WordPressやテーマの設定を変更する場合は、上記は無効化した方が良いかもしれないです。
(ご利用の機能により異なるかとは思いますけれど)


   
dongurie reacted
共有:

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

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

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

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

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

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

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

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