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

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

  • このトピックには7件の返信、2人の参加者があり、最後に @nisizawaにより8ヶ月前に更新されました。
7件の返信スレッドを表示中
  • 投稿者
    投稿
    • #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| だけ削除したところ、期待通りのページが表示されました。
      どうもありがとうございました。

7件の返信スレッドを表示中
  • トピック「Twitterモバイルアプリで開くとAMPレイアウトが崩れる」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)