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

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

このトピックには5件の返信が含まれ、2人の参加者がいます。3 ヶ月、 2 週間前わいひら わいひら さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #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

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




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