Title/URLはてなブログ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に変更を加えずそのまま放置してしまっていた。アクセス解析を見てみれば、このブログへのアクセスの2〜3割はAMPページとなっており、勿体ないことをしていた...。難しい設定もとくに必要ないので、なんとなく機能をONにしている人はCSSも見直してみてはいかがだろうか。あと、はてなブログのAMP用CSSで使えないタグなど、仕様についてはこちらの記事が大変参考になった。Title/URLこの記事を書いた人ろくぜうどんid:rokuzeudonモノ・コトをより良くするWebデザイナーです。サービス開発におけるUIデザイン・LP制作・HTML/CSS実装・プロジェクトマネジメントなど幅広く立ち回っています。(3)このブログについて|プライバシーポリシースターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。