スマホ向け表示における記事抜粋部分が右に寄ってしまう

Simplicityの特徴 フォーラム Simplicityについての質問 スマホ向け表示における記事抜粋部分が右に寄ってしまう

  • このトピックには5件の返信、2人の参加者があり、最後にyodroidにより10年、 10ヶ月前に更新されました。
5件の返信スレッドを表示中
  • 投稿者
    投稿
    • #30124
      yodroid
      ゲスト

      お世話になります。yodroidと申します。

      下記の事象を改善したく、
      フォーラム内のトピックや検索して調べましたが
      原因が不明でしたのでご相談させてください。

      ■事象
      モバイル(スマホ)向けの画面において、
      TOPページにおける記事抜粋部分が右に寄ってしまう。

      添付資料:201507301.png(up0132.png)
      →こちらにアップロードしました
      http://netakiri.net/uploader/upload.html

      ブログURL:http://restartlog.com/

      ※iphone5S、Android(SHL23)のスマートフォンで事象を確認

      ■改善したいこと
      わいひら様の寝ログの画面表示のように、
      横幅ぎりぎりまで表示させたい。(デフォルト表示させたい)

      ■動作環境
      wordpress:4.2.3(最新)
      親テーマ:1.8.0 20150721f(最新)
      子テーマ:使用
      「完全レスポンシブデザインにする」はオフ

      ■子テーマにおけるカスタマイズ
      ・フォントの変更
      ・hタグの装飾

      ■使用中プラグイン
      AddQuicktag
      Akismet
      All In One SEO Pack
      AmazonJS
      Broken Link Checker
      Check Copy Contents(CCC)
      EWWW Image Optimizer
      Feedly Insight
      Flickr – Pick a Picture
      Google XML Sitemaps
      Jetpack by WordPress.com
      PS Auto Sitemap
      Simple Colorbox
      TinyMCE Advanced
      WassUp Real Time Analytics
      WordPress Popular Posts

      ■試したこと
      ・親テーマ(1.8.0 20150721f)を設定
      →改善

      次に、子テーマにおいて、参照する親テーマを変更してみました。
      ・親テーマ(1.8.0 20150721)
      →改善なし

      ・親テーマ(1.7.0 20150604)
      →改善なし

      ・親テーマ(1.6.5 20150508)
      →改善

      子テーマに原因があるのでは?と思いましたが、
      TOPページの表示に関するカスタマイズはないため、
      原因が分からないところです。

      また、子テーマを使ったままでも、過去のSimplicityでは直るようです。

      お手数ですがお知恵をお貸し頂けますと幸いです。

    • #30126
      Hidekichi
      ゲスト
      @media screen and (max-width: 440px){
        .entry .entry-card-content, .related-entry-content {
          margin: 0;
        }
        .entry-card .entry-thumb img {
            margin-bottom: 0;
        }
      }

      とかを子テーマstyle.cssに入れたら直るように思います。本来はnarrow.cssに入ってる部分ですが、これが表示されてませんので、子テーマで追加したら直るんじゃなかろうかという感じです。
      また、画像の下にデスクトップの時に設定してあるであろうmargin-bottomが設定されたままでした。これもnarrow.cssが読み込まれていないのか動作してない感じだったので、ついでに子テーマstyle.cssに追加すれば直ると思います。

      まぁこれを追加しなくてもnarrow.css、あるいはそれを読み込んでいる部分を修復できれば直ると思うんですけども、ただ、無ければ追加すれば良いだけなので子テーマに書いとけば良いと思います。

    • #30128
      yodroid
      ゲスト

      Hidekichi 様

      お世話になります。

      ご教示頂いた方法を試したところ、正常に表示されるようになりました。
      誠にありがとうございます!

      ちなみに、
      narrow.cssなどはいじったこともないのですが、
      どういった事が要因で正常に読み込まれなくなってしまうのでしょうか?

      他にも影響が出てしまうのではないかと思いまして。

    • #30136
      Hidekichi
      ゲスト

      正確には、わいひらさんがまた答えてくれると思うんですけれども、僕がサイトをチラリと見せていただいた中で思いつくのは、Simplicity、Simplicity1.8f、Simplicity-childと3つのフォルダがあるのが原因かと思います。

      narrow.cssを呼び出しているmobile.cssは@import url(“../simplicity/mobile.css”);で呼び出されているんですけれども、今動作しているテーマはSimplicity1.8fなのでmobile.cssが呼び出されていないのではないかと。

      で、ひとまずftpなどで、Simplicity, Simplicity1.8f共にテーマの内容をローカルに保存した上で、最新バージョンをとりあえずダウンロードしておき、Simplicity、Simplicity-child以外の、元から入っているテーマ(Twenty Fourteen等)を一時的に選択(有効化)して、それぞれのSimplicity親テーマを一旦削除し、最新のSimplicity親テーマを入れ、Simplicity-childを有効にします。そうすれば、参照する親テーマはひとつになるので、万事解決するんじゃなかろうかと。
      やってみないとわかりませんけどね。

      とりあえず、カスタマイザー等、現在どのような設定にしているかを簡単にでもメモっておいて、またローカルに保存しておいて、親テーマを削除し、最新のものを再度インストールすればmobile.cssも正常に読み込めて、結果的にnarrow.cssも読み込まれるだろうと想像します

      削除はするわけですが、元に戻せるようにバックアップを取るのを忘れないように。

      大事なことなので、バックアップや削除について書き方を変えつつ2回書いてみました(笑)

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

      今、yodroidさんのページを見てみたのですけど、もう表示は正常なので、ちょっと原因はわからなかったです。
      デベロッパーツールで、現在の状態を見て見た限りでは、narrow.cssでも、style.cssでも読み込まれるべき設定は読み込まれているようです。

      hidekichiさんのおしゃるように、確かに親テーマのフォルダ名が変更されているのは、気になる点ではあります。

    • #30184
      yodroid
      ゲスト

      わいひら様
      Hidekichi様

      ご返信が遅くなりましてありがとうございます。

      ご教示頂きありがとうございました。

      現在はスマホ表示もPC表示も問題ありません。
      バックアップを取りながら、原因を確認していきたいと思います!

      誠にありがとうございました!!

5件の返信スレッドを表示中
  • トピック「スマホ向け表示における記事抜粋部分が右に寄ってしまう」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)