当サイト（はてなブログ）の記事がAMP配信表示された時のためのCSSを設定した

はてなブログProでは、ブログ記事をAMPで配信することができる。

ただ、そのままだとデフォルトな見た目になってしまう。例えば、当ブログをスマホでみた時、こんな感じになる。
左が通常時で、右がAMP表示だ。

AMP表示では、特に見出しが本文に馴染んでいてわかりにくい。
そこで今回、専用のCSSを編集し、管理画面より登録した。（左がbefore、右がafter）

見出しや本文中の強調タグに色をつける程度の変更でも、だいぶ印象が変わる。

せっかくなのでコードをGithubにアップしておいた。
https://github.com/rokuzeudon/LOGzeudon-AMP

設定方法

AMP配信機能

ブログ設定「詳細設定」ページの中に、「AMP」という項目があるのでチェックを入れて「変更する」ボタンをクリック。これだけで完了する。

AMP用CSS

デザイン設定「スマートフォン」タブ内、「詳細設定」を開くと「AMP用CSS」欄がある。ここに必要なCSSを記入し、「変更を保存する」をクリックして完了する。

ちなみに今のところ、デザイン設定のプレビュー画面では表示されないので、面倒だが下記いずれかにて確認する必要がある。

• 記事の編集画面へ行って「プレビュー スマートフォン (AMP)」を選択する
• ブラウザをレスポンシブ表示モードにし、記事URLの最後に「?amp=1」をつけてアクセス

終わりに

私はこの機能が登場した頃からONにしていたが、CSSに変更を加えずそのまま放置してしまっていた。 だがアクセス解析を見てみれば、このブログへのアクセスの２〜３割はAMPページとなっており、勿体ないことをしていた…。

難しい設定もとくに必要ないので、なんとなく機能をONにしている人はCSSも見直してみてはいかがだろうか。

あと、はてなブログのAMP用CSSで使えないタグなど、仕様についてはこちらの記事が大変参考になった。

http://www.tomotanuki.com/entry/hatena-amp-csswww.tomotanuki.com