サイト内検索
Cocoonフォーラム
![](https://wp-cocoon.com/wp-content/themes/cocoon-master/screenshot.jpg)
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2022年7月7日 02:11
対象URL: https://cerealnumber.net/働くover30が共感できる韓ドラ/
相談内容:Safariでリンクボタンをホバーした際にボタンが消えてしまいます。背景色と一体化する状態です。そのままの場所にカーソルがあればリンクはクリックできます。Chromeではきちんと、ホバー時はボタンの色に薄く白が重なるように表示されます。
別の色のボタンも試しましたが、同じ状態でした。
解決のために試したこと:キャッシュの削除やリンクの色などを変更してみましたが、解決できませんでした。
よろしくお願いいたします。
環境情報:
----------------------------------------------
サイト名:Cereal Number
サイトURL: https://cerealnumber.net
ホームURL: https://cerealnumber.net
コンテンツ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.0
PHPバージョン:7.4.29
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.5 Safari/605.1.15
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja
----------------------------------------------
テーマ名:Cocoon
バージョン:2.4.6
カテゴリ数:5
タグ数:0
ユーザー数:2
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:2543バイト
functions.phpサイズ:203バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:1
Retina:0
ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
Classic Editor 1.6.2
ConoHa WING コントロールパネルプラグイン 1.1
ConoHa WING 自動キャッシュクリア 1.0.0
----------------------------------------------
Topic starter
2022年7月7日 21:50
ご返信ありがとうございます。
はい、添付画像のリンクボタンについてです。説明が悪く申し訳ありません。
添付写真が上下2段、別の画像になっていて、
上段画像「赤ボタン&黒の矢印カーソル」がホバー前、
下段画像「ボタンなし&白の人差し指カーソル」がホバー中の状態です。
よろしくお願いいたします。
2022年7月7日 22:52
wapcerealさん
HTMLやCSSを書いたり、編集したりするときは文字コードをUTF-8(BOMなし)で扱うことができる適切なテキストエディタを用いると良いような気がします。
Macですと「CotEditor」が良いかもしれません。
CotEditor
文字コードをUTF-8 BOMなし(UTF-8N)でファイル保存をする方法
2022年7月7日 22:54
wapcerealさん
また、WordPressを日本語環境で利用する場合は、プラグインの「WP Multibyte Patch」のインストールは必須なんだそうです。
インストールしておいた方が無難かもしれません。
WordPress5から無くなったWP Multibyte Patchは必須なので手動インストールしましょう
https://yuki-stock.com/2019/01/09/hello-world/
WP Multibyte Patchは必要か不要か?具体的に何をしているか見てみた
Topic starter
2022年7月8日 13:51
リフィトリー様
お調べいただきありがとうございます。
また、こんなに丁寧に教えてくださって感謝いたします!
教えていただいたことを試しました。
・クラシックエディターがプラグインなしで使用できる→プラグイン削除しました
・プラグインの「WP Multibyte Patch」のインストール
・テキストエディター「CotEditor」をDL、UTF-8 BOMなし(UTF-8N)で作成
上記を試してみましたが、解決しなかったので、CSSを編集前の状態(自分でカスタム用に記述した部分を削除)に戻しました。残念ながらやはりボタンの状況は変わりません。
その後、他のcocoon使用サイトを閲覧していた際にも、ボタンに同じ現象が起こることがわかりました。
・小サイズ、中サイズはマウスオーバーでボタンが消える
・大サイズのみは、ホバー時にきちんと薄く白がかる
スクショではわかりにくいので画面録画したものを添付します。
この映像は
sattoga.com様の下記ページを使用させていただきました。
https://sattoga.com/archives/5353/
手持ちのMacBookとiMac、どちらも同じことが起こりますが、他に困っている方もいらっしゃらないようなので、私のパソコンかSafariがおかしいのかもしれません。
ボタンが消える現象は気持ち悪いですが、Chromeで編集、閲覧もするようにして、様子をみてみようと思います。
解決はできませんでしたが、CSSを編集する際にテキストエディタを使用することやプラグインのことなど、多くを学ばせていただきました。ありがとうございます。
大袈裟かもしれませんが、このような場所で質問することが初めてだったのでとても緊張して投稿しました。
こんなに親切にしてくださったことに感激です!
助けてくださったリフィトリーさま、Cocoonのわいひらさま、ありがとうございました。
ブログはこれからですが、Cocoonとみなさまと共に今後頑張ろうと思えました!
今後ともよろしくお願いいたします。
2022年7月8日 14:14
wapcerealさん
回答者側に、「Mac + Safari」の環境をお持ちの方が限りなく少なく、事象の確認等が難しいということが、あると思います。
Safariの不具合ではないか・・・という疑いは持ちますが・・・。
(確証はなく、ただの疑いです。)
少し試していただきたいのですが、カラムの背景色を白以外にしていただいて、ボタンにマウスオーバーするとどうなるのか、見せていただけないでしょうか。
(ボタンに対して透過がきかずに、真っ白になって、背景色と同化しているのではないか・・・という疑いを持っています。)
その動画があると助かります。
Topic starter
2022年7月8日 19:28
mk2様
ご投稿ありがとうございます。
Mac+Safari環境の方はとても少ないのですね。
mk2様に教えていただいたように、メインカラムの背景色を変更してみました。
https://cerealnumber.net/ボタンtest/
Mac+Safari環境ですと添付動画のように文字とボタンが背景と一体化して消えてしまいますが、Chromeはやはり問題なしです。
今後、私のサイトを見てくださる方が現れても同環境での閲覧は少ないであろう!ということから、Safariの不具合が直ることを気長に待ちながら、気にせずChromeできちんと更新していこうと思います。
ご回答、とても励みになりました!
同じ環境で確認できないにもかかわらず、親身になってアドバイスしていただき、心より感謝いたします。
ありがとうございました。
2022年7月8日 19:38
wapcerealさん
ありがとうございます。
私の予想と違って、完全消えてしまいますね。
もしかすると、hover疑似クラスの中の「transition」が影響しているのでしょうか・・・。
(まだちよっと分からないですが・・・)
以下を見ると、「transition」はhover疑似クラス内ではなく、元々の要素に対して指定しているようです。
https://developer.mozilla.org/ja/docs/Web/CSS/transition
【追記】
すみません、しばらく離席しなくてはなりません・・・。
2022年7月8日 20:25
以下を見ると、「transition」はhover疑似クラス内ではなく、元々の要素に対して指定しているようです。
こちらを擬似クラスでなく、元々の要素で修正してみました。
以下のファイルでSafari上にて確認してみていただければ幸いです。
------------------------------------------------
https://github.com/yhira/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------
2022年7月8日 21:09
Macを少しだけ借りて、アクセスしてみたのですが、症状は再現しませんでした。
OSやsafariのバージョンが違うせいか、はたまた、トビ主さん特有の環境によるものなのか、、、
wapcereal reacted
2022年7月8日 21:44
wapcerealさんがご利用のSafariは、最新バージョンっぽいんですよね。
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.5 Safari/605.1.15
Safari 15.5 Release Notes
https://developer.apple.com/documentation/safari-release-notes/safari-15_5-release-notes
上記のリリースノートに以下のような記載がありますが・・・。
Fixed returning the default computed style for elements without the transition or animation shorthands.
transitionまたはanimation省略形のない要素のデフォルトの計算スタイルを返す問題を修正しました。
意味はさっぱり分からず、これが影響したかもさっぱり分からず・・・。
まずは、わいひらさんがご対応くださったバージョンを、wapcerealさんにお試しいただくしかなさそうです。
(「Windows + Chrome」では問題なかったです)
2022年7月8日 22:35
私の借りたMacは最新バージョンのSafariではなかったのかもしれません。
wapcerealさん曰く「手持ちのMacBookとiMac、どちらも同じことが起こります」とのことですので、両方ともバージョン15.5だとすると、mk2さんご案内のように15.5 特有の事象という可能性もあり得ないことではないのかな、と思ったりします。
wapcereal reacted
Topic starter
2022年7月8日 23:30
わいひら様
調べていただき、そしてファイルのアップデートまでご対応くださいましてありがとうございました!
とても残念なのですが、、、やはり解決しませんでした。
先にお伝えした時点では、ボタンテストページ( https://cerealnumber.net/ボタンtest/)の大きいボタンは、リンク先のないただのボタンデザインだったので、リンク先のあるボタンに修正して記事を更新しました。
リンクを追加したことで、改めてわかったことがあります。
各環境別の現象です。
Mac×Safari環境 ※動画を添付します。
・大ボタンをクリックしてリンク先に飛んでから改めて元のページに戻ると、大ボタンもホバー時に左半分だけ消えるようになることがわかりました
・ページを再読み込みすると、大ボタンは問題ない(ホバー時に全体が白味がかる)状態に戻ります
・「リンクを新しいタブで開く」設定の大ボタンで飛んだ際はページに戻っても大ボタンの左が消えてしまうことはありません
・小・中ボタンはホバー時にやはり全体が消えます
iPhone×Safari環境→問題なし
Mac×Chrom→問題なし
iPhone×Chrom
「リンクを新しいタブで開く」の小と中のみ、訪問済ボタンが消えることがある。大は消えない。
※こちらの動画は次の返信に添付します
いざとなったら、ワードプレスの設置からやり直すことで解決する可能性もあるでしょうか?
記事もアクセスもない今の状態なら初期化も仕方ないかと思っております。
引き続きこちらでも色々確認してまいります。
検証などに時間がかかり、返信まで時間がかかりまして申し訳ありません。
お忙しい中、ご対応くださりありがとうございます!
Topic starter
2022年7月8日 23:44
iPhone×Chrome環境で、新しいタブでリンクを開いた後に、訪問済ボタンが消える現象のキャプチャーはこちらです。
カーソル位置を録画できなかったので、わかりにくいですが、
「リンクを新しいタブで開く中」のボタンでリンクを開き、戻るとそのボタンが消える、という状況を録画しました。
Topic starter
2022年7月8日 23:48
mk2様
お調べいただき、ありがとうございます!
私にはmk2様のおっしゃることを理解するので精一杯で詳しいことは分かりませんが、確かにホバーの問題ではなかったのかもしれません。
せっかくわいひら様もファイルを作っていただいたのにとても残念です。。
サポートありがとうございます!
mk2 reacted
Topic starter
2022年7月8日 23:50
リフィトリー様
Mac環境で確かめていただいてありがとうございます!
やはり、私のパソコンやワードプレスがおかしいのかもしれません。
ワードプレスの初期化も検討します。泣
お力添えいただきありがとうございます!
リフィトリー reacted
2022年7月9日 01:06
wapcerealさん
改善しませんでしたか・・・。
お役に立てず、申し訳ないです。
当てずっぽう感満載ですが、そこかなと、かけてみたのですが。
おそらくWordPressというよりは、Safariの何かではないかと思います。
(確証はまったくなく、推測です。)
ただ、Safariでも、バージョン違い?か何かの要因によって、動作が異なる様子ですね。
正直、良く分からないところです。
Safariって、他のブラウザとは違う動作をすることがある印象なんですよね。
(私が普段使わないので、そういう印象を持ってしまうだけかもしれないです)
今のところ、他に考えられそうなものが見つかっていないです。
(解消できるものならば、解消したいですが)
2022年7月9日 01:44
@wapcereal さん
このバグに似ていますね。
<button> loses background color with certain styles applied
このバグが最初に報告されたのが以下のページ。動画が掲載されていますが、そっくりです。
Safari - Issue with colors and opacity
要約すると、以下の条件が揃った時に背景色が消えるバグ。
- 値が 1 未満の opacity がある。← Cocoon は該当する。
- border-color の値が transparent 。← Cocoon は該当する。
- border-radius の値が 0 ではない。← Cocoon は該当する。
- display の値が flex、inline-flex、grid、inline-grid のいずれか。← Cocoon はちょっと違う。
ちなみに、以下の CSS を子テーマの style.css に追加した場合、wapcereal さんの環境ではどうなるでしょうか。
.btn:hover { filter: opacity(0.7); opacity: 1; }
Topic starter
2022年7月9日 08:40
Akira様
おはようございます。ご投稿ありがとうございます。
参照サイトとわかりやすい要約もありがとうございました!
いただいたボタンの値のCSSの追加で、Mac×Safariとiphone×Chromeでボタンが消える問題、解決しました!!!
感動して鳥肌が立ちました。本当にありがとうございます!
自分では絶対にそちらのサイトにも辿り着けませんでした、、CSSの知識も英語で調べるスキルも身につけねばと思いました。
Akira様、本当にありがとうございました。感謝の気持ちでいっぱいです!
助けていただきありがとうございました。
Topic starter
2022年7月9日 08:49
わいひら様、リフィトリー様、mk2様
この度はお忙しい中、解決までサポートしていただき、ありがとうございました。
環境も違う中で調べていただき、親身になって解決方法を探してくださり、とても心強かったです!
親切にしていただきありがとうございました。とにかくお気持ちが嬉しかったです。
他にも投稿をご覧になって、調べていただいた方がいらっしゃいましたらありがとうございます。
みなさまのおかげで解決いたしました!!!
これからCocoonで素敵なサイトを作ってまいります。
こちらのフォーラム含めてCocoonが大好きです。
今後ともよろしくお願いいたします。
Topic starter
2022年7月9日 11:46
追記です。
午前中のチェックではチェック不足で気づかなかったのですが、改めて編集していてわかったことがありました。
わいひら様に更新していただいた最新のテーマファイルをアップデートする前に作成したリンクボタンは、Akira様のCSSコードを追加してもホバー時に消えてしまう現象が変わりませんでした。
記事を複製しアップし直しても反映されず。
テーマファイル更新後のリンク作成がマストだとわかりました!
これにてトピック解決済みとさせていただきます。
本当に皆様、ありがとうございました!良い週末をお過ごしください。
mk2 reacted
2022年7月9日 12:46
@wapcereal さん
もしよろしければ、テーマファイル更新後の状態で、以下のテストをしていただけないでしょうか。
① 追加した以下の CSS を削除します。
.btn:hover { filter: opacity(0.7); opacity: 1; }
② 代わりに以下の CSS を子テーマの style.css に追加します。
.btn-red { border-color: #e60033; }
③ https://cerealnumber.net/働くover30が共感できる韓ドラ/ の「Netflixで見る」ボタンをホバー時に正常に表示されるかをご確認いただきたいです。
---
filter より opacity がブラウザに負荷をかけないため、なるべくなら opacity を使うのがいいと思ったのがテストをしていただきたい理由です。
わいひら reacted
Topic starter
2022年7月9日 14:42
Akira様
ご連絡ありがとうございます。
試してみました!
borderだからきっとボタンの枠線がどうにかなるのだろうと想像していたのですが、、違うのですね!
CSSを①から②に変更してみると、
赤ボタン使用のページ( https://cerealnumber.net/働くover30が共感できる韓ドラ/ )は変化なく、
ホバー時はボタンが白味がかり、ボタンが消えることはありませんでした。
ボタンテストページを再度公開状態にして確認したところ( https://cerealnumber.net/ボタンtest/ )
やはり、赤ボタンだけは消えることはなく正常です!
当然かもしれませんが、他の色はAkiraさんにCSSをいただく前の状態に戻りました。
以上がMac×Safari環境です。
iPhone×Chromeでは、
赤ボタンは問題なし、
他の色のボタンは、新しいタブで開く小・中ボタンが訪問後に消える状態に戻りました。
iPhone×Safari環境→変化なし正常
Mac×Chrom→変化なし正常
以上です!
自分の使用するボタン各色で、同じようにCSSを追加してあげたら良いのでしょうか。
さらに良い方法まで考えてくださってありがとうございます!
2022年7月9日 17:58
@wapcereal さん
お手数をおかけしました。ありがとうございました。お試しいただいたおかげで、対応方法がはっきり分かりました。
親テーマに変更が入ると思いますので、wapcereal さんが CSS を変更されるご必要はないと思います。修正が入った親テーマにアップデート後は、今回追加した CSS を子テーマの style.css から削除なさってください。
>> わいひらさん
ブラウザのバグの可能性が高い今回の現象は、以下のいずれかで対応できます。
- opacity ではなく filter: opacity() でホバー時に透明にする。
- border-color を transparent で透明にせず、背景色と同じ色にする。
border-color を背景色と同じ色にするのがいいとは思いますが、Gutenberg エディターのことや変更の手間を考えると filter を使うのもありだと思います。
2022年7月9日 19:40
border-color を背景色と同じ色にするのがいいとは思いますが、Gutenberg エディターのことや変更の手間を考えると filter を使うのもありだと思います。
GitHubファイルをアップしておきました。
------------------------------------------------
https://github.com/yhira/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------
border-colorにしたいところですが、エディターや本部に背景色があるスキンやカスタマイズにも問題がないようにfilter: opacity()の方を使わせていただきました。
解決方法をご提案くださりありがとうございます!
僕だったらこのSafariの不具合にたどり着けなかったと思います。
wapcereal reacted
Topic starter
2022年7月9日 21:39
Akira様
最後までご丁寧に指導してくださって、本当にありがとうございました!
わいひら様へのご提案まで、ありがとうございます。
わいひら様
最新ファイルありがとうございます。
早速アップデートしまして、ボタンの消える問題が、これまで試してきたどの環境でも発生しなくなりました!
ありがとうございました!
わいひら reacted
2022年7月10日 17:22
ご確認いただきありがとうございます!
Akiraさんありがとうございました。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。