遅ればせながら、はてなブログにAMPを設定しました！

AMPとは

スマホでブログやニュースを検索した際に端の方に「AMP」と表示されるのを見かけたことはありませんか？
そして、その「AMP」表示の検索結果にアクセスすると、いつもより段違いで早く表示されませんか？
この段違いで早く表示される仕組みというのがAMP（Accelerated Mobile Pages）です。
実際には軽量化したHTMLと、そのキャッシュを利用しています。

設定

さて、はてなブログでAMPを使うには設定1つで利用することができます。
（はてなブログProに加入している必要があります。）
設定ページの「詳細」→「AMP」の「ベータ版機能： Accelerated Mobile Pages (AMP) を配信する」にチェックを入れて、「変更する」をクリックします。
ここに「ベータ版機能」と書かれている通りAMPは、まだまだ開発途中で途中で仕様変更される場合があるので注意が必要です。

アクセスの仕方

はてなブログの場合、AMP仕様のページを開くにはURLの最後に「amp=1」を追記してアクセスします。
例えば、このページの場合は、「https://knowledge.moshimore.jp/entry/hatena_blog_amp?amp=1」というURLになります。

※現在はAMP設定を解除しています。

CSSの変更

軽量化したHTMLになっているのでPCや通常のスマホでアクセスした場合とページデザインが違いますので、AMP用にCSSを変更します。
設定ページの「デザイン」→「スマートフォン」→「詳細設定」→「AMP用CSS」を開きます。

まず初めに変えていきたいのが、ヘッダー部分にあるブログアイコンです。
どうして、ここにブログアイコンを表示させたいのか分からないので、削除してしまいます。

.header-blog-icon {
display: none;
}

次に、はてなブログProに加入しているにも関わらず、はてなブログの1行広告が表示されているのを削除します。

.powered-by-hatenablog {
display: none;
}

ヘッダーに画像を設定した後にタイトルの位置を変更する場合は、次のような感じです。

.header-image-enable #header {
margin: -140px auto 90px;
}

あとは追々変えていきたいと思います。

以上、はてなブログにAMPを導入しました！でした。