AMP(Accelerated Mobile Pages)を使用する

はてなブログでは、記事をAMP(Accelerated Mobile Pages)で配信することができます。

ブログユーザーにとって、AMPはモバイル環境で速やかに表示され、ブログがより快適に閲覧されるため、多くの人に読まれやすくなることが期待できます。一方で、デザイン上のカスタマイズなど、リッチな表現には制限があります。

※AMPの配信設定は、有料プラン「はてなブログPro」に加入しているブログで利用できます。

※AMPは開発が進行中のプロジェクトであり、本機能もベータ版として提供されます。AMPの仕組み等をご理解のうえ、ご利用ください。ご不明な点やお気づきのことがあればお問い合わせフォームよりご連絡ください。

はてなブログでAMPを配信する

はてなブログProに加入しているユーザーは、ブログの詳細設定画面で「Accelareted Mobile Pages (AMP) を配信する」にチェックをいれると、AMPが配信されます。

AMP用のCSSを設定する

記事をAMPで配信しているブログの「デザイン設定」画面では、「スマートフォン」タブの「詳細設定」に「AMP用CSS」欄が表示されます。ここにCSSを直接記述し、AMPで記事が配信される際のデザインをカスタマイズできます。

※AMPのCSSにはいくつかの制約があります。AMPプロジェクトのWebサイトなどを参考にしてください。なお、デザインやレイアウトのカスタマイズに関しては、はてなブログのサポート対象としておりません。

はてなブログでAMPの表示をプレビューする

記事編集画面(PC版)の「プレビュー」タブで、「スマートフォン (AMP)」タブに切り替えて、AMPでの表示をプレビューすることができます。

AMPについて

AMPは、モバイル環境でWebコンテンツの表示を高速化する仕組みです。GoogleなどWeb業界各社の協力により、世界中から多くのコンテンツ企業やテクノロジー企業が参加しています。

AMPで配信されたコンテンツは、AMPの表示に対応したモバイルのサイト・アプリで利用されます。AMPに対応したGoogle検索などのサービスが、AMPで配信されたページのデータをクロールすると、モバイル環境のアプリ内ブラウザなどでそのデータを利用して、通常のWebページより高速に表示します。

※AMPコンテンツをクロールするタイミングやキャッシュの利用については、AMPを利用する各サービスによります。オプションを有効にしてもすぐにクロールされるとは限りませんし、オプションを無効にしたのにAMPで表示され続けることもあります。

※AMPに対応していないサービスや、モバイルのブラウザでブログを直接閲覧する場合には、ブログの設定に応じた通常のモバイル表示になります。

AMPを利用する際の注意点

はてなブログにおいてAMPを利用する際には、次のような制約があります。

  • はてなブログのデザインテーマは反映されません
  • デザイン設定でカスタマイズできるサイドバーモジュールや、HTMLの自由記述(記事上下、ヘッタ、フッタなど)は配信されません
  • 記事中のstyle属性など、スタイル関連のHTMLは反映されません
  • 記事中のJavaScriptは反映されません(このため広告などが表示されないことがあります)
  • (HTTPSでなく)HTTPで配信されている画像は表示されません(はてなフォトライフやInstagramなどはHTTPSに対応しています)
  • AMPではページ上部にあるiframeの表示に制約があるため、例えば記事の先頭にブログカードを配置したときには表示されません

はてなブログのその他の設定項目との関係

AMPの利用において、はてなブログのその他の設定項目とも次のような関係があります。

  • AMPへのアクセスは、詳細設定画面の「Google Analytics埋め込み」で設定されたGoogleアナリティクスのプロパティに記録されます
  • 詳細設定画面の「はてなによる広告を表示しない」をチェックしている場合、AMPページでもはてなによる広告は表示しません
  • スマートフォンアプリではAMP配信を設定できませんが、スマートフォン向けブラウザ版ダッシュボードでは設定できます

関連項目