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

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

グローバルナビメニューが表示されるペー...
 
共有:
通知
すべてクリア

[解決済] グローバルナビメニューが表示されるページとされないページがある

42 投稿
6 ユーザー
29 Reactions
1,409 表示
 w19
(@w19)
Eminent Member Registered
結合: 1年前
投稿: 19
Topic starter  

こんにちは。表記の件についてご教示いただきたいです。

 

不具合・カスタマイズ対象ページのURL: https://20-greatest-home.com

相談内容:グローバルナビメニューを表示させたいのですが、正常に表示できているページと設定はできていそうですが表示されていないページがあります。全てのページで表示できるようにさせたいです。

不具合の発生手順:グローバルナビメニュー作成後から

解決のために試したこと:メニューの位置を管理など表示に関わりそうな項目、追加CSSで非表示になっていないか確認

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

----------------------------------------------
サイト名:さいきょうのいえづくり!!
サイトURL: https://20-greatest-home.com
ホームURL: https://20-greatest-home.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-green-orange/style.css
WordPressバージョン:6.2.2
PHPバージョン:7.4.33
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.4 Safari/605.1.15
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja
----------------------------------------------
テーマ名:Cocoon
バージョン:2.6.0.1
カテゴリー数:7
タグ数:18
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:845バイト
functions.phpサイズ:203バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/uploads/2023/03/見出しを追加.png
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:1
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam 5.1
Contact Form 7 5.7.6
----------------------------------------------


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

w19さん

恐れ入りますが、グローバルナビが表示されていないというページのURLをご提示ください。

 

私は只今スマホしかないもので、調査等はできないのですが・・・。

トップページから、5~6つくらいのページにアクセスしてみましたが、すべて表示されておりました。

問題のページを見つけることもできなかったです。


   
わいひら reacted
 w19
(@w19)
Eminent Member Registered
結合: 1年前
投稿: 19
Topic starter  

@mk2_mk2 

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

以下のURLです

https://20-greatest-home.com/page-757/

 

表示されたり、されなかったりするのはデバイスの問題の可能性もありますか?

表示されないときは添付画像のようになります。


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

w19さん

今手元にスマホしかないもので、何とも言えませんが。

ご提示いただいたページは、私からは以下のように見えています。 

 
ちなみに、Android・Chromeです。

   
わいひら reacted
(@pcningen)
Trusted Member Registered
結合: 3年前
投稿: 51
 

こんにちは。

私のサイトも似たような症状が発生しており、class(item-label)が表示されないことがあります。

常時発生するわけではなく、以下の条件で稀に起こっています。

  • iOS(またはiPad OS)デバイスのみ発生
  • Chrome・Safari共に起こる
  • カテゴリー、タグページなど、一部のページのみで発生

対象URL https://pcningen.com/category/pc/

(私の場合横並びにするためにカスタムCSSを入れているため、それが原因と思っていました)

 

w19様のページ( https://20-greatest-home.com/category/meeting-sumirin/ )をiPadで閲覧したところ、確かに不具合が再現しました。

This post was modified 1年前 2回 by pcningen

   
わいひら and w19 reacted
 w19
(@w19)
Eminent Member Registered
結合: 1年前
投稿: 19
Topic starter  

ありがとうございます。

pcningenさんの条件と全く同じ起こり方をしていると思います。

現在解決しましたか?

いただいたURL拝見しましたが、メニューはきちんと見えていました。


   
(@pcningen)
Trusted Member Registered
結合: 3年前
投稿: 51
 

@w19 

解決していません。

 

補足ですが、他のページをプレビュー(Safariでリンクを長押し)後に不具合のあるページに戻ると、正常に表示されます。


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

投稿者:: @pcningen

w19様のページ( https://20-greatest-home.com/category/meeting-sumirin/ )をiPadで閲覧したところ、確かに不具合が再現しました。

投稿者:: @pcningen

対象URL https://pcningen.com/category/pc/

それぞれの表示を確認させていただきました。

Windows系から。

【Chrome】

 
 
【Firefox】
 
 
Edgeは添付しませんが、同様に表示されていました。
 
続いては、【Android・Chrome】です。
 
 
 
私の保有している環境では再現しないようです。
投稿者:: @pcningen

常時発生するわけではなく、以下の条件で稀に起こっています。

  • iOS(またはiPad OS)デバイスのみ発生
  • Chrome・Safari共に起こる
  • カテゴリー、タグページなど、一部のページのみで発生

もしかすると、上記のようにWebKit系のブラウザで発生しているのかもしれないですが、確証はないです。
※iOSのChromeは、WebKitだったと思います。
(私はWebKit系のブラウザはなく、確認はできないです)

 


投稿者:: @pcningen

class(item-label)が表示されないことがあります。

上記のようにありますが、これはHTMLソース上にないのでしょうか、それともCSSが当たらないということなのでしょうか。
(それ以外?)


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

w19さん

w19さんの環境は、MacOSのようです。

MacOS・Chromeの環境で、ご確認いただくことは、できますでしょうか。

MacOS・Chromeの環境で再現するかどうか、ご確認いただけないでしょうか。
(EdgeやFirefoxでも良いです)


   
わいひら reacted
(@pcningen)
Trusted Member Registered
結合: 3年前
投稿: 51
 

@mk2_mk2 

デベロッパーツール上の画像の部分(item-label)が表示されない、という意味です。

 
CSS自体は(以前は)正常に反映されていました。また、WebKit系ブラウザ以外では現在も問題ありません。
This post was modified 1年前 by pcningen

   
わいひら reacted
(@pcningen)
Trusted Member Registered
結合: 3年前
投稿: 51
 

正常に表示できない場合の例です。


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

pcningenさん

投稿者:: @pcningen

デベロッパーツール上の画像の部分(item-label)が表示されない、という意味です。

デベロッパーツールではなく、HTMLソースの方にはありますか?

Windows・Chromeだと以下のような感じで表示できますが、WebKit系だと、どうすれば良いのか分からないですけれど。


   
わいひら reacted
(@pcningen)
Trusted Member Registered
結合: 3年前
投稿: 51
 

@mk2_mk2 

すみません、Macは所持していないので確認できません。(iPad等で確認できるのでしょうか??)

 

WindowsのChromeで見る限りはitem-labelがあります。


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

pcningenさん

Android・Chromeであれば、URLの前に「view-source:」を追加すると、HTMLソースを確認できます。

例えば、「 https://pcningen.com/category/pc/」の場合は、以下のようにします。

view-source: https://pcningen.com/category/pc/

iOS・iPadOSのWebKit系で、それができるのか分かりませんけれど 

 

【追記】

iOS系は、上記ではダメみたいです。

以下に記載がありました。

iPhoneからいつでもHTMLソースが表示できるアプリ「View Source」
https://tcd-theme.com/2020/11/iphone-view-source.html

アプリ(有料)が必要な感じですね。

検索していくつか見てみましたが、やはりアプリを入れる方法ばかり書かれています・・・。


   
わいひら reacted
(@pcningen)
Trusted Member Registered
結合: 3年前
投稿: 51
 

@mk2_mk2 

ブックマークレットを使う方法があったのでやってみました。

ただ、ブックマークレットを発動した瞬間に正常表示に戻ってしまいます。(HTML上にもitem-labelがあります。)


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

pcningenさん

ありがとうございます。

とりあえず、w19さんにMacOSのChromeなどでご確認いただくと、ある程度分かるかもしれないです。
その結果次第ですけれど、WebKitでCSSがきかないのかもしれないです。
(確証はないですけど、検索してもまだ見つからず・・・。しかしそれだったら、崩れて表示されても良い気もしますし、まったく分からないです) 


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

僕も表示される環境しか持っていないんですけど、以下の利用環境チェッカーを試すとどのように出力されますか?スクリーンショットいただければ幸いです。
http://mysys-check.com
※表示させたくない情報はモザイク加工などをしていただければ幸いです。

This post was modified 1年前 by わいひら

   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

WebKit 16.4 で確認したところ、正常に表示されてはいます。

ちなみに、以下の CSS を書いた場合、正常に表示されますか?

.navi .item-label {
  min-height: 0;
}

   
わいひら reacted
(@pcningen)
Trusted Member Registered
結合: 3年前
投稿: 51
 

@yhira

添付画像の通りとなります。

 IMG_2387.jpg

テーマ情報を載せていなかったので、記入しておきます。

----------------------------------------------
サイト名:PC人間
サイトURL: https://pcningen.com
ホームURL: https://pcningen.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-dark-enji/style.css
WordPressバージョン:6.2.2
PHPバージョン:7.4.33
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36
サーバーソフト:LiteSpeed
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.6.0.1
カテゴリー数:12
タグ数:79
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:14006バイト
functions.phpサイズ:4173バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:5
Auto Post Thumbnail:1
Retina:1
ホームイメージ:/wp-content/uploads/2021/07/84172f_logo_1920_1080.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam 5.1
Category Order and Taxonomy Terms Order 1.7.5
Colorize Mobile Browser Bar 1.1.0
Contact Form 7 5.7.6
EWWW Image Optimizer 7.0.0
Highlighting Code Block 1.7.0
Jetpack 12.1
Site Kit by Google 1.99.0
WP Multibyte Patch 2.9
WPvivid Backup Plugin 0.9.86
XML Sitemap Generator for Google 4.1.11
XO Security 3.6.2
----------------------------------------------

 

   
わいひら reacted
 w19
(@w19)
Eminent Member Registered
結合: 1年前
投稿: 19
Topic starter  

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

まずは環境チェックの画像添付します。

 


   
 w19
(@w19)
Eminent Member Registered
結合: 1年前
投稿: 19
Topic starter  

次に,iPad Chromeで表示した画像です。


   
(@pcningen)
Trusted Member Registered
結合: 3年前
投稿: 51
 

投稿者:: @akira

WebKit 16.4 で確認したところ、正常に表示されてはいます。

ちなみに、以下の CSS を書いた場合、正常に表示されますか?

.navi .item-label {
  min-height: 0;
}

 

私は効果なしです。

 


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

w19さん

投稿者:: @w19

iPad Chromeで表示した画像です。

MacOSの環境はお持ちではなかったでしょうか。

iPadOSではなく、MacOSのChrome等で確認してみたいです。

(そろそろタイムオーバーで、しばらくフォーラムを離れます)


   
わいひら reacted
 w19
(@w19)
Eminent Member Registered
結合: 1年前
投稿: 19
Topic starter  

mk2さん

 

ありがとうございます。

帰宅したらMacOSから開いてみます。

以下のコードに関しても、組み込みますので結果お待ちいただけると幸いです。

.navi .item-label {
  min-height: 0;
}

   
mk2 reacted
chu-ya
(@chu-ya)
Famed Member Registered
結合: 3年前
投稿: 2895
 

●現象
同じ現象が再現し。
iPhoneXr、Safariで確認。
グローバルメニューが正しく表示された後、
ページを下にスワイプさせ、リロードすると文字(アイコン含み)消え。

pcningenさんの場合、Fontawesomeが表示されず。


●備考
一旦、safariを表示したまま、右ボタンをクリックしスリープ。
再度、右ボタンをクリックし、スリープ解除。
その際、safariを上下にスクロールすると表示される場合があり。


   
わいひら reacted
 w19
(@w19)
Eminent Member Registered
結合: 1年前
投稿: 19
Topic starter  

chu-yaさんありがとうございます。

 

MacbookのChromeから確認しましたが、グローバルナビメニューは表示されていました。

しかし、iPadから確認するとコードをCSSにいれた状態でも表示されないページがあることに変わりなさそうです。


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

w19さん

ありがとうございます。

投稿者:: @w19

MacbookのChromeから確認しましたが、グローバルナビメニューは表示されていました。

そうですか。
同じ端末(MacBook)でも、Chromeだと表示されたということですね。

原因は分かりませんが・・・。
今までの情報からすると、WebKit系(※)のブラウザで起きていると考えられる気がします。
(ただ、WebKit自身では表示されているみたいですけれど)

※各OSのSafari、iOS・iPadOSのChrome等(iOS系は、Safari以外もWebKitのはず) 

 

Safariで確認できないもので、なかなか難しそうな感じがします。
(他の方に期待・・・)

WebFontに何か?
しかし、他の場所は表示されていますし。


   
わいひら reacted
 w19
(@w19)
Eminent Member Registered
結合: 1年前
投稿: 19
Topic starter  

ありがとうございます。

 

そうなれば、環境系の話になるので解決は難しいということでしょうかね…?


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

w19さん

簡単ではない気がします。

今のところ、Safariでは多くの方で、この事象が発生していますので、解決はしたいです。

何かのきっかけで原因が分かる可能性はありますので、Safariでいろいろ試していく必要があると思います。

おそらく他の方も、いろいろ調べてくださるはずです。 


   
わいひら reacted
 w19
(@w19)
Eminent Member Registered
結合: 1年前
投稿: 19
Topic starter  

mk2さん

 

皆様に尽力していただき、大変心強いです。

ありがとうございます。

 


   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

以下のリンク先の「結果」の部分を Safari で見た場合、添付画像のように 3 行の英文は見えるでしょうか?

https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-line-clamp#%E4%BE%8B


   
わいひら reacted
 w19
(@w19)
Eminent Member Registered
結合: 1年前
投稿: 19
Topic starter  

@akira 

 

ありがとうございます。

見えていました!


   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

@w19 さん

申し訳ないです。原因も修正方法も分かりません。

WebKit では再現できないため、Safari 特有の症状かもしれません。

overflow: hidden や Web フォント、-webkit-line-clamp が関係あるかもと思い WebKit Bugzilla などで検索したのですが、それらしいのが見つからないです。

ちなみに、ブラウザのキャッシュを削除しても治らないのですよね?


   
わいひら reacted
(@pcningen)
Trusted Member Registered
結合: 3年前
投稿: 51
 

私の環境では、SafariだけでなくiOSのChromeでも起きてますね。

(キャッシュやCookieは消去済み、シークレットモードでも発生します。)


   
わいひら reacted
 w19
(@w19)
Eminent Member Registered
結合: 1年前
投稿: 19
Topic starter  

Akiraさん

 

ありがとうございます。

特に変化なさそうです…。

 

関係のない情報かもしれませんが、最初の4ページくらいまではメニューが表示されますが、以降他のページを開いて周回すると出なくなるような気がします。


   
(@pcningen)
Trusted Member Registered
結合: 3年前
投稿: 51
 

ちなみに上記問題は、トラブルシューティングを利用して全てのプラグインを停止しても起こりました。

参考:WordPressのトラブルシューティングを劇的に楽にする「Health Check & Troubleshooting」プラグインの使い方。

▼挙動を動画にしました。長押しでプレビューして戻ると、何故か治ります。
https://twitter.com/pcningen/status/1663486944754515968?s=20


   
わいひら reacted
(@pcningen)
Trusted Member Registered
結合: 3年前
投稿: 51
 

暫定対応となりますが、メニューのナビゲーションラベルからfontawesomeを取り除くことで、不具合なく表示されるようになりました。

そもそも、fontawesomeを挿入する場合、添付画像のような設定方法は間違っているのでしょうか?


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

投稿者:: @pcningen

そもそも、fontawesomeを挿入する場合、添付画像のような設定方法は間違っているのでしょうか?

Font Awesome関係の問題だったんですね。
他の環境で表示されているので間違っているということはないと思うのですが。


   
pcningen reacted
 w19
(@w19)
Eminent Member Registered
結合: 1年前
投稿: 19
Topic starter  

皆様ありがとうございます。

 

当方もFontAwesome削除してみたところ、問題は解決したようです。

FontAwesome4を使用していたのですが、互換性の問題でしょうか?

ちょっとおしゃれなヘッダーになっていただけに、残念です…。


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

ちょっとわからないです。
他のブラウザでは表示されていたのでブラウザの不具合の可能性もあるかもしれません。


   
(@pcningen)
Trusted Member Registered
結合: 3年前
投稿: 51
 

この問題、いつの間にか解消していました。
(iOS 17にすると不具合が出なくなる、との説もありますが、古いOSでも正常に表示されるようになっています。)

原因は不明ですが、ひとまず報告いたします。


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

ご連絡ありがとうございます。
おそらく他のトピックで原因の対策を行ったことによるテーマの改善ではないかと思います。


   
共有:

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

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

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

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

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

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

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

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