はてなブログ開発ブログ

はてなブログからの公式のお知らせを発信します。

AMPの表示を、記事編集画面(PC版)でプレビューできるようにしました

はてなブログでは、AMP(Accelerated Mobile Pages)で配信された記事がどのように表示されるかを、PC版の記事編集画面でプレビューできるようにしました。

AMPで記事を配信しているブログでは、記事編集画面で「プレビュー」タブを選択したときに、これまでの「PC」と「スマートフォン」に加えて「スマートフォン (AMP)」に切り替えることができます。AMPでは高速表示を実現するため表示上の制約がありますが、意図したとおりに表示されているかをプレビューで確認できます。どうぞご利用ください。

「スマートフォン (AMP)」タブ

AMPでの表示を記事編集画面(PC版)でプレビュー

※スマートフォンは機種によって画面の解像度がさまざまですが、はてなブログのプレビュー画面では横幅を320ピクセルに固定しています。

AMPを使用する際の注意点について

AMPについて、リリース時の告知では記載していなかったものの、リリース後にお問い合わせをいただくことが多かった事項には次のようなものがあります。

  • APMではページ上部にあるiframeの表示について制約があるため、例えば記事の先頭にブログカードを配置したときに表示されない
  • AMPを利用するサービス・アプリによっては、いったんAMPでクロールした記事について、AMP配信を止めたあとでも通常の表示に戻らないことがある(サービス・アプリ側の仕様による)

そのほかの事項も含めて、AMPを使用する際の注意点については下記の関連ヘルプを参照してください。

※はてなブログのAMP配信は、有料プラン「はてなブログPro」に加入しているユーザー向けのベータ版機能です。注意事項をご理解いただいたうえでご利用ください。