読者です 読者をやめる 読者になる 読者になる

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

はてなブログ SEM(PC/スマホ)

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表示確認できるっぽいです。

 

http://blog.sumaho-design.com/entry/2016/06/15/162450

http://blog.sumaho-design.com/entry/2016/06/15/162450?amp=1

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

 

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

AMPの表示を、記事編集画面(PC版)でプレビューできるようにしました - はてなブログ開発ブログ

 

 

勝手にスマホサイトまとめ|スマホサイトとjQueryMobileのまとめ

勝手にリスティング広告まとめ|テキスト・イメージ広告、ランディングページまとめ