書いてある内容では分からない事が色々ありますので『おそらく』が前提です。

スマホでツイッターアプリの方から直接ブログ記事を開くと記事内で行った色々な設定などが反映されていない状態で記事が表示されてしまいます。

スマホからアクセスした時のURLを確認していただけますか。

https://domain.com/cocoon-archive-title-css/

ではなく、AMP対応ページを見ているなどありませんか？

https://domain.com/cocoon-archive-title-css/?amp=1

その場合。

amp.cssに記事・固定ページなどに反映するCSSを書いてなければ反映しないと思います。

アドセンスも同様の可能性が高そうですが、実際の状況を確認できませんから不明です。

かうたっく様

ご返信ありがとうございます。

amp.cssに記事・固定ページなどに反映するCSSを書いてなければ反映しないと思います。

その辺りのことはやっておりませんでしたので、それが原因なのかと思い調べようかなと思いましたが・・・

その前に他の方の記事はツイッターから直接入ると、どう表示されるか確認してなかったので、失礼ながら、かうたっく様のツイートから直接記事の方を拝見させていただきました。

すると、やはり自分と同じ現象になりました。

・文字の色などが反映されていない

・アドセンス広告がレスポンシブではなく300×250の大きさ

正確に言うと、その記事を読み終わり、一つ前の記事に移動した後、戻ると文字の色などがちゃんと反映された記事になっています。

※これも自分と同じです。

つまり、ツイッターから直接入った初回の記事がちゃんと反映されていない状態で表示されてしまうのです。

スマホの端末の問題などもあるのでしょうか？

iphoneがないので確認できませんが＾＾；

これは、スマホの仕様というよりも、AMPの厳しい仕様上このようにせざるを得ません。

・文字の色などが反映されていない
・アドセンス広告がレスポンシブではなく300×250の大きさ

AMPではstyle属性を使えない等の制限があります。
なので、上記はAMPの仕様に合わせたテーマの仕様です。
https://www.ampproject.org/ja/

AMPは高速化することと引き換えに、表示が遅くなるようなことは全て制限がかかっています。

モバイルでも意図した表示にするには、AMP機能を使用しない設定にするしかないかもしれません。

#3586

私はAMP対応ページと、そうでないページがあります。どこがどのように文字色が変わるのかもわかりません・・・。

広告に関して『AMPの仕様通り』でCocoonで対応されてるAMP対応用・広告は一切してない状況です。

記事内はstyle属性をあえて使う事もやってません。自分のスマホに導入しているTwitterアプリから初めてクリックしましたが、同じ状況にはなりませんでした。。。

ご自身が見ている状況は、思いのほか他の人には伝わらないので、詳しい状況やスクショを添付し伝えればもしかすると、別のかたが見て解決するかもしれません！？

amp.cssに記事・固定ページなどに反映するCSSを書いてなければ反映しないと思います。

その辺りのことはやっておりませんでしたので、それが原因なのかと思い調べようかなと思いましたが・・・

納得いかないかも知れませんが、やれることをやってみるのも1つの手だったりしませんかね？

それでもオカシイと思う事もあれば。

状況がわからない人が分かるよう手段を整え、書かれていない新たな状況を載せる人・さらに情報を見た人がその解消方法が出るのを待ってみるのも手、かとも思います。

わいひら様

かうたっく様

ご回答ありがとうございます。

AMPは高速化することと引き換えに、表示が遅くなるようなことは全て制限がかかっています。

なるほどですね。

自分も何度か試してみて、何となく…そうゆうことかもしれないなと感じていたので、合点がいきました。

つまり、表示が遅くならないように簡易表示になってしまうということですね＾＾；

書き忘れましたが、もう一つ問題がありまして＾＾；

「AMP簡易表示」になる場合、画像が全て正方形で表示されてしまう辺りも気になっていました。

・縦長の画像の場合→画像の高さが縮まって表示

・横長の画像の場合→画像の幅が縮まって表示

上記のように画像の見栄えが悪くなってしまいます＾＾；

最後に…先程、わかったことがあるのでご報告いたします。

家族のスマホ（自分と同じ機種）を借りてツイッターから表示を確認したところ、一回目はstyle属性が反映された状態で記事が表示されました。

ただ、2回目に確認したところstyle属性が反映されていない記事が表示されました。

どうやら、通信状況によっても反映される、されないがあるようです。

AMPにこのようなデメリットがあるとは思ってなかったので…

「AMP機能を使用しない設定」も考えたいと思います。

ご回答ありがとうございました。

「AMP簡易表示」になる場合、画像が全て正方形で表示されてしまう辺りも気になっていました。

・縦長の画像の場合→画像の高さが縮まって表示

・横長の画像の場合→画像の幅が縮まって表示

上記のように画像の見栄えが悪くなってしまいます＾＾；

画像に幅と高さが入ってないからだと思います。画像のサイズを入れるとキチンと反映されますよ。

<img class="" src="画像パス" alt="" width="800" height="500" />

家族のスマホ（自分と同じ機種）を借りてツイッターから表示を確認したところ、一回目はstyle属性が反映された状態で記事が表示されました。

ただ、2回目に確認したところstyle属性が反映されていない記事が表示されました。

どうやら、通信状況によっても反映される、されないがあるようです。

なるほどです。

”style属性が反映された状態”とありますが、これはAMPでは除去されるので反映された状態にはなりません。なるとしたら通常ページ閲覧時です。

”style属性が反映されていない記事が表示されました。”

ちなみに確認方法としてHTMLタグを見る感じです。※WordPress投稿編集画面ビジュアルではなくテキストのほう。

<span style="color: #ff0000;">ｈｈｈ</span>

上がスタイル属性が付いたコード。HTMLに装飾を書いている。

下は装飾する為にマークclass="red"を付けたもの。

<span class="red">ｈｈｈｈ</span>

クラスred領域をCSSで装飾するためです。

.red { color: #ff0000; }

文字色などの装飾が消えても、ヘビーユーザーさん（自分）位しか気づかない。と思って割り切るか、スマホビュー高速化をあきらめる、それは運営者さんの考え方次第ですね＾＾

かうたっく様

ご回答ありがとうございます。

画像に幅と高さが入ってないからだと思います。画像のサイズを入れるとキチンと反映されますよ。

<img class="" src="画像パス" alt="" width="800" height="500" />

上記の設定をやってみたいと思います。

ありがとうございました。

このページは『スマホでツイッターからブログの記事を開くと起こる不具合』で検索してこられるかたにも助かるページになるかもしれません。

画像の件は全く違う内容『#3605』なので、別トピックをたてるのがベストだと思われます。※トピ主さんの別質問でスクショしましたが、ここでも一応書いておきます。

1つのトピックにつき1つの質問を書き込んでください

その1つ前の書き込みは認識の違いがあったので、他の人も同じ認識違いがある場合にかきました。そのついでに解答したのがダメだったのかも・・。※あと過去トピにも同様質問があるのでそちらでご確認ください＾＾

この件は

「AMP機能を使用しない設定」も考えたいと思います。

でトピ主さんは解決されたようで、なによりです！