POTTIRI'S AUTOBIOGRAPHY

ダイエットやITで遊ぶアラフォーエンジニアの自伝ブログです。

AMP配信をONにしてたのでスマホでレイアウト崩れしてました。

f:id:pottiri:20201018234811j:plain

お疲れさまです。POTTIRIです。
昨日ワード・サーチ・パズルのサイトを作ったのですが、
Twitterのアプリ経由で見るとおかしな表示になることに気づきました。

wordsearch.pottiri.tech

よく見たら私のメインブログもTwitterアプリで見るとおかしな表示になります。
結論から言うと原因は、
AMPの設定をうっかりONにしていたから
でした。


せっかくなのでどういうことになっていたかをお送りします。

AMPをONにしていたらどうなるか?

f:id:pottiri:20201018235641j:plain

f:id:pottiri:20201018235634j:plain

上がTwitterアプリで見た表示。
下はこの記事を書いた後問題を解消した表示です。
見に覚えのない丸いアイコンが出ます。
確かにブログアイコンはこれだけど、
こんな表示が出るように設定した覚えはありません。
本文も変です。

f:id:pottiri:20201018235944j:plain

f:id:pottiri:20201018235940j:plain

同じく、上がTwitterアプリで見た表示。
下はこの記事を書いた後問題を解消した表示です。
文字の装飾が効いてませんね。
設定したスタイルが無視されています。

この見た目になるのはTwitterアプリのみで、
ブラウザで見た時はこうなりません。
どうやらTwitterアプリの時だけ、
そもそも違うページを表示しているようです。
リンクそのものが違います。

https://pottiri.tech/entry/2020/10/17/234950?amp=1&__twitter_impression=true

「amp」ってズバリ書いてますね。
AMPをONにした状態でリンクを貼るとこうなるみたいです。 

解消方法

はてなブログの設定→詳細設定でAMPをOFFにすれば、
解消されます。

f:id:pottiri:20201019001307p:plain

AMPをONにした場合、
専用のCSS設定が現れます。
本来はここでAMP用のCSSを設定しないといけないみたいです。

f:id:pottiri:20201019001424p:plain

本来のAMPとは?

本来AMPは、モバイルのWEBページを高速化するためのものだそうです。

help.hatenablog.com

AMPを採用したサイトも増えつつあるようですが、
まだまだスタンダードではありません。
styleが効かなかったりするので、
今までとは違うページ作りが必要みたいですね。
上のページで文字の装飾が効いてなかったのはstyleが効かないせいでした。

  • デザイン設定でカスタマイズできるサイドバーモジュールや、HTMLの自由記述(記事上下、ヘッタ、フッタなど)は配信されません
  • 記事中のstyle属性など、スタイル関連のHTMLは反映されません

(意図せずですが)数ヶ月使ってみた感触としては、
現状ではAMPをONにすることは実質デザインの確認パターンが、
パソコン・スマホ・AMPの3種類に増えるだけなのでデメリットしか感じません。
ただ、レスポンシブデザインが主流になったようにAMPも主流になる可能性はあります。
こういった新しい機能を素早く導入するサービスは勢いがあるので、
一応興味を持っておいて流行り出したら素早く乗れるようにしておきたいですね。

最後まで読んでいただきありがとうございました。

アフィリエイト 

はてなブログ Perfect GuideBook 改訂第2版

はてなブログ Perfect GuideBook 改訂第2版

  • 作者:JOE AOTO
  • 発売日: 2020/07/18
  • メディア: Kindle版