サイドスライドの表示上の問題について

Simplicityの特徴 フォーラム 不具合報告 サイドスライドの表示上の問題について

  • このトピックには13件の返信、2人の参加者があり、最後にアバター画像わいひらにより11年前に更新されました。
13件の返信スレッドを表示中
  • 投稿者
    投稿
    • #24410
      壬生狼
      ゲスト

      こんばんは、またまたお世話になります。 今回も、アップデートお疲れ様でした。
      サイドスライド(スライドイン)メニューの実装、非常に素敵だと思います。
      使い勝手が良ければ本採用というところでしたが、いくつか表示上の問題があったので、報告させていただきます。

      まずは、Simplicity公式と、拙ブログでの表示上の問題です。
      http://netakiri.net/uploader/src/up0083.jpg

      共通の問題としては、グローバルメニューの項目が多い場合、フッターまでスクロールしないと全て表示できないというものと、一部のテキストが背景色と同化してしまって読めないというものです。

      私のブログの場合は背景まで白系色になってしまっていますが、これはサイドバーの色を白色に&色自体もCSSで上書きしているからかな?と素人ながらに思ったところであります。

      また、寝ログさんの場合は別の問題があって、フッターメニューのSearchがうまく動作していない模様。
      http://netakiri.net/uploader/src/up0084.jpg

      具体的には、Searchをタップすると一瞬だけサーチフォームが表示されますが、すぐに消えてしまうというものです。 こちらの問題は、Simplicity公式と拙ブログでは発生していません。

      今回も表示デバイスは少し前のAndroid機種(SO-01F Android 4.4.2搭載)のGoogle Chromeです。
      以上、ご確認願えればと思います。

      P.S.
      要望というか、アドバイスいただければありがたいのですが、最近Googleのウェブマスターツールで「タップ要素同士が近すぎます」「コンテンツのサイズがビューポートに対応していません」というユーザビリティ上のエラーが表示されるようになりました。

      前者は余白を確保すれば良さそうなので私でもできそうですが、後者に関してはviewportが指定されているはずにもかかわらず表示されるので、どうにかならないもんかと思っております。

      4月頃よりGoogleではモバイル向けのランキング要素にモバイル対応状況も含めるとしているので、多少なりとも状況を良くしておきたいものですが、私程度の知識と技量では何をしていいものやら、というところですので、アドバイスいただけると幸いです。

    • #24412
      壬生狼
      ゲスト

      おおっと、また書き忘れ失礼します。
      拙ブログのURLは以下になります。

      http://mytht.miburo666.info/

    • #24428
      アバター画像わいひら
      キーマスター

      こんばんは。
      不具合報告ありがとうございます。

      とりあえず、僕のページ(寝ログ、Simplicity)で出ている表示上の不具合は、ブラウザに古いキャッシュが残っていることが原因かと思われます。
      現に、キャッシュが更新されている僕のブラウザからは、正常表示されています。
      一度ブラウザをリロードするか、それでも改善されない場合は、キャッシュの削除を行ってみてください。

      その他の不具合は、テーマカスタマイザーのスタイルが最も優先されてしまうSimplicityの仕様からきているものと思われます。
      テーマカスタマイザーで設定したスタイルよりも、スライドインメニュー&サイドバーのスタイル(背景色)が優先されるようにスタイルを修正しました。
      Simplicity1.6.0にて修正されていると思います。
      http://wp-simplicity.com/simplicity1-6-0/

    • #24430
      アバター画像わいひら
      キーマスター

      コンテンツのサイズがビューポートに対応していません

      これは、基本的に水平スクロールが必要とされるページに表示されるようです。
      モバイル ユーザビリティ – ウェブマスター ツール ヘルプ
      コンテンツのサイズをビューポートに合わせる ? Web Fundamentals

      ただ、僕もウェブマスターツールでエラーの出ているページを確認してみたのですが、水平スクロールが出るようにはなっておらず、どうしたらよいものかと思っている次第です。
      これが、ページは要素のどれかが、端末幅以上にはみ出しているのなら僕もそこを修正するところです。けれど、特にはみ出していないのに、エラーが出ているので、僕も今のところは、どう対処してよいものかと言った感じです。ちょっと詳しい原因がわからないと何ともできません。

      ちなみに僕のサイトで、エラーが出ているページは以下などです。
      http://wp-simplicity.com/media-settings/
      http://wp-simplicity.com/how-to-start-adsense/
      http://wp-simplicity.com/simplicity1-5/

      それに今のところ、ウェブマスターツールでエラーの出ているページをPageSpeed Insightsのユーザーエクスペリエンスや、モバイル フレンドリー テストで、チェックさせてみましたが、今のところこちらのツールではエラーが出ていません。

      ですので、もう少し具体的な対応策が出るまで様子を見るしかないと思います。
      何か良い改善策などを発見した際には、ご報告いただけるとできるだけ対応したいと思います。

    • #24432
      壬生狼
      ゲスト

      こんばんは、早速のご対応ありがとうございます!
      大半の表示上の不具合(×ボタンや、Searchボタン)は、おっしゃるとおりキャッシュクリアで改善されました。 初歩的なことを失念していてお恥ずかしい……。

      ただ、現状でも私の端末だとグローバルメニュー(左側スライドインメニュー)が見きれるのが変わらずです。 挙動としては、スワイプするとグローバルメニューではなく、メインカラムがスクロールしてしまう感じです。 これは、グローバルメニュー項目の多いSimplicity公式でも、拙ブログでも改善されていません。 サイドバーの挙動と同じになれば問題ないのですが……。

      背景色に関しては、拙ブログでも修正されているのが確認できました、ありがとうございます!

      また、不具合とは関係のないお話にもご回答いただき、ありがとうございます。

      それに今のところ、エラーの出るページをPageSpeed Insightsのユーザーエクスペリエンスや、モバイル フレンドリー テストで、チェックさせてみましたが、今のところこちらではエラーが出ていません。

      そうなんですよね。 私も全く同じ状況で、問題のあるページをチェックしても問題無いと書かれているという。 タップ要素に関しても「修正を考慮」で、エラーになるほどのものでもなさそうですしね。

      こちらに関して何か解決のヒントになりそうなものを見かけましたら、ご報告させていただきますね。

    • #24437
      壬生狼
      ゲスト

      グローバルメニューの挙動について追記。

      なんとなく、サイドバーの追従領域と同じような動きをしている気がします。 スワイプすると、画面の表示領域最上部でスクロールがロックされて、ひたすら追従するような。

      試しに横画面で表示してみたところ、グローバルナビ項目の少ない寝ログさんの方でも同じ現象が発生。 高解像度デバイスだと表示領域が広がるので問題ないのかもしれませんが、当方の端末(1080*1920、FHD)の解像度が問題なのか、はたまた機種もしくはブラウザの問題なのか。

      もしわいひらさんの方で(これより低解像度デバイスをお持ちである前提ですが)、横向きなどでもやはり問題が発生しないようであれば、こちらの端末に問題があるのかもしれません。

      お手数ですがもう一度確認願えればと思います。

    • #24438
      アバター画像わいひら
      キーマスター

      あ、すいません。
      グローバルメニュー項目のことについて書くのを忘れていました。

      グローバルメニューの項目数のことに関しては、何も修正していません。
      というのも、数が多くなると、画面内に入らなくなるのはしょうがないからです。例えば、壬生狼さんのサイトでメニューがスライドインメニュー内に収まるように今回修正したとしても、もっとメニューを表示しているサイトでは、結局収まりきりません。
      なので、数が多いと見切れるのは何ともできないです。

      解決策としてはサイトに合わせて、収まるようにスタイルシートで調整していただくしかないかもしれません。

      挙動としては、スワイプするとグローバルメニューではなく、メインカラムがスクロールしてしまう感じです。

      ブラウザの確認ツールだと、メニューもスクロールできたのですが、Androidだとメニューをスクロールさせようとすると本文がスクロールしてしまうんですね;
      これはどうしたらいいんだろう…。
      メニューをスワイプするためのエリアを作るとかでいいのだろうか。
      何か改善策を考えてみます。

    • #24440
      壬生狼
      ゲスト

      何度も重ね重ね申し訳ないやらありがたいやらです。
      メニューが見きれるというのは表現が良くなかったですね、大変申し訳ありません。

      結局のところ問題としているのはスクロールの挙動のところで、ここがサイドバーと同じくメニュー項目がスクロールしてくれれば、初見で項目自体が見きれていても問題はないのですがね。

      こちらは特に修正なされていないとのことですが、本件については迅速なご対応によりほぼ解決できたので、「解決済み」としてトピックを閉じていただければと思います。

      今回も本当にありがとうございました!

    • #24441
      アバター画像わいひら
      キーマスター

      はい、Firefoxの動作確認ツールでは、スワイプできていたので見切れても問題ないと思っていました。
      問題は、そこではなかったのですね。

      それにしても、何でサイドバーでスワイプできて、メニューでスワイプできないのか今のところ全然わかっていません。
      あまり、夜遅くに考え込むと頭が冴えて眠れなくなってしまうので、明日ゆっくり考えたいと思います。

      貴重な報告ありがとうございます。パソコンブラウザメインで動作確認している僕には、気づかないところでした。

      トピックは、解決策を持っているプロ神様の降臨を、ほのかに期待してもう少しだけ開かせておいてください。
      明日になって、解決策を模索する頃には閉じさせていただきます。

    • #24442
      壬生狼
      ゲスト

      悪文で当惑させてしまって申し訳ないです。
      ブログを書いている以上、より伝わりやすく文章を書く方向で精進いたします!

      無料で使わせて頂いている上、夜遅くまでお付き合い下さり、誠にありがとうございました。
      プロ神様降臨を私も祈りつつ、ひとまず失礼いたします。

    • #24576
      壬生狼
      ゲスト

      こんばんは。 毎度お世話になっております。

      ウェブマスターツールにおける、モバイルユーザビリティーエラーに関して、こんな記事がありましたのでご報告。
      すでに目を通されているかもしれませんが……。

      モバイルフレンドリーテストに合格しているのにモバイルユーザビリティレポートでエラーが出る理由 | 海外SEO情報ブログ:
      https://www.suzukikenichi.com/blog/passing-mobile-friendly-test-but-mobile-usability-reports-errors/

      要は、古い情報を元に判定していて、最新の状態が反映されるまでに遅延があるということのようです。

      また、拙ブログではrobots.txtの書き方が古かったらしく、モバイルフレンドリーテストでもエラーが出ていたので、次の記事を参考に修正しました(主に、CSSやJSをクロール許可しました)。

      robots.txtを改善してGoogleにブログの構造を的確に伝えよう:
      http://naifix.com/robots-txt-improvement/

      なのでエラーに関して、Simplicityテーマ構造とは別のところに原因がある可能性大、です。 どのみち結果反映まで時間はかかりそうですが、ひとまずお耳に入れていただきたく思います。

      それでは。

    • #24587
      アバター画像わいひら
      キーマスター

      いえ、この書き込みで知りました。
      教えていただきありがとうございます。

      原則的に、モバイルフレンドリーテストで合格が出ていれば、Googleが要求するモバイル対応は完了していると考えてください。

      モバイルフレンドリーテストに合格しているのにモバイルユーザビリティレポートでエラーが出る理由 | 海外SEO情報ブログ

      これを見て、かなり安心しました。みなさん同様のエラーが出ていたのですね。

      一応、Simplicityを修正してみてこのサイトは、スライドインメニューをスラッシュできるようにしてみました。
      一応、仮想環境のAndroid Chromeで表示させると、スクロール出来たので多分改善したのではないかと思います。(ただ、Android Chromeの場合、最初にアドレスバーが表示されるので上にスクロールさせるとメニューの高さが合わずカクンと表示されます)
      よかったら確認してみてください。
      近いうちに、修正版をアップロードしようと思います。

    • #24591
      壬生狼
      ゲスト

      こんばんは。 件のエラーは割と広範に見られていたようですよね。
      懸念事項が一つ減り、私としても安堵しております。

      スライドインメニューのほうですが、こちらでも確認したところ問題点が解消されていて、ちゃんとスクロールできています。
      早期の対応、本当に感謝いたします!

      だいぶ長くなってしまいましたが、ご対応ありがとうございました!

    • #24593
      アバター画像わいひら
      キーマスター

      よかった^^確認ありがとうございます。

13件の返信スレッドを表示中
  • トピック「サイドスライドの表示上の問題について」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)