「本文のみ(狭い)」に設定した記事のAMPページがスマホのwidthにならず右に突き抜ける

Simplicityの特徴 フォーラム 不具合報告 「本文のみ(狭い)」に設定した記事のAMPページがスマホのwidthにならず右に突き抜ける

5件の返信スレッドを表示中
  • 投稿者
    投稿
    • #59814 返信
      leda
      ゲスト

      わいひら様

      お世話になります。
      バージョン:2.6.0.9 をカスタマイズなしで使用させていただいております。

      現在、下記ページを
      https://bitter-cinnamon.com/evidence/?amp=1

      「ページ設定」を、「本文のみ(狭い)」に設定して公開しております。

      しかし、「ページ設定」を、「1カラム(狭い)」か、「本文のみ(狭い)」に
      設定してAMPページをスマホで閲覧すると、
      下記の画像のように、テキスト等がスマホ画面の幅で折り返さず、右側に突き抜けてしまいます。

      https://bitter-cinnamon.com/wp-content/uploads/2018/04/amppage01.jpg
      https://bitter-cinnamon.com/wp-content/uploads/2018/04/amppage02.jpg

      「ページ設定」を、「デフォルト」、「1カラム(広い)」、「本文のみ(広い)」にすると直るようです。

      この現象につきまして、もし、そちらのスマホでも再現性がありましたら、
      ご対応いただきたくお願いいたします。

      「1カラム(狭い)」か、「本文のみ(狭い)」の場合、
      AMPページでもPC用の width が有効になってしまってはいないでしょうか?
      改行位置がPCとだいたい同じです。

      お手数をおかけして恐縮ですが、よろしくお願いいたします。

    • #59820 返信
      わいひらわいひら
      キーマスター

      親テーマフォルダ内のamp.cssに以下のように追記すれば改善されるかと思います。

      @media screen and (max-width: 740px){
        #header-in, #navi-in, #body-in, #footer-in{
          width: auto;
        }
      }

      これでうまくいけば、次のバージョンで適用したいと思います。

    • #59823 返信
      leda
      ゲスト

      お世話になります。

      上記のコードを amp.css の一番最後に追加しましたが、
      表示は変わらないようです。

      とりあえず、私のサイトは閲覧者の90%以上がスマホなので、
      PC表示は意図するものとは違いますが、
      「本文のみ(広い)」で公開することにいたします。

      他に影響が出ていると困りますので
      amp.css はこれから元に戻します。

      問題が修正された次のバージョンがリリースされたら使用させていただきます。

      お忙しい中、ありがとうございました。

    • #60178 返信
      leda
      ゲスト

      お世話になります。
      バージョンアップされた Simplicityを2.6.8 を使用させていただきました。
      しかしながら、下記の画像のように、スマホのwidthにならない問題が改善されておりません。
      https://bitter-cinnamon.com/wp-content/uploads/2018/06/IMG_0471-577×1024.png

      《上記記事のURL》
      https://bitter-cinnamon.com/batuiti/?amp=1

      6.「本文のみ(狭い)」に設定した記事のAMPページがスマホのwidthにならず右に突き抜ける不具合修正

      と記載されていましたが、こちらの修正は反映されていないのでしょうか?
      お手数をお掛けしますがご回答の程よろしくお願いいたします。

    • #60181 返信
      Akira
      ゲスト

      親テーマの amp.css の後に、親テーマの css-custom.php が読み込まれているのが原因みたいです。

      css-custom.php の下記の部分が amp.css より後に読み込まれているので、画面幅 740px 以下で #body-in の幅が 740px になっています。

      <?php //ページタイプが狭いか
      if ( is_singular() && is_page_type_narrow() ): ?>
      #header-in, #navi-in, #body-in, #footer-in {
        width: 740px;
      }
      
      #sidebar,
      .top-sns-follows{
        display: none;
      }
      <?php endif;//is_page_type_narrow ?>

      子テーマの amp.css に下記の CSS を追加すると、親テーマの対応を待たずにすぐに修正できます。

      @media screen and (max-width: 740px) {
        #header-in, #navi-in, #body-in, #footer-in {
          width: auto;
        }
      }
    • #60185 返信
      わいひらわいひら
      キーマスター

      一応、修正してみたものをアップしておきます。
      https://wp-simplicity.com/wp-content/uploads/2018/06/simplicity2.zip

5件の返信スレッドを表示中
返信先: 「本文のみ(狭い)」に設定した記事のAMPページがスマホのwidthにならず右に突き抜ける
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)