AMPでも囲み枠を表示したい場合の記述方法

こんにちは、松本です。

アメブロのAMP(モバイル検索ユーザー向けの高速表示ページ)では、囲み枠が囲み枠として一切表示されません。

ですが、簡易のものであれば囲み枠を表示する方法はあります。

例えば、

<div class="l-border l-p-t l-p-r l-p-b l-p-l">(元の囲み枠のタグ)</div>

のようにすれば、PCや通常のモバイル向けページでは元の囲み枠、AMPでは淡いグレーの簡易な囲み枠を表示することが可能です。

(既にこの対策をして公開されている囲み枠タグもあり、その場合はこれを使うと2重になってしまうのでご注意下さい)

例:
↓AMP対策をしていない場合

囲み枠の中の文字

↓上記のAMP対策をした場合

囲み枠の中の文字

表示は↓このようになります。

AMPでの表示を実際に確認したい方はこちら

なお、この方法は、公式に公開されているものではなく、現時点(2017/11/30)のアメブロのAMP向けページを分析して、できることを確認した方法です。

なので、今後のアメブロのAMP向けページの仕様変更によって使えなくなる可能性もあります。

仕様変更の多いアメブロですが、特にモバイル関連の仕様は、本当にコロコロ、それも前触れなく突然変わるので、記事の書き方を安定させることができませんね。

アメブロとしてどういう仕様で行くのかを公開してもらえると記事も作りやすくなるのですが、今までにそういうことが為された記憶がありませんので、おそらく今後もないのでしょう。

こういった仕様の不安定さに振り回されたくないなら、残念ながら、アメブロは選択肢から外さざるを得ないと思います。

まあ、運営の方針というか目論見というか、そういうもので仕様が変わってユーザーが振り回されるのは、アメブロに限ったこととは言えませんが。

ちなみに、運営に振り回されないブログシステムを選ぶとすれば、やはりWordPressですが、アメブロに慣れきってしまっている人の場合、かなりの覚悟がないと移行しても挫折してしまうかもしれません。

PR: いちばんやさしいWordPressの教本第3版 人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」)