はてなブログ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
