現在「みるらいと」スキンを適用中です。

モバイルユーザビリティ・モバイルファーストを考える | 雑談 | Cocoon フォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
モバイルユーザビリティ・モバイルファー...
 
共有:
通知
すべてクリア

モバイルユーザビリティ・モバイルファーストを考える  


みょこ
(@ukigumo413)
Trusted Memberサイト
結合: 2年前
投稿: 50
みょこ - Twitterみょこ - Skype
2020年2月23日 08:41  

マウスオーバー時の装飾の必要性についてみなさんの意見をくださいから分けました。

アクセスの8~9割がモバイルというサイトがあるので、最近モバイルユーザビリティ・モバイルファーストの観点からCSSの書き直しをやっています。

それで、「こういうこと考えてこうしています」とか「これ気になっています」という情報を共有できたらと思ってトピック立てました。


あれはんどろわいひら 件のいいね!
引用
みょこ
(@ukigumo413)
Trusted Memberサイト
結合: 2年前
投稿: 50
みょこ - Twitterみょこ - Skype
2020年2月23日 09:04  

まず基本的なCSSの書き方です。

/************************************
** ▼モバイルファースト (全環境に共通のデザイン) 
************************************/
 :
 :
 :
 :
 :
 :
/************************************
** ▼スマホのみで適用させたいものがある場合に記述する
************************************/
@media screen and (max-width:834px) {
 :
 :
 :
 :
 :
 :
}
/************************************
** ▼タブレット用デザイン
************************************/
@media (min-width: 835px) {
 :
 :
 :
 :
 :
 :
}
/************************************
** ▼PC用デザイン
************************************/
@media (min-width: 1024px) {
 :
 :
 :
 :
 :
 :
}

というように、min-widthを基準にしていきます。

〇px以上の時(画面が大きい時)に読み込むものを増やしていくことになります。

This post was modified 9か月前 by みょこ

返信引用
みょこ
(@ukigumo413)
Trusted Memberサイト
結合: 2年前
投稿: 50
みょこ - Twitterみょこ - Skype
2020年2月23日 09:09  

でこちらが本題というか。

自分のスキルが低くてまだ導入できていない視覚効果なのですが。

ページを読み込んだら、上からでも下からでも横からでもいいので、少しふわっとスライドインしてくるようなエフェクトをかけたいのですが、どこに設定したら一番記述が少なくて済むんでしょうかね…

というのはメニュー・通知・おすすめカードなど設定していくと、どのページにも表示される部分が増えて、モバイルで通知やおすすめカードなどのリンクをクリックしてページを移動した際に、ページが移動したかどうかわかりづらいんですよね。

なので、ページの読み込みがなされたときに動きを出したいんです。


返信引用
みるみ
(@mirumi)
Reputable Memberサイト
結合: 1年前
投稿: 288
みるみ - Twitter
2020年2月23日 10:16  

※なぜか403になってレスできないのでテスト


返信引用
みるみ
(@mirumi)
Reputable Memberサイト
結合: 1年前
投稿: 288
みるみ - Twitter
2020年2月23日 10:24  

※すみません、なぜか今回のレスだけセキュリティで弾かれて403になってしまうので、テキストを画像化してレスしてみます。


返信引用
みょこ
(@ukigumo413)
Trusted Memberサイト
結合: 2年前
投稿: 50
みょこ - Twitterみょこ - Skype
2020年2月23日 10:44  

閾値はcocoonが基本的にこの数字でデザインを変更しているため、合わせておかないと変なところでデザインが変わってしまうからです~!

テーマエディターでCocoon Childのstyle.cssを開いたら、ここを閾値に設定されています。

ですので他のテーマが違うサイズを閾値にしている場合は、それに合わせたほうが良いです!


返信引用
みょこ
(@ukigumo413)
Trusted Memberサイト
結合: 2年前
投稿: 50
みょこ - Twitterみょこ - Skype
2020年2月23日 11:02  

@mirumi

はー…cssでどうしたらと悩んでいたのですが、JavaScriptかjQuery…

JavaScriptが中途半端な知識しかなくて敬遠していましたorz

しかしやりたいことがそれでできるなら覚えられるかもしれないので、ちょっと挑戦してみます!


返信引用
みるみ
(@mirumi)
Reputable Memberサイト
結合: 1年前
投稿: 288
みるみ - Twitter
2020年2月23日 11:20  

あ、そういえばCocoonは834でしたね。笑
自分がいじりすぎてて忘れていました…m(__)m

おっしゃるとおり、テーマとの整合性はかなり大事だと思います!

先ほど書いた2つのコードは、意味は同じものです(JavaScriptだけかjQueryを使っているか)。ページの読み込み完了時に実行される文章ですので、あの中に「スライドインしたときのエフェクトだけを書いたクラスを足す」という処理を書く感じになります。

極簡単な一例ですが(実用するときは色々な兼ね合いがあるのでこのまま使うのは微妙です)。

↓jQuery

$(document).ready(function(){
$('.post-card').addClass('is-active');
});

↓CSS

.is-active{
opacity: 1;
transform: translateX(-30px);
transition: 0.3s all ease-in-out;
}

もしくは、さっきも書きましたが@keyframesとanimationを使うのも良いと思います。この場合もanimationプロパティを持ったクラスの付与をJSでやってもいいですし。


わいひら, さる子みょこ 件のいいね!
返信引用
みょこ
(@ukigumo413)
Trusted Memberサイト
結合: 2年前
投稿: 50
みょこ - Twitterみょこ - Skype
2020年2月24日 03:38  

PCでもモバイルでも、大きすぎる画像で縦スクロールしないように以下のような設定をして、メディアファイルへのリンクを必ず貼ってもらうようにしています。

main img{
max-height: 60vh;
width: auto;
}

画面の高さの60%で表示する、という設定です。

そこそこお年召されていて、PCがそこまで得意ではない方だと、なぜかエディタ右側の画像サイズの設定をし忘れることが多いようで…


返信引用
みるみ
(@mirumi)
Reputable Memberサイト
結合: 1年前
投稿: 288
みるみ - Twitter
2020年2月24日 17:12  

すみません、話の流れがよく分かりませんが…。

そのカスタマイズは、そもそも画像はメインカラムの横幅でFitされますし、ものすごく縦長の画像を用意したときしか意味がないのでは…?と思いました。しかもその場合はwidthがautoなのでさらに長っ細くなってしまいますし…。

どちらかというと用意する画像から考えたほうがいいかもと思いました。
余計なおせっかいでしたら申し訳ありません!


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11170
わいひら - Facebookわいひら - Twitter
2020年2月24日 20:31  
投稿者:: @ukigumo413

なので、ページの読み込みがなされたときに動きを出したいんです。

ページを移動したときCSSだけでも、animationを利用すれば、視覚効果はできるかと思います。

ここら辺が参考になるかと。

【CSS3】@keyframes と animation 関連のまとめ - Qiita 

CSSアニメーション 入門 - Qiita


返信引用
かうたっく
(@kautakku)
メンバーサイト Moderator
結合: 3年前
投稿: 4765
かうたっく - Facebook
2020年2月25日 03:45  
投稿者:: @ukigumo413

メニュー・通知・おすすめカードなど設定していくと、どのページにも表示される部分が増えて、モバイルで通知やおすすめカードなどのリンクをクリックしてページを移動した際に、ページが移動したかどうかわかりづらいんですよね。

とりあえず?
本題は質問コレ。って感じですかね?

 

ページが変わってもファーストviewが同じ。って話。

 

ってな感じで、他解決策を考えてみるのも良いカモ?
全く頭が回ってません。そしてノープランです 🤗 


返信引用
Akira
(@akira)
Honorable Memberサイト
結合: 3年前
投稿: 647
Akira - FacebookAkira - Twitter
2020年2月25日 12:52  

「ページを読み込んだら」であれば、CSS のみでいけます。

.content-in が下からフェードインする例は、こんな感じです。

.content-in {
  animation: fade-in .6s cubic-bezier(0, 0, .2, 1);
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
}

トピックの主題が「 モバイルユーザビリティ・モバイルファーストを考える」なので、イージングにこだわるといいかもしれません。

↑ の CSS のイージングは、マテリアルデザインの Easing の 1 つ Decelerated easing 。このイージングは、画面の外から中に入ってくるモーションに適しています。


わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11170
わいひら - Facebookわいひら - Twitter
2020年2月25日 18:24  

Akiraさんのコードの動きの確認用に、CodePenにのせておきました。
https://codepen.io/yhira/pen/abOpXzW


Akiraさる子 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11170
わいひら - Facebookわいひら - Twitter
2020年2月25日 23:04  

Akiraさんが書かれた Easing リンク先の日本語訳。

【翻訳してみた】マテリアルデザイン - 速度について|Iori Iwaki|note 

動作が気持ち良い。動きの速度の参考に。


チャンビア🍺Akira 件のいいね!
返信引用

返信する

投稿者名

投稿者メールアドレス

タイトル *

許可された最大ファイルサイズ 5MB

 
プレビュー 0リビジョン 保存しました
共有:
スポンサーリンク
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

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

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

サービス運営期間:2年4ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2020/12/31まで)。

クーポンコード:PK4JK4RJ

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

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

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

サービス運営期間:2年2ヶ月

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

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

サービス運営期間:17年

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

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

サービス運営期間:4年

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

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

サービス運営期間:4年

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