CSSでドラえもん in アメブロ記事

こんにちは、まつもとです。

何年か前にちょっと流行った「画像を一切使わずCSSでドラえもんを描く」のを、アメブロでやったらどうなるのかな?と、ふと思ったので試してみました。

ソースはこちらをお借りしました(都合でサイズを少し小さく修正させてもらっています)。

で、実際にやってみたのが↓こちら。

どうでしょう?

ちゃんとできているでしょうか?

元のソースが良くできているので、たぶん、PCでもスマホでも問題なく「ドラえもん」になっているんじゃないかと思います。

でも、実はアメブロにはもう一つスマホで見られるページがあります。

それは「AMP」。

こちらが当記事のAMP用のページです

どうでしょう?

記事を書いている途中では確認できないのですが、たぶん、ドラえもんは、いないんじゃないでしょうか?

アメブロでは、基本的に、スマホでGoogle検索した人にAMPページが提供されるようになっています。

ですが、このAMPは、普通に記事で使えるタグの多くが省略されたり、書き換えられたり、削除されたりします。

AMPの仕様上、ある程度これは仕方がないことなんですが、問題は、対応していない記事も含めて全て強制的にAMP化されること。

ユーザーがAMPを配信するかどうかを選べるだけで問題ないんですが・・・

というわけですので、記事がAMPでもちゃんと表示できるのか?を確認しておかないと、検索した人は、あなたが見せていると思っているのとは全く別のものを見ている可能性がありますよ。

なお、AMP用ページは、アメブロの記事のURLの「ameblo.jp」の前に「gamp.」を付ければ見ることができます。

例えば記事のURLが、

https://ameblo.jp/wazameba/entry-12338629687.html

なら、AMPは

https://gamp.ameblo.jp/wazameba/entry-12338629687.html

で確認できます。

アメブロにGoogleからも訪問して欲しいと思っている人は、必ず確認しておくことをお勧めします。