サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2020年5月21日 11:59
質問する場所を間違えていたら申し訳ありませんm(_ _)m
少し前にiOSがアップデートされてiPhoneでもhover.activeが効くようになり、自分のブログでも確認できました。
しかしwordpressからログアウトした状態で自分のブログを確認するとhover.activeが効いていません。
cocoonの問題なのかwordpressの問題なのか、はたまたiPhoneの問題なのかサッパリですが、原因が分かる方いらっしゃいましたら教えて頂きたいですm(_ _)m
ブログタイトルに触れるとアイキャッチ画像が浮くようになっています（カルーセル除く）
----------------------------------------------
サイト名：RamiRamiらみらみ
サイトURL： https://tadanosyuhu.com
ホームURL： https://tadanosyuhu.com
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン：5.4.1
PHPバージョン：7.3.17
ブラウザ：Mozilla/5.0 (iPhone; CPU iPhone OS 13_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1 Mobile/15E148 Safari/604.1
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：ja-jp
----------------------------------------------
テーマ名：Cocoon
バージョン：2.1.5.4
カテゴリ数：7
タグ数：12
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.1
style.cssサイズ：4389バイト
functions.phpサイズ：734バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：5
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：1
WEBフォントLazy Load：0
----------------------------------------------
利用中のプラグイン：
Akismet Anti-Spam 4.1.5
Contact Form 7 5.1.9
EWWW Image Optimizer 5.3.2
Font Awesome 4.0.0-rc20
Jetpack by WordPress.com 8.5
Kattene 1.4
Regenerate Thumbnails 3.1.3
Simple Tags 2.5.7
TinyMCE Advanced 5.4.0
WebP Express 0.17.3
Word Balloon 4.8.16
----------------------------------------------
2020年5月21日 15:03
少し前にiOSがアップデートされてiPhoneでもhover.activeが効くようになり
このへんのことは、さっぱりわからないのですが、私のiphoneで、エントリーカードをタップすると、プレビューウィンドウが開くまでの一瞬だけ、エントリーカードに影が表示されるようです。
このあたりの事情には、全く通じていませんので、ただ、他の人の環境では、どうなの？的な書き込みにしかなっていません。
とりあえず、ブラウザのキャッシュをクリアするとか、iosを13.5にアプデするとか、ぐらいしか、書けません。
お役にたてませんで・・
トピックスターター 2020年5月21日 16:29
@leafytree さん
試していただきありがとうございます！とても参考になりましたm(_ _)m
iOSのアップデートとキャッシュのクリアをしてみましたが変わりませんでした・・・。
ご協力ありがとうございます*^^*
2020年5月21日 16:41
こんにちは。
ソース拝見しましたが、「ブログカードのリンク自体をクリックするとアイキャッチの画像だけちょっと浮く」ようになっているようです。
:hover要素はブログカードのリンク自体に一応効いてはいるものの、「背景を白にする」などなので視覚的に見えてはいません。
一方:activeですが、ご存知かもしれませんがこれは「クリックしているときにだけ効くもの」です（一番最初のトピック文を読んだ感じhoverとactiveを混同されているようにも思えましたので。違いましたら申し訳ありません）。
で、:hoverですが、これはスマホでのクリック時にも適用されます。
なので一般的には:hover要素だけ用意しておけば問題はないはずです。
今回ですと…。
a.widget-entry-cards:hover {
box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.2); //中身の効果は適当です
}
のような感じなるかと。サムネだけに適用させたい場合は
a.widget-entry-cards:hover img
みたいなCSSセレクタを使うといいと思います。
2020年5月21日 22:08
スマホでの表示は一瞬の短い時間の場合が多いので、私はあまり気にしていなかったのですが、「ios hover active」で検索したら、 以下のような記事を見つけました。
スマホのOSもどんどん新しくなっているので、現時点でも同じことが言えるのかどうかわかりませんが、参考程度ということで、リンクを貼ってみます。
OS Safari で、タップ時に :hover や :active を有効にする
【CSS】スマホでhover・activeが効かない?わずか2分の対処法
タッチデバイスでCSSの:activeや:hoverを機能させる。
わいひら reacted
2020年5月21日 22:33
らみらみさんの場合は、スマホだけで、運営されていらっしゃるので、メインターゲットもスマホユーザーということになりそうなので、指が離れた時点で発火する hover より、 やはり、active で、ある意味、正解なのかもしれませんね。
ログアウトしたら、表示されない理由はわからないままですけども。
2020年5月21日 23:44
そうだ、解決済み、という事になってますけど、基本に戻って、iphoneを再起動してみるっていうのは、もう試されたのでしょうか？
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。