LOGzeudon

名古屋で働いているWebデザイナーのブログです

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

はてなブログのAMP用にCSSを設定してみた

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

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

https://cdn-ak2.f.st-hatena.com/images/fotolife/r/rokuzeudon/20170802/20170802222555_original.jpg

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

https://cdn-ak2.f.st-hatena.com/images/fotolife/r/rokuzeudon/20170802/20170802222545_original.jpg

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

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

設定方法

AMP配信機能

f:id:rokuzeudon:20170802221243j:plain

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

AMP用CSS

f:id:rokuzeudon:20170802221254j:plain:w300

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

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

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

終わりに

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

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

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

www.tomotanuki.com