はてなブログのプレビュー画面でAMP表示確認

f:id:sumaho-design:20160626033953j:plain

先日、AMP対応開始した「はてなブログ（有料版）」ですが、その時はまだ管理画面内でAMP表示確認する機能はありませんでしたが、つい最近その機能が追加されたようです。

記事作成画面の上部の「プレビュー」をクリックすると「スマートフォン(AMP)」というメニューが追加されており、それを選択すると、その記事のAMP表示確認できます。

で、先日の記事にも書きましたが、AMP記事で反映されない内容の「記事中のstyle属性、JavaScript」など気になってましたが、

PC表示

f:id:sumaho-design:20160626034253j:plain

AMP表示

f:id:sumaho-design:20160626034340j:plain

PC表示の赤枠のところ「<p style="padding: 10px; background: #f5f5f5;"> ～ </p>」とやっているのですが、やはりAMP表示だと真っ白でstyle属性反映されていませんでした。広告とかも出てない感じです。

あと、記事URLの最後に「?amp=1」付けると、普通にブラウザでAMP表示確認できるっぽいです。

※PCでAMP表示確認する時は、画面幅をスマホサイズくらいにした方がいいです。

その他、はてなブログのプレビューでAMP表示確認については、こちらの公式ブログの記事をご確認ください。

勝手に諸々まとめ