サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2023年6月26日 13:19
お世話になります。
スマホでモバイルヘッダーボタンを有効にして、通知情報を表示させた場合の見え方がブラウザーによって異なるので困っています。
Chromeではキャッチフレーズが表示されています。
スマホ用のメニューが「position:fixed」になっているので、SafariとFirefoxは後ろにキャッチフレーズが隠れています。
「header-in」を消すとChromeはいいのですが、SafariとFirefoxでは通知が後ろにまわって非表示になります。
どうすればいいでしょうか?
よろしくお願いいたします。
以下はcocoonの親テーマを有効にしたテストサイトの情報です。
(テストサイトですのでパスワードで保護しています)
----------------------------------------------
サイト名:ブルーレディ
サイトURL: https://slashd.xsrv.jp/cocoon
ホームURL: https://slashd.xsrv.jp/cocoon
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
WordPressバージョン:6.2.2
PHPバージョン:7.4.33
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.2 Safari/605.1.15
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja-jp
----------------------------------------------
テーマ名:Cocoon
バージョン:2.6.1.6
カテゴリー数:43
タグ数:1501
ユーザー数:1
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/uploads/2023/06/ogp.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam: Spam Protection 5.2
All-in-One WP Migration 7.75
All-in-One WP Migration Unlimited Extension 2.51
AmazonJS 0.10
Autoptimize 3.1.8.1
Classic Editor 1.6.3
Contact Form 7 5.7.7
Disable XML-RPC Pingback 1.2.2
EWWW Image Optimizer 7.0.2
Jetpack 12.2.1
LightStart - Maintenance Mode, Coming Soon and Landing Page Builder 2.6.8
Otter – Page Builder Blocks & Extensions for Gutenberg 2.3.1
Password Protected 2.6.3.1
Really Simple CAPTCHA 2.2
Regenerate Thumbnails 3.1.5
Search Regex 3.0.6
Shortcode Widget 1.5.3
Throws SPAM Away 3.4.7
UpdraftPlus - Backup/Restore 1.23.6
WP-Optimize - Clean, Compress, Cache 3.2.15
WP Multibyte Patch 2.9
XML Sitemap & Google News 5.3.4
----------------------------------------------
以下の本番サイトでは「header-in」の「tagline」を消しているのですが、同じ原因で、Chromeはよくて、SafariとFirefoxは後ろにキャッチフレーズが隠れます。
以下、本番環境です。
----------------------------------------------
サイト名:ブルーレディ
サイトURL: https://www.bluelady.jp
ホームURL: https://www.bluelady.jp
コンテンツ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
WordPressバージョン:6.2.2
PHPバージョン:8.0.25
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7
----------------------------------------------
テーマ名:Cocoon
バージョン:2.6.1.6
カテゴリー数:43
タグ数:1236
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.2
style.cssサイズ:43745バイト
functions.phpサイズ:19552バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/uploads/2020/07/ogp-kai3.png
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
----------------------------------------------
利用中のプラグイン:
All-in-One WP Migration 7.75
AmazonJS 0.10
Classic Editor 1.6.3
Contact Form 7 5.7.7
EWWW Image Optimizer 7.0.2
Honeypot for Contact Form 7 2.1.1
IndexNow 1.0.1
Jetpack 12.2.1
Pochipp 1.9.11
Really Simple CAPTCHA 2.2
Regenerate Thumbnails 3.1.5
Safe SVG 2.1.1
Search Regex 3.0.6
SiteGuard WP Plugin 1.7.5
Throws SPAM Away 3.4.7
UpdraftPlus - Backup/Restore 1.23.6
WebSub (FKA. PubSubHubbub) 3.1.3
Widget Logic 5.10.4
Wordfence Security 7.10.0
WP External Links 2.58
WP Multibyte Patch 2.9
XML Sitemap & Google News 5.3.4
Yoast Duplicate Post 4.5
----------------------------------------------
わいひら reacted
Topic starter
2023年6月26日 13:44
本番環境で隠れているのは通知のまちがいでした。
すみません。
2023年6月26日 14:21
親テーマの不具合です。
不具合の原因となったのは、アドミンバーが表示されている場合は上に余白を取るスタイルの不具合修正 の変更です。scss/breakpoints/_max-width-1023.scss の 191 行目 に :has() が使われています。
Firefox は、:has() に対応していません。
参考: https://caniuse.com/css-has
こんな感じの修正になるかもしれません。
body:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) { margin-top: 53px; }
Safari で表示が崩れる原因は分かりません。最新バージョンの webkit では正常な表示でした。lin09 さんがお使いの Safari のバージョンが 15.3 以前なのかなと思いました。
わいひら reacted
Topic starter
2023年6月26日 16:04
ご返信ありがとうございました。
@media screen and (max-width: 1023px){
body:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) {
margin-top: 53px;
}
}
を追加しましたところ、FirefoxもSafariも改善されました。
助かりました。
2023年6月26日 16:50
私が書いた CSS では無理です。
以前のアドミンバーの不具合を考慮した場合、アドミンバーの有無で CSS を分ける必要があるかもしれません。
chu-ya さんがご指摘の CSS は、WordPress が _admin_bar_bump_cb() で出力しています。この CSS も考慮する必要があると思います。面倒…。
アドミンバーの高さは var(--wp-admin--admin-bar--height) で取得できるため、使うと便利かもしれません。
This post was modified 1年前 2回 by Akira
Topic starter
2023年6月26日 16:51
いろいろ参考になります。
ありがとうございます。
一応以下のcssハックで問題無く表示されているような気がしているのですが、
@media screen and (max-width: 1023px){
body:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) {
margin-top: 53px;
}
}
_:lang(x)::-internal-media-controls-overlay-cast-button, body {
margin-top: 0px;
}
その場しのぎのような気もします。
もう、どうしていいか分からないです。
2023年6月26日 17:25
●対策案
親CSSの以下の部分を置き換えます。
akiraさんの言うように、CSS変数を用いadminバーの高さ分を考慮します。
/* モバイルヘッダー高さ分、余白を設ける */ body:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) { margin-top: 53px; } /* adminバーがある場合、その余白分を除いた余白とする */ .admin-bar:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) { margin-top: calc(53px - var(--wp-admin--admin-bar--height)); }
Topic starter
2023年6月26日 19:18
おせわになります。
もともとメインで使っているのが、PCもスマホもChromeだったので、正常に表示していると思い込んでいました。
Chromeのみ最初からモバイルヘッダーの高さ分がマージンとしてあったのが、どうしても分かりません。
これが分からないと今回投稿させていただいた問題が解決しません。
私は「mobile-menu-buttons」がposition:stickyではなくposition:fixedになっていることがとても気になっています。
IEは考慮しなくていいのでposition:stickyを使えばコンテンツが後ろにまわるようなことはないのではと思います。
申し訳ありませんが、adminバーの高さを考慮することは、私にとっては二の次です。
サイトを見るユーザーはadminバーは表示されませんから。
私が通知エリアを表示する設定を行ってから、この現象にずいぶん長いあいだ気づけませんでした。
adminバーを非表示にしてSafariやFirefoxでチェックしなかったのは私のミスです。
2023年6月26日 19:41
私は「mobile-menu-buttons」がposition:stickyではなくposition:fixedになっていることがとても気になっています。
これはHTMLの構造によるかと思います。
フッター下に、モバイルメニューがある為、fixedを用い、画面トップに固定させており。
画面スクロールの際、メニューを固定にするには、以下の設定があり。
[Cocoon設定]→[モバイル]→モバイルボタン「モバイルボタンの固定表示」
●ご参考
わいひら reacted
Topic starter
2023年6月26日 19:58
chy-yaさま、ありがとうございます。
そうですね。
フッタにもあるからなんですね。
実は、私はヘッダーだけposition:stickyにできないか、やってみたら、全部消えてしまいました。
あと、もう一つ気になっているのが、モバイルヘッダーによって隠れている部分にキャッチフレーズが入っていることです。
私はこのキャッチフレーズの高さをmin-height:43pxにすることで、わざと残したのかと疑いました。
実際に「header-in」をmin-height:43pxにして試みたのですが、どうやってもChrome、Safari、Firefoxを同じように表示することができませんでした。
結局、現在はCSSハックを、使っていますが、何かいい方法があるのではないかと思っています。
Chromeだけを特別扱いするには、JavaScriptかなんかを使わないとできないんでしょうか?
当分はcssハックのままにしておこうかとも思っていますが、かなりモヤモヤしています。
2023年6月26日 19:59
ご連絡ありがとうございます。
Akiraさんとchu-yaさんの案を参考に修正しました。
------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------
https://github.com/xserver-inc/cocoon/commit/831d8c9d7e82f43ff42b29e5973018dee14b9203
Akira reacted
Topic starter
2023年6月27日 08:58
わいひらさま
お世話になります。
修正版を確認いたしました。
全て問題ありませんでした。
ありがとうございました。
Topic starter
2023年6月27日 09:15
もう一つお願いします。
アドミンバーが話題にのぼりましたが。
私はこの点理解不足です。
アドミンバーがある場合は、その下にロゴや通知バーがでるということでしょうか?
現状ではモバイルヘッダーの後ろにロゴが隠れています。
ユーザーには問題無いですし、アドミンバーを非表示にして確認できるので、特に問題ありませんが…
理解不足なので教えてください。
よろしくお願いします。
2023年6月27日 10:08
テーマをアップデートしたところ、オススメカードに「説明」が表示されてしまいました。
申し訳ありません。
>わいひらさん
以下が影響している?
https://wp-cocoon.com/community/postid/71696/
lin09さんが言われるCSSを削除しており。
私の環境では、スニペット自体の要素が存在せず?!
わいひら reacted
2023年6月27日 10:39
アドミンバーがある場合は、その下にロゴや通知バーがでるということでしょうか?
●ポイント
先に述べたように、fixedを用い、フタッター下にあるモバイルヘッダーを画面トップに表示させています。
この為、キャッチフレーズ含め全体を、53px下げる必要があります。
下げないと、キャッチフレーズがモバイルヘッダーの下に隠れるからです。
●なぜadminバーの事を言うのか
閲覧ユーザだけなら、単にモバイルヘッダー分53px下げれば問題なく。
閲覧ユーザだけなら、単にモバイルヘッダー分53px下げれば問題なく。
ログインユーザの事も考慮しているからです。
Akiraさんが回答されているとおり、WordPress側で、モバイルヘッダーメニュー前、margin-topが付き。
htmlタグにmargin-top:32px、画面幅782px以下46pxが付きます。(図①)
結果、キャッチフレーズ以下の要素が、46px下がり。
残りの図②をbodyにmarin-topを加え、モバイルヘッダーとの重なりを無くしています。
adminバー高さ+(モバイルヘッダー高さ53px-aminバー高さ)
単に53px分の余白とした場合、キャッチフレーズ前にadminバー高さ+モバイルヘッダー高さ53pxとなり。
キャッチフレーズ前に余分な余白ができるからです。
その為、adminバーの有り無しと言う事になります。
キャッチフレーズ前に余分な余白ができるからです。
その為、adminバーの有り無しと言う事になります。
わいひら reacted
2023年6月27日 11:16
>わいひらさん
https://wp-cocoon.com/community/postid/71807/
以前削除した、以下を戻して下さい。
.recommended .card-snippet { display: none; }
「おすすめカード」にスニペットの表示/非表示設定は無いと思います。
以下で、メニューの説明欄に入力した説明が、スニペット枠として表示され。
Topic starter
2023年6月27日 11:23
chu-yaさん、大変親切なご説明ありがとうございます。
後でしっかり読ませていただきます。
実は、後でというのも、ノーマルなCocoonのテストテストサイトを確認したところ、新バージョンでなおっていないようなのです。
テストサイトは以下の情報のように、バージョンは2.6.1.7なので修正版です。
添付のように通知エリアが隠れます。
今回はChrome、Safari、Firefoxの全て同じです。
これについては安心しました。
しかし、本番環境と何が違うのか、よく分かりませんでした。
本番環境の子テーマはかなりCSSで変更してあるので、違いがわからないという状況です。
添付はテスト環境のものです。
以下の情報もテスト環境です。(パスワードがかけてあります。)
----------------------------------------------
サイト名:ブルーレディ
サイトURL: https://slashd.xsrv.jp/cocoon
ホームURL: https://slashd.xsrv.jp/cocoon
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
WordPressバージョン:6.2.2
PHPバージョン:7.4.33
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7
----------------------------------------------
テーマ名:Cocoon
バージョン:2.6.1.7
カテゴリー数:43
タグ数:1501
ユーザー数:1
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/uploads/2023/06/ogp.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam: Spam Protection 5.2
All-in-One WP Migration 7.76
All-in-One WP Migration Unlimited Extension 2.52
AmazonJS 0.10
Autoptimize 3.1.8.1
Classic Editor 1.6.3
Contact Form 7 5.7.7
Disable XML-RPC Pingback 1.2.2
EWWW Image Optimizer 7.0.2
Jetpack 12.2.1
LightStart - Maintenance Mode, Coming Soon and Landing Page Builder 2.6.8
Otter – Page Builder Blocks & Extensions for Gutenberg 2.3.1
Password Protected 2.6.3.1
Really Simple CAPTCHA 2.2
Regenerate Thumbnails 3.1.5
Search Regex 3.0.6
Shortcode Widget 1.5.3
Throws SPAM Away 3.4.7
UpdraftPlus - Backup/Restore 1.23.6
WP-Optimize - Clean, Compress, Cache 3.2.15
WP Multibyte Patch 2.9
XML Sitemap & Google News 5.3.4
----------------------------------------------
This post was modified 1年前 by lin09
Topic starter
2023年6月27日 18:26
ちょっと調べてみました。
テスト環境と本番環境の違いは以下のCSSが効いているか否かだけの違いみたいです。
@media screen and (max-width: 1023px)
body:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) {
margin-top: 53px;
}
テスト環境でもbodyに「mblt-header-and-footer-mobile-buttons」が指定されていましたので、何故効かないのかが、謎です。
2023年6月27日 20:36
2023年6月27日 20:43
おすすめカードのスニペットが表示されない事確認しました。
https://wp-cocoon.com/community/postid/71809/
わいひら reacted
Topic starter
2023年6月27日 21:38
すみません。
テスト環境が上手くいかない原因が分かりました。
Autoptimizeが入っていて、影響していたみたいです。
お騒がせして申し訳ありませんでした。
このスレッドは解決済みとさせてください。
ありがとうございました。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。