特典機能について

Safariでボタンをホバー時にボタンが消える | Cocoonテーマに関する質問 | 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. ブラウザ環境チェックツール

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

スポンサーリンク
Safariでボタンをホバー時にボタン...
 
共有:
通知
すべてクリア

[解決済] Safariでボタンをホバー時にボタンが消える


wapcereal
(@wapcereal)
Active Member
結合: 1か月前
投稿: 13
Topic starter  

対象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

----------------------------------------------


わいひら
(@yhira)
メンバーサイト Admin
結合: 5年前
投稿: 13626
わいひら - Facebookわいひら - Twitter
 

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


wapcereal 件のいいね!
wapcereal
(@wapcereal)
Active Member
結合: 1か月前
投稿: 13
Topic starter  

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

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

 

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

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

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

 

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

 


リフィトリー
(@leafytree)
メンバー Moderator
結合: 4年前
投稿: 6826
 

前略、wapcerealさん

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

 

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

 

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

 


わいひらwapcereal 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 4年前
投稿: 6826
 

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 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 4年前
投稿: 6826
 

wapcerealさん

 

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

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

 

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

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

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

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


わいひらwapcereal 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 4年前
投稿: 6826
 

wapcerealさん

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

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

 


わいひらwapcereal 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 4年前
投稿: 6826
 

wapcerealさん

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


wapcereal 件のいいね!
wapcereal
(@wapcereal)
Active Member
結合: 1か月前
投稿: 13
Topic starter  

リフィトリー様

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

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

 

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

 

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

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

 

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


mk2
(@mk2_mk2)
メンバー Moderator
結合: 1年前
投稿: 3636
 

wapcerealさん

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

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

 

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

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


わいひらwapcereal 件のいいね!
wapcereal
(@wapcereal)
Active Member
結合: 1か月前
投稿: 13
Topic starter  

mk2様

 

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

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

 

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

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

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

 

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

 

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

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

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


mk2
(@mk2_mk2)
メンバー Moderator
結合: 1年前
投稿: 3636
 

wapcerealさん

ありがとうございます。

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

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

 

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

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

 

 

【追記】

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


wapcerealわいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 5年前
投稿: 13626
わいひら - Facebookわいひら - Twitter
 

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


wapcereal 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 5年前
投稿: 13626
わいひら - Facebookわいひら - Twitter
 

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


wapcereal 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 5年前
投稿: 13626
わいひら - Facebookわいひら - Twitter
 
投稿者:: @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/
------------------------------------------------


リフィトリーwapcereal 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 4年前
投稿: 6826
 

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

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


wapcereal 件のいいね!
mk2
(@mk2_mk2)
メンバー Moderator
結合: 1年前
投稿: 3636
 

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」では問題なかったです)


wapcerealリフィトリー 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 4年前
投稿: 6826
 

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

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


wapcereal 件のいいね!
wapcereal
(@wapcereal)
Active Member
結合: 1か月前
投稿: 13
Topic starter  

わいひら様

 

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

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

 

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

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

 

各環境別の現象です。

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

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

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

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

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

 

iPhone×Safari環境問題なし

 

Mac×Chrom問題なし

 

iPhone×Chrom

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

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

 

 

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

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

 

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

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

 

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


wapcereal
(@wapcereal)
Active Member
結合: 1か月前
投稿: 13
Topic starter  

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

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

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

 


wapcereal
(@wapcereal)
Active Member
結合: 1か月前
投稿: 13
Topic starter  

mk2様

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

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

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

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


mk2 件のいいね!
wapcereal
(@wapcereal)
Active Member
結合: 1か月前
投稿: 13
Topic starter  

リフィトリー様

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

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

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

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


リフィトリー 件のいいね!
mk2
(@mk2_mk2)
メンバー Moderator
結合: 1年前
投稿: 3636
 

wapcerealさん

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

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

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

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

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

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

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


リフィトリーwapcereal 件のいいね!
Akira
(@akira)
Noble Memberサイト
結合: 4年前
投稿: 1055
Akira - FacebookAkira - Twitter
 

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

mk2, リフィトリーwapcereal 件のいいね!
wapcereal
(@wapcereal)
Active Member
結合: 1か月前
投稿: 13
Topic starter  

Akira様

 

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

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

 

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

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

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

 

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

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


wapcereal
(@wapcereal)
Active Member
結合: 1か月前
投稿: 13
Topic starter  

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

 

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

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

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

 

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

 

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

 

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

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

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


mk2リフィトリー 件のいいね!
wapcereal
(@wapcereal)
Active Member
結合: 1か月前
投稿: 13
Topic starter  

追記です。

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

 

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

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

 

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

 

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

 

 

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


mk2 件のいいね!
Akira
(@akira)
Noble Memberサイト
結合: 4年前
投稿: 1055
Akira - FacebookAkira - Twitter
 

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


わいひら 件のいいね!
wapcereal
(@wapcereal)
Active Member
結合: 1か月前
投稿: 13
Topic starter  

Akira様

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

試してみました!

 

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

 

 

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

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

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

 

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

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

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

以上がMac×Safari環境です。

 

 

iPhone×Chromeでは、

赤ボタンは問題なし、

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

 

 

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

Mac×Chrom→変化なし正常

 

以上です!

 

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

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

This post was modified 1か月前 2回 by わいひら

Akira
(@akira)
Noble Memberサイト
結合: 4年前
投稿: 1055
Akira - FacebookAkira - Twitter
 

@wapcereal さん

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

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

>> わいひらさん

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

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

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


wapcereal, わいひらmk2 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 5年前
投稿: 13626
わいひら - Facebookわいひら - Twitter
 
投稿者:: @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の不具合にたどり着けなかったと思います。


wapcereal 件のいいね!
wapcereal
(@wapcereal)
Active Member
結合: 1か月前
投稿: 13
Topic starter  

Akira様

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

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

 

 

わいひら様

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

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

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


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 5年前
投稿: 13626
わいひら - Facebookわいひら - Twitter
 

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


共有:
スポンサーリンク
SWELLと業務提携しています
WordPressテーマSWELL
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:4年

1年以上の契約をする場合は、クーポンコード入力でさらに50%割引キャンペーン中!
※BOX2 ~ BOX8プラン契約の場合

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは7日以内なら無料自動復旧可能
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:19年

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
×DBは手動で復旧(データ取得は無料)
×ファイルも手動で復旧(データ取得は無料)
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:3年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
×ファイルは手動復旧(データ取得は無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:6年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:6年

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