カエレバがAMPページで、表示できないときは？

助手くん

カエレバが、AMPで表示できないんです！

管理人

カエレバリンクのコードに、修正が必要です。

「Yahooショッピング」「7net」のリンクを入れると、AMPページでカエレバが表示されない症状を確認しました。

というわけで今回は、カエレバを AMP で表示できない問題を、解決していきます。

カエレバを AMP ページで表示できないときの解決方法

解決方法

1. カエレバコードを、改行する
2. 不要なHTMLを削除する

解決策は、２つあります。ひとつずつ、解決方法を解説します。

解決方法１：カエレバコードを、改行する

解決方法は、カエレバYahooショッピング前のコードを、改行すること！

改行する部分のコード詳細

Amazon</a></div>

<div class="shoplinkyahoo" style="

<div class="shoplinkyahoo" のまえで、改行するだけです。

これで無事に、AMP ページでもカエレバリンクを表示させることができるようになりました。

解決方法２：不要なHTMLを削除する

もうひとつの解決方法に、カエレバリンクの HTML を削除する方法があります。

カエレバ IMG タグにある HTML コードを、思い切って削除すると、AMPページでも表示できるようになります。

HTMLの赤文字を、削除してみよう。

<img src="//ad.jp.ap.valuecommerce.com/servlet/atq/gifbanner?sid=xxxxxxx&pid=xxxxxxxxx" height="1" width="1" border="0">

これでAMP ページで、カエレバリンクが表示されます。

発生した症状

今回発生した状況は、AMP ページで、7net・Yahooショッピング入のカエレバが表示されないという問題でした。

デザインが崩れ、楽天市場と Amazon の表示が消えてしまうんです。

「楽天市場」「Amazon」だけのリンクならば、AMP ページで問題なく表示できます。

Yahooショッピングをカエレバリンクに含めると、問題が発生していたので、カエレバ×Yahoo!ショッピング自動挿入機能を使って問題を回避していました。

まさか、たった１つ改行すれば問題解決できるなんて...思ってもみませんでしたよ。

表示されない原因

カエレバリンクで作成されるバリューマコースの IMG タグ HTML が、原因だと予想しています。

バリューマコースが悪いわけではなく、WordPress のテーマとの相性問題などさらなる原因が考えられます。

「7net」はもしもアフィリエイトをつかい、「Yahoo!ショッピング」は、カエレバ×Yahoo!ショッピング自動挿入機能を使うといいかもしれません。

発生した環境

WordPressの使用環境

• WordPress ver 5.1
• テンプレート：TCD Bloom ver 1.3
• AMP対応：AMP for WP – Accelerated Mobile Pages
• プラグイン多数

まとめ

カエレバがAMPページで、表示できない問題の解決方法を解説してきました。まとめると、こんな感じです↓

まとめ

1. カエレバコードを、改行する
2. 不要なHTMLを削除する

AMP でカエレバを表示できないと、かなりの機会損失です。おなじ問題で悩んでいるブロガーの救いになれば、幸いです。

そのほか、記事更新に役立つブログツールの話は、こちらの記事をご覧ください↓

2019.07.04

音楽ブロガー愛用の最強ブログツールおすすめ63選

ブログを書くとかんたんに言っても、記事を完成させるまでには、画像編集や文章装飾などたくさんやることがあります。 その作業を少しでも負担を和らげてくれるブログツールを、音楽ブロガーでもある私が愛用している中から、最強だと思うものをリストアップしてみました。 というわけで今回は、音楽ブロガ...