Simplicityの特徴 › フォーラム › 不具合報告 › 「本文のみ(狭い)」に設定した記事のAMPページがスマホのwidthにならず右に突き抜ける
-
投稿者投稿
-
-
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とだいたい同じです。お手数をおかけして恐縮ですが、よろしくお願いいたします。
-
わいひらキーマスター
親テーマフォルダ内のamp.cssに以下のように追記すれば改善されるかと思います。
@media screen and (max-width: 740px){ #header-in, #navi-in, #body-in, #footer-in{ width: auto; } }
これでうまくいけば、次のバージョンで適用したいと思います。
-
ledaゲスト
お世話になります。
上記のコードを amp.css の一番最後に追加しましたが、
表示は変わらないようです。とりあえず、私のサイトは閲覧者の90%以上がスマホなので、
PC表示は意図するものとは違いますが、
「本文のみ(広い)」で公開することにいたします。他に影響が出ていると困りますので
amp.css はこれから元に戻します。問題が修正された次のバージョンがリリースされたら使用させていただきます。
お忙しい中、ありがとうございました。
-
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=16.「本文のみ(狭い)」に設定した記事のAMPページがスマホのwidthにならず右に突き抜ける不具合修正
と記載されていましたが、こちらの修正は反映されていないのでしょうか?
お手数をお掛けしますがご回答の程よろしくお願いいたします。 -
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; } }
-
わいひらキーマスター
一応、修正してみたものをアップしておきます。
https://wp-simplicity.com/wp-content/uploads/2018/06/simplicity2.zip
-
-
投稿者投稿