スマホの表示で右側が横ずれする件

Simplicityの特徴 フォーラム Simplicityについての質問 スマホの表示で右側が横ずれする件

  • このトピックには9件の返信、1人の参加者があり、最後にAkiraにより1年、 11ヶ月前に更新されました。
9件の返信スレッドを表示中
  • 投稿者
    投稿
    • #59409
      ワタナベ
      ゲスト

      お世話になっております。

      パソコンで見ているときは感じないのですが、
      スマホで表示したときにサイトの右側だけ横ずれしてしまいます。
      https://mrswatanabe.jp/

      特定のページだけでなく、
      すべてのページで横ずれしているので、
      見づらくなって困っています。

      ユーザー様から指摘をいただいて気づきました。
      自分はパソコンのみ使っていたので知りませんでした。

      ご教授をいただければ幸いです。

    • #59423
      かうたっく
      ゲスト

      SNSボタンの右側がはみ出してるのが原因ぽいですね。TOPページでは横揺れしてないですし。

      子テーマCSSが原因でもなく、プラグインによる出力が原因でもないようなので、親テーマのアップデートで対応できると思われます。

      FTPソフトを使ってアップロードすればウィジェットが外れる事はないので試していただけますか。

    • #59426
      ワタナベ
      ゲスト

      かうたっく様、ご教授ありがとうございます。
      ブログに書かれていた「スマホでサイトが横揺れしてはみ出る・見切れるときのスタイル:対処方法まとめ
      」も読ませていただきました。CSSに問題はないとのことで、そこは安心をいたしました。

      「親テーマのアップデートで対応」とのことで、
      もう一つの試作のブログに試したところ、
      親テーマが変わるといろいろ変わっちゃうんですね。
      (ウェブフォントも使っているのでここらへんも消えてしまいました。)

      思っていたよりも大掛かりな作業になりそうで、
      腰が引けています。

      たとえばですが、最新版SimplicityのSNSボタンのテーマだけを新しいのにアップデートをして、他の項目はそのままということもできるのでしょうか?そうすれば、そこだけ変わってスマホの横ずれがなくなるみたいな。(・・・そううまくいくことはないのかな。)

      やはり、親テーマをまるごと変えるのがいいのでしょうか?
      ちなみに、アップロードしたときは今まで使っていた親テーマを消して、
      新たなsimplicityをワードプレスのインストール画面から入れました。

      ウィジェットが消えることはさほど問題ではないためです。

      ご教授いただけると幸いです。

    • #59427
      Akira
      ゲスト

      CSS を変更すれば、横揺れは収まります。

      ただ、サイトを見ましたが、スマホよりも PC での表示が大問題です。

      昨日の夜から変ですが、何か変更されましたか?

    • #59429
      ワタナベ
      ゲスト

      Akira様、お世話になっております。

      昨日の夜から触れていません。
      ・・・おそらくずっとこのままです。

      大問題の箇所を教えていただけるとありがたいです。

    • #59431
      Akira
      ゲスト

      22 時ぐらいに拝見した時には、何も問題ありませんでした。

      次に 24 時ほどに拝見した時に、大きく表示が崩れていました。

      その間、何かされましたか?また、キャッシュ系プラグインはお使いでしょうか?

      ちなみに下記リンクの画像のように表示されています。

      http://netakiri.net/uploader/src/up0419.png

    • #59433
      ワタナベ
      ゲスト

      ・・・これはひどい状態ですね。

      なぜこうなって見えるのでしょうか。
      自分は問題ないのですが。

      22:30には就寝したので、一切触っておりません。

      キャッシュ系のプラグインも入れておらず、

      ・Akismet Anti-Spam (アンチスパム)

      ・All In One SEO Pack

      ・Category Order and Taxonomy Terms Order

      ・DeMomentSomTres Export

      ・EWWW Image Optimizer

      ・Font Awesome 4 Menus

      ・PS Auto Sitemap

      ・Table of Contents Plus

      ・WordPress Popular Posts

      ・WordPress インポートツール

      これらの基本的なやつしか入れておりません。

      ただ2日前に、httpからhttpsに変更はしました。
      それも関係しているのでしょうか?

      自分のところではふつうに表示されるので、
      どうしていいのか不明になっております。

      <img src="<img src=”https://mrswatanabe.jp/wp-content/uploads/2018/03/blogtop.png&#8221; alt=”” width=”1130″ height=”700″ class=”aligncenter size-full wp-image-10720″ />” alt=”ブログ画像トップ” />

    • #59434
      Akira
      ゲスト

      申し訳ないです。こちらの問題でした。シークレットモードでも変だったので、てっきりワタナベさんのサイトに問題があると早とちりしてしまいました。

      スマホでの横揺れは、下記の CSS で収まります。追加場所は、子テーマの style.css の 1 番下の 2272 行目からです。

        .sns-group-viral ul.snsb li a {
          box-sizing: border-box;
          height: 45px;
          line-height: 45px;
          padding: 0;
          width: 100%;
        }
      }

      2201 行目からのメディアクエリが閉じられていないので、最後に } を 1 つ余計に追加しています。

    • #59436
      ワタナベ
      ゲスト

      Akiraさん、教えてくださりありがとうございます。

      CSSを追加したところページの横ずれがなくなりました。
      ページが崩れたときは、なにかいけないことをしてしまったと思って焦りました。

      かうたっく様もありがとうございました。

      親テーマのアップロードもしなければいけませんね。

    • #59439
      Akira
      ゲスト

      心臓に悪いことを書いてしまい、申し訳ありません。 私の PC が、 OS レベルでおかしくなってました。

9件の返信スレッドを表示中
  • トピック「スマホの表示で右側が横ずれする件」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)