サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020年2月19日 09:49
CSSカスタマイズに関して皆さんに投げかけたいことがあります。最初、雑談の返信で投げかけましたが、トピックを立てたほうが良いと思い再投稿します。わいひらさん、面倒なことしてごめんなさい。
では、本題。
マウスオーバー時の装飾って、必要最小限っていうか、もう不要になりつつあるんじゃないかと思うようになったのですが、みなさんはどう思いますか？
ウェブサイトの表示にオリジナリティを持たせるため、CSSをカスタマイズしてる方は多いと認識しています。ですが、AMPにおけるCSSのファイルサイズに制限あったり、そもそもモバイルからのアクセスが大多数になってる最近の状況を加味すると、マウスオーバー時の表示カスタマイズの必要性がすごく低くなっていると感じます。
マウスオーバー時の装飾が少数派になりつつある中、ウェブサイトのオリジナリティを出すための装飾の方法そのものが変わりつつあるのかなぁと感じているので、みなさんの意見を頂戴したくトピックとして投稿しました。
2020年2月19日 13:21
僕はマウスオーバーのカスタマイズ、とても好きです。最も「動き」に近い挙動を手軽に実装できますし、transitionなどの抱負なプロパティは編集も楽しいです。
実際、自分のブログも多くの:hover要素を使っています。
それに加え、いくらモバイルのアクセスが多めとはいえCSSの追記量によるデメリットは僅かと考えます。
しかしampの利用が前提ならおっしゃる通りかもしれませんね。そもそもpcでのアクセスを想定されてないですし。
あれはんどろ reacted
2020年2月19日 16:32
そもそもモバイルからのアクセスが大多数になってる最近の状況を加味すると、マウスオーバー時の表示カスタマイズの必要性がすごく低くなっていると感じます。
たしかに＾＾
スマホで見てhoverしてもイマイチだ。って思ったことはあります。
いうのであれば、PCビューをメインに作られているテーマでもあるのかな。
PCビューで幅を狭くしていくと、マウスを上に置けば、タブレットびゅー・モバイルビューと
CSSがどんどん追加され、スマホでデザインが変わるPCファースト的なテーマでもあると思います。
モバイル端末から見て要らない。っちゃいらない時代が来てるかもしれないですね。
とは思った事はあります＾＾
あれはんどろ reacted
2020年2月19日 19:58
訪問者が全部モバイル端末みたいな、完全なモバイルファーストサイトだと、必要ないっちゃ必要ないですよね。
hoverって結構余計なCSSサイズを持っていくんですよね。
不要になれば、作る方もかなり楽になるような気がします。
ただ僕の場合、パソコンで見たときにホバーエフェクトがないと、ちょっと寂しいと思ってしまうのも事実。
あれはんどろ reacted
2020年2月20日 00:41
エフェクトによると思います。
ホバーをしたら「テキストが出てくる」「画像が変わる」などは、モバイルでは有効ではありません。
けれど、ユーザーの操作を補助するエフェクトは、モバイルで非常に有効です。
マテリアルデザインでは、「ホバーした時・フォーカスした時・タップした時などにエフェクトがあると分かりやすいよね」と言っています。
This post was modified 5年前 3回 by Akira
2020年2月20日 09:17
たぶんですけど
タップしたときだけ出るデザインは、コンテンツを邪魔する位置になかったらいいかもですね？
常時表示される位置で表示されている要素なら
タップしたままの表示になるので、スマホ端末での閲覧では要らない・不要な気もします。個人的に
というのも、別の何もない場所をタップしないと、元に戻らない。というモバイルビューCSS特有なのがある気がするので。※伝わってるかなぁ？説明下手だぁ＾＾；
2020年2月20日 12:04
ホバーは、さておきモバイルで操作したときのエフェクトは分かりやすさや、操作の気持ちよさも含めて重要ですよね。
https://note.com/ioriiwaki/n/n986a5ff00733
機能追加が一段落したら、マテリアルデザインのスキンは作ろうとは思っているので、何かエフェクト参考になりそうなサイトがあれば、是非教え来たければ幸いです。
Google＋あたりが残っていれば、参考にしようと思ってたんだけど…。
2020年2月20日 15:41
Gmail や Google Map 、Youtube など Google のサービスは、全てマテリアルデザインが採用されています。参考にされるなら、Google のサービスがいいかもしれません。私が好きなのは、Google Arts & Culture 。
もしくは、CSS のみでマテリアルデザインを表現する Matter も参考になります。サンプル。
以前とは異なり、改修された現在のマテリアルデザインは拡張性が高いです。なので、1 番いいのはガイドラインを全部読むことかも。
This post was modified 5年前 by Akira
わいひら reacted
2020年2月20日 23:11
ありがとうございます！
全部ブックマークしておきました。
1 番いいのはガイドラインを全部読むことかも。
まさにこれですよね^^;
ここら辺と、織り交ぜながら理解を深めたいと思います。
Material Components for the web のドキュメントの日本語訳を作ってみた - Qiita
【翻訳してみた】マテリアルデザイン - モーションデザインを理解すること｜Iori Iwaki｜note
【翻訳】マテリアルデザイン - モーションデザイン｜Iori Iwaki｜note
あれはんどろ reacted
2020年2月21日 00:23
サンプルがめっちゃ参考になりますよね。
いずれにせよ、このトピックと書き込みがなかったら、見つけてなかったと思うので、良い機会になりました ?
ありがとうございます。
あれはんどろ reacted
2020年2月21日 09:53
モバイルとPCのデバイス単位での動作が全く違うイメージしかないです。
モバイル実機でのhoverは、強引にhoverアクションをチェックする勢いがないとその動作をチェックできなし、普通に記事を見に来たユーザーさんは、興味ない人が圧倒的に多い気がします。
※ユーザーより、運営者本位な気がする。
PCビューも幅の狭いものは、有効なのでそのままCSSが適応されてても良いけどampを気にする人は邪魔。って思うカモですね＾＾
モバイルビューでクリックする前・したあとの動作は、やっぱ。
クリック後が適応されっぱなのが気になるかも。
誰にも伝わらないようなマニアックな面なのかも。って思った❦
あれはんどろ reacted
2020年2月22日 04:17
まさにコレ最近ずっと考えていたんですよね。
今カスタマイズさせてもらっているサイトの管理者さんが、○○テーマみたいなマウスオーバー効果がほしいと何度もおっしゃるので、だったらそちらのテーマを購入いただいて、そのテーマをカスタマイズされているデザイナーさんに独自カスタマイズのお仕事お願いしたらいいと思いますよって全部断っているんですけれど。
モバイルでも意味がある視覚効果なら私も調べて取り入れますが、閲覧者の9割ぐらいモバイルユーザーなのにPCでしか見ることができないホバーエフェクト付けても…
でこちらが本題というか。
自分のスキルが低くてまだ導入できていない視覚効果なのですが。
ページを読み込んだら、上からでも下からでも横からでもいいので、少しふわっとスライドインしてくるようなエフェクトをかけたいのですが、どこに設定したら一番記述が少なくて済むんでしょうかね…
というのはメニュー・通知・おすすめカードなど設定していくと、どのページにも表示される部分が増えて、モバイルで通知やおすすめカードなどのリンクをクリックしてページを移動した際に、ページが移動したかどうかわかりづらいんですよね。
なので、ページの読み込みがなされたときに動きを出したいんです。
モバイルユーザビリティとかのタイトルで、別トピックにしたほうがよろしいでしょうか？
2020年2月22日 21:57
モバイルユーザビリティとかのタイトルで、別トピックにしたほうがよろしいでしょうか？
よろしければ、お願いします。内容はコピペで良いので。
僕もモバイル最適化や、エフェクト関係は、今後もいろいろ研究したり、いろいろ学んでいきたい部分です。
専門のトピックがあるとありがたいです。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。