最近私もようやく研究し始めたWordPressサイトのAMP対応。WordPressと言えば何でもできるプラグイン！今回もまたそれで・・・と思い実際にやってみましたが、AMP対応は一筋縄ではいかない。結局サイトに合わせていろいろ調整が必要だったので、思い切って自力で対応させることにしました。
やってみたらまーーーーーめんどくさいの一言に尽きる位、エラーエラーで頭から煙が出る位でしたが何とか形にはなってきました（2019年12月29日現在他の管理サイトのいくつかのみ導入し、このサイトではまだ導入していません）。
そこで最終的に問題となったのが、「日本ブログ村」でＰＶランキングに参加するためには必須の「PVポイントランキングバナー」。これを挿入した段階でエラーになりました。
多分私のように初めてサイトのAMP対応を行って、これが原因であきらめたという方がいらっしゃるかも知れませんので、きちんと設置してエラーとならないようにする方法を紹介します。
なお、この方法によって本当にきちんと計測されるのか？ということについてはしっかり検証していません。あくまでもAMPページとして問題が出ないようにする方法となりますから悪しからず。
2020年2月15日 追記
対応してから2か月様子を見てきました。正確なところではありませんがAMPページとしてキャッシュされたページについてはURLが異なるので感知してくれないようですので、もともとAMPページではPVランキングパーツが表示されないようになっている構造の場合には役に立たないと思われます。
日本ブログ村の「PVポイントランキングバナー」でAMPエラーが出ないようにする方法
まず大前提として、AMPの要件ではカスタムスクリプトの使用が許可されていません。つまり、よく使われているJava Scriptバージョンの「PVポイントランキングバナー」（ランキング一覧が表示されるもの）はカスタムスクリプトを使用するため、設置すると即エラーになります。
でどうするのか？？というと、結論としてはスクリプトではないバナーを使用します。
ブログ村のバナーメニューをクリックして「PVポイントランキングバナー」タブをクリックすると
という画面が表示されます。
恐らくWordPressでサイトを管理している方は右下の「JavaSctiptのブログパーツはこちら」から設定したものをサイドバーウィジェットなどに追加していることが多いでしょう。これがそもそもAMPエラーの原因なんです。
そこで、AMPテンプレートでは上の画面のように普通のhtmlタグを使用します。
・・・でもこのHTMLを貼り付けるとほとんどの場合AMPエラーが出ます。
※ほとんどの場合と書いたのは、そのままでも問題が起きないようにしてくれてるテーマやAMP対応プラグインの功績により、エラーが回避されていることもあるからです。でも大抵の場合はエラーになります（笑）。
なぜエラーになるのか？？については少しAMPの仕様について知る必要があります。今回の場合以外でもAMP対応では似たような状況に遭遇するでしょうから、ちょっと脱線して少し説明しておきますね。
AMPページで画像を扱う場合には決まりがあります。それは
- 画像の幅と高さが指定されていること
width=”〇〇” height=”〇〇” - AMP用の画像タグになっていること
AMP対応の画像は<img～ではなく<amp-img～>になっていることと末尾が<amp-img～/>となっているものの「/」をなくすこと、さらにタグの末尾は</amp-img>で終わっていなければなりません
の３点です。これはどんな種類の画像でも同じです。
これを踏まえ、もう一度、ランキングバナー（html版）のタグをよーく見てください。img～で始まる後半のタグの部分です。
- 画像の幅と高さが指定されていない
- AMP用の画像タグになっていない
もうダメダメですね（笑）。
では具体的にどうすればいいの？を実際のコードで説明します。
ブログ村で表示されるコードは
<a href="https://blogmura.com/profiles/サイト特定用のID"><img src="https://blogparts.blogmura.com/parts_image/user/サイト特定用のID" alt="PVアクセスランキング にほんブログ村" /></a>です。それを以下のように変更します。
<a href="https://blogmura.com/profiles/サイト特定用のID"><amp-img src="https://blogparts.blogmura.com/parts_image/user/サイト特定用のID" width="150" height="60" alt="PVアクセスランキング にほんブログ村" ></amp-img></a>見比べればどこがどうなっているのかはお分かりですね。
こうすることでAMPエラーは出なくなります。
補足として先ほどエラーが出ないのはテーマやプラグインの功績と書きました。実はAMP対応するための機能を持つテーマやプラグインにはimgタグを見つけたらこう変換しなさい！という処理が自動で行われるようになっています。
エラーが出ない場合にはこの処理がきちんと行われているということで、そうした方は多分このページをご覧になることはないでしょう（笑）。
でも中にはこの処理によって幅と高さが重複してしまったりして再びエラーとなる場合もありますから、AMPページのソースを見てランキングバナーのタグで上と違うところがないかをチェックして、必要ないものはバナータグから削除すればいいでしょう。
また、テーマやプラグインによっては通常のページ表示をAMPの場合はこうしなさいという条件を設けて表示の切り替えをしているものがありますので、そうした場合にはパソコンのページで表示されるランキングバナー（順位が入っているもの）を、今回のHTMLタグへ変える必要もあると思います。
サイトで処理がどのようにされているのかはケースバイケースですので、まずは
- 画像が過不足なく要件を満たすようになっているか
- ランキングバナー（順位入り）を削除したらどうなるか
といった流れでチェックするといいでしょう。
いかがでしたか？エラーはなくなりましたよね？まだエラーが出るという方は上の項末尾のチェックを再度行ってください。
ランキング用バナーではないその他のバナー類、他サービスのバナーなどもちょっと紹介したAMPの画像に関する要件さえ知っていれば解決できますので、ぜひチャレンジしてください。
