Twitterモバイルアプリで開くとAMPレイアウトが崩れる

Simplicityの特徴 フォーラム 不具合報告 Twitterモバイルアプリで開くとAMPレイアウトが崩れる

このトピックには7件の返信が含まれ、2人の参加者がいます。2 日、 14 時間前 @nisizawa さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #61485

    @nisizawa

    Twitterモバイルアプリで Simplicity2 のページを開くと、AMPレイアウトが崩れる現象に悩んでいます。

    こちらのリンク

    https://twitter.com/nisizawa/status/1106495255967342592

    を、iOS の Twitter アプリで開き、リンクをクリックすると、下の画像の画面になります。

    初回画面

    フォントも明朝で変ですし、Adsense の広告も表示されず、レイアウトも崩れています。

    しかし、この画面で左上にある「ランシット日記」というリンクをクリックすると、次の求めている通りの正常な画面に移ります。

    正常な画面

    不思議なことに、リンクをモバイル版の Crome やサードパーティ製の Twitter アプリ Tweetbot で開いても、この現象は起きません。

    バージョンは最新版です。
    Simplicity2バージョン: 2.7.5
    WordPress 5.1.1

    Simplicity2 でAMPを設定しています。プラグインを全て停止しても同じ現象が起きました。また、親テーマに変更して、AMPをONにしたらやはり同じ現象が起きました。

    Twitter でリンクを開いたとき、最初から2枚めの画像のページが表示されるようにしたいのですが、どうすればよいでしょうか?

  • #61489
    わいひら
    わいひら
    キーマスター

    CocoonのAMP表示は現在この表示になります。
    https://wp-simplicity.com/simplicity2-7-5/?amp=1#development=1

    けれど該当ページはこのように表示されます。
    https://rangsit.net/2019/03/15/sim2fly-howto/?amp=1#development=1

    どうやらCSSが適用されていないようなんですが、原因はわかりません。

    サーバを調べてみたらよく知らないサーバーでした。
    https://www.extrem.jp/
    サーバーの仕様による可能性もあります。

    もし別サーバーを持っていれば、テスト環境たくって同様になるか確認してみていただけますでしょうか。
    なければ無料サーバーもあります。
    https://www.xdomain.ne.jp/
    https://www.star.ne.jp/free/

  • #61494

    @nisizawa

    わいひらさん、ご返信ありがとうございました。

    ちょうどサーバーが遅いのに不満を感じていたところだったので、わいひらさんのページを参考にして、カラフルボックスに引っ越ししたところ、問題が解決しました。現在は正常に表示できています。

    推測になりますが、エクストリムの SSL になにか問題があったようです。

    これからも Simplicity を愛用して、そのうち機会を見て Cocoon に移行したいと思っています。どうもありがとうございました。

  • #61495

    @nisizawa

    ここに続けて書いてしまってよいのか迷ったのですが。。。
    AMPは表示されるようになりましたが、
    https://rangsit.net/2019/03/15/sim2fly-howto/?amp=1#development=1では、
    外部URLを利用した画像(Google Photo)のサイズがすべて 75 x 75 になってしまいました。

    HTMLでは、サイズ指定が重複しているようです。
    <p><a href="https://lh3.googleusercontent.com"(リンク後略) alt="" width="351" height="236" width="75" height="75" sizes="(max-width: 75px) 100vw, 75px"></amp-img></a></p>

    元のサイズ比では表示できないでしょうか?

  • #61499
    わいひら
    わいひら
    キーマスター

    画像を同一ドメインサーバーにアップロードして置くか、widthとhight属性で値を指定することで改善できるかと思います。

  • #61504

    @nisizawa

    通常ページでは、
    alt="" width="351" height="236" /></a></p>
    と、widthとhight属性で値を指定しています。表示も正常です。

    それなのに、AMPページでは
    alt="" width="351" height="236" width="75" height="75" sizes="(max-width: 75px) 100vw, 75px"></amp-img></a></p>
    と、75 x 75 になってしまいます。

    元の指定 width=”351″ height=”236″ で表示することはできるでしょうか?

  • #61508
    わいひら
    わいひら
    キーマスター

    親テーマのlib/amp.phpの以下の部分を削除すればうまくいくかなと思います。

      //アプリーチの画像対応
      $the_content = preg_replace('/<img([^>]+?src="[^"]+?(mzstatic\.com|phobos\.apple\.com|googleusercontent\.com|ggpht\.com)[^"]+?[^>\/]+)\/?>/is', '<amp-img$1 width="75" height="75" sizes="(max-width: 75px) 100vw, 75px"></amp-img>', $the_content);
      $the_content = preg_replace('/<img([^>]+?src="[^"]+?nabettu\.github\.io[^"]+?[^>\/]+)\/?>/is', '<amp-img$1 width="120" height="36" sizes="(max-width: 120px) 100vw, 120px"></amp-img>', $the_content);

    アプリーチ用の設定が邪魔しているぽいです。

  • #61511

    @nisizawa

    わいひらさん
    アプリーチも使っているので、該当の箇所から googleusercontent\.com| だけ削除したところ、期待通りのページが表示されました。
    どうもありがとうございました。

トピック「Twitterモバイルアプリで開くとAMPレイアウトが崩れる」への新規返信追加は締め切られています。

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