リンクボタンは添付画像の部分のことでしょうか。
実際に、Safariでのホバー時にはどのような表示になっているのでしょうか。スクリーンショットもいただければ幸いです。
※僕はSafari環境持っていないため、スクリーンショットを見てもわからない可能性があるのでご了承ください。

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

はい、添付画像のリンクボタンについてです。説明が悪く申し訳ありません。

添付写真が上下２段、別の画像になっていて、

上段画像「赤ボタン＆黒の矢印カーソル」がホバー前、

下段画像「ボタンなし＆白の人差し指カーソル」がホバー中の状態です。

よろしくお願いいたします。

前略、wapcerealさん

今回のボタンの件との関係はわかりませんが、子テーマのCSSファイルにBOMと思われる余分な文字があるようです。

仮に今回の件と無関係であっても、削除しておいた方が無難です。

ちなみに、この文字はテーマエディター上では見えないので、気づきにくいものです。

wapcerealさん

HTMLやCSSを書いたり、編集したりするときは文字コードをUTF-8(BOMなし)で扱うことができる適切なテキストエディタを用いると良いような気がします。

Macですと「CotEditor」が良いかもしれません。

CotEditor

https://coteditor.com/

文字コードをUTF-8 BOMなし(UTF-8N)でファイル保存をする方法

https://www.1-firststep.com/archives/2258

wapcerealさん

また、WordPressを日本語環境で利用する場合は、プラグインの「WP Multibyte Patch」のインストールは必須なんだそうです。

インストールしておいた方が無難かもしれません。

WordPress５から無くなったWP Multibyte Patchは必須なので手動インストールしましょう

https://yuki-stock.com/2019/01/09/hello-world/

WP Multibyte Patchは必要か不要か？具体的に何をしているか見てみた

https://yws.tokyo/wp-multibyte-patch/

wapcerealさん

Cocoonをお使いの場合は、プラグインの「Classic Editor」は使わないでもクラッシックエディタにできます。

Cocoon設定の「エディター」タブの「Gutenbergエディターを有効にする」のところのチェックを外して、「変更をまとめて保存」ボタンで確定すると、クラッシックエディタになります。

wapcerealさん

私もWindowsしか手元にないので、症状は見ることができていません。

リフィトリー様

お調べいただきありがとうございます。

また、こんなに丁寧に教えてくださって感謝いたします！

教えていただいたことを試しました。

・クラシックエディターがプラグインなしで使用できる→プラグイン削除しました

・プラグインの「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とみなさまと共に今後頑張ろうと思えました！

今後ともよろしくお願いいたします。

wapcerealさん

回答者側に、「Mac + Safari」の環境をお持ちの方が限りなく少なく、事象の確認等が難しいということが、あると思います。

Safariの不具合ではないか・・・という疑いは持ちますが・・・。
（確証はなく、ただの疑いです。）

少し試していただきたいのですが、カラムの背景色を白以外にしていただいて、ボタンにマウスオーバーするとどうなるのか、見せていただけないでしょうか。
（ボタンに対して透過がきかずに、真っ白になって、背景色と同化しているのではないか・・・という疑いを持っています。）

その動画があると助かります。

mk2様

ご投稿ありがとうございます。

Mac+Safari環境の方はとても少ないのですね。

mk2様に教えていただいたように、メインカラムの背景色を変更してみました。

https://cerealnumber.net/ボタンtest/

Mac+Safari環境ですと添付動画のように文字とボタンが背景と一体化して消えてしまいますが、Chromeはやはり問題なしです。

今後、私のサイトを見てくださる方が現れても同環境での閲覧は少ないであろう！ということから、Safariの不具合が直ることを気長に待ちながら、気にせずChromeできちんと更新していこうと思います。

ご回答、とても励みになりました！

同じ環境で確認できないにもかかわらず、親身になってアドバイスしていただき、心より感謝いたします。

ありがとうございました。

wapcerealさん

ありがとうございます。

私の予想と違って、完全消えてしまいますね。

もしかすると、hover疑似クラスの中の「transition」が影響しているのでしょうか・・・。
（まだちよっと分からないですが・・・）

以下を見ると、「transition」はhover疑似クラス内ではなく、元々の要素に対して指定しているようです。

https://developer.mozilla.org/ja/docs/Web/CSS/transition

【追記】

すみません、しばらく離席しなくてはなりません・・・。

ボタンのhoverに関係するとしたら、添付画像の部分ですね。

ただ大きなボタンのホバーCSSも全く同じなので、何が影響しているのだろうか…。

投稿者:: @mk2_mk2

以下を見ると、「transition」はhover疑似クラス内ではなく、元々の要素に対して指定しているようです。

https://developer.mozilla.org/ja/docs/Web/CSS/transition

こちらを擬似クラスでなく、元々の要素で修正してみました。
以下のファイルでSafari上にて確認してみていただければ幸いです。

------------------------------------------------
https://github.com/yhira/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------

Macを少しだけ借りて、アクセスしてみたのですが、症状は再現しませんでした。

OSやsafariのバージョンが違うせいか、はたまた、トビ主さん特有の環境によるものなのか、、、

wapcerealさんがご利用のSafariは、最新バージョンっぽいんですよね。

投稿者:: @wapcereal

ブラウザ：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」では問題なかったです）

私の借りたMacは最新バージョンのSafariではなかったのかもしれません。

wapcerealさん曰く「手持ちのMacBookとiMac、どちらも同じことが起こります」とのことですので、両方ともバージョン15.5だとすると、mk2さんご案内のように15.5 特有の事象という可能性もあり得ないことではないのかな、と思ったりします。

わいひら様

調べていただき、そしてファイルのアップデートまでご対応くださいましてありがとうございました！

とても残念なのですが、、、やはり解決しませんでした。

先にお伝えした時点では、ボタンテストページ（ https://cerealnumber.net/ボタンtest/）の大きいボタンは、リンク先のないただのボタンデザインだったので、リンク先のあるボタンに修正して記事を更新しました。

リンクを追加したことで、改めてわかったことがあります。

各環境別の現象です。

Mac×Safari環境　　※動画を添付します。

・大ボタンをクリックしてリンク先に飛んでから改めて元のページに戻ると、大ボタンもホバー時に左半分だけ消えるようになることがわかりました

・ページを再読み込みすると、大ボタンは問題ない（ホバー時に全体が白味がかる）状態に戻ります

・「リンクを新しいタブで開く」設定の大ボタンで飛んだ際はページに戻っても大ボタンの左が消えてしまうことはありません

・小・中ボタンはホバー時にやはり全体が消えます

iPhone×Safari環境→問題なし

Mac×Chrom→問題なし

iPhone×Chrom

「リンクを新しいタブで開く」の小と中のみ、訪問済ボタンが消えることがある。大は消えない。

※こちらの動画は次の返信に添付します

いざとなったら、ワードプレスの設置からやり直すことで解決する可能性もあるでしょうか？

記事もアクセスもない今の状態なら初期化も仕方ないかと思っております。

引き続きこちらでも色々確認してまいります。

検証などに時間がかかり、返信まで時間がかかりまして申し訳ありません。

お忙しい中、ご対応くださりありがとうございます！

iPhone×Chrome環境で、新しいタブでリンクを開いた後に、訪問済ボタンが消える現象のキャプチャーはこちらです。

カーソル位置を録画できなかったので、わかりにくいですが、

「リンクを新しいタブで開く中」のボタンでリンクを開き、戻るとそのボタンが消える、という状況を録画しました。

mk２様

お調べいただき、ありがとうございます！

私にはmk2様のおっしゃることを理解するので精一杯で詳しいことは分かりませんが、確かにホバーの問題ではなかったのかもしれません。

せっかくわいひら様もファイルを作っていただいたのにとても残念です。。

サポートありがとうございます！

リフィトリー様

Mac環境で確かめていただいてありがとうございます！

やはり、私のパソコンやワードプレスがおかしいのかもしれません。

ワードプレスの初期化も検討します。泣

お力添えいただきありがとうございます！

wapcerealさん

改善しませんでしたか・・・。

お役に立てず、申し訳ないです。

当てずっぽう感満載ですが、そこかなと、かけてみたのですが。

おそらくWordPressというよりは、Safariの何かではないかと思います。
（確証はまったくなく、推測です。）

ただ、Safariでも、バージョン違い？か何かの要因によって、動作が異なる様子ですね。
正直、良く分からないところです。

Safariって、他のブラウザとは違う動作をすることがある印象なんですよね。
（私が普段使わないので、そういう印象を持ってしまうだけかもしれないです）

今のところ、他に考えられそうなものが見つかっていないです。
（解消できるものならば、解消したいですが）

@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;
}

Akira様

おはようございます。ご投稿ありがとうございます。

参照サイトとわかりやすい要約もありがとうございました！

いただいたボタンの値のCSSの追加で、Mac×Safariとiphone×Chromeでボタンが消える問題、解決しました！！！

感動して鳥肌が立ちました。本当にありがとうございます！

自分では絶対にそちらのサイトにも辿り着けませんでした、、CSSの知識も英語で調べるスキルも身につけねばと思いました。

Akira様、本当にありがとうございました。感謝の気持ちでいっぱいです！

助けていただきありがとうございました。

わいひら様、リフィトリー様、mk2様

この度はお忙しい中、解決までサポートしていただき、ありがとうございました。

環境も違う中で調べていただき、親身になって解決方法を探してくださり、とても心強かったです！

親切にしていただきありがとうございました。とにかくお気持ちが嬉しかったです。

他にも投稿をご覧になって、調べていただいた方がいらっしゃいましたらありがとうございます。

みなさまのおかげで解決いたしました！！！

これからCocoonで素敵なサイトを作ってまいります。

こちらのフォーラム含めてCocoonが大好きです。

今後ともよろしくお願いいたします。

追記です。

午前中のチェックではチェック不足で気づかなかったのですが、改めて編集していてわかったことがありました。

わいひら様に更新していただいた最新のテーマファイルをアップデートする前に作成したリンクボタンは、Akira様のCSSコードを追加してもホバー時に消えてしまう現象が変わりませんでした。

記事を複製しアップし直しても反映されず。

テーマファイル更新後のリンク作成がマストだとわかりました！

これにてトピック解決済みとさせていただきます。

本当に皆様、ありがとうございました！良い週末をお過ごしください。

@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 を使うのがいいと思ったのがテストをしていただきたい理由です。

Akira様

ご連絡ありがとうございます。

試してみました！

borderだからきっとボタンの枠線がどうにかなるのだろうと想像していたのですが、、違うのですね！

CSSを①から②に変更してみると、

赤ボタン使用のページ（ https://cerealnumber.net/働くover30が共感できる韓ドラ/ ）は変化なく、

ホバー時はボタンが白味がかり、ボタンが消えることはありませんでした。

ボタンテストページを再度公開状態にして確認したところ（ https://cerealnumber.net/ボタンtest/ ）

やはり、赤ボタンだけは消えることはなく正常です！

当然かもしれませんが、他の色はAkiraさんにCSSをいただく前の状態に戻りました。

以上がMac×Safari環境です。

iPhone×Chromeでは、

赤ボタンは問題なし、

他の色のボタンは、新しいタブで開く小・中ボタンが訪問後に消える状態に戻りました。

iPhone×Safari環境→変化なし正常

Mac×Chrom→変化なし正常

以上です！

自分の使用するボタン各色で、同じようにCSSを追加してあげたら良いのでしょうか。

さらに良い方法まで考えてくださってありがとうございます！

@wapcereal さん

お手数をおかけしました。ありがとうございました。お試しいただいたおかげで、対応方法がはっきり分かりました。

親テーマに変更が入ると思いますので、wapcereal さんが CSS を変更されるご必要はないと思います。修正が入った親テーマにアップデート後は、今回追加した CSS を子テーマの style.css から削除なさってください。

>> わいひらさん

ブラウザのバグの可能性が高い今回の現象は、以下のいずれかで対応できます。

• opacity ではなく filter: opacity() でホバー時に透明にする。
• border-color を transparent で透明にせず、背景色と同じ色にする。

border-color を背景色と同じ色にするのがいいとは思いますが、Gutenberg エディターのことや変更の手間を考えると filter を使うのもありだと思います。

投稿者:: @akira

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の不具合にたどり着けなかったと思います。

Akira様

最後までご丁寧に指導してくださって、本当にありがとうございました！

わいひら様へのご提案まで、ありがとうございます。

わいひら様

最新ファイルありがとうございます。

早速アップデートしまして、ボタンの消える問題が、これまで試してきたどの環境でも発生しなくなりました！

ありがとうございました！

ご確認いただきありがとうございます！
Akiraさんありがとうございました。