AMP対応ページだけフォントカラーが変更されていないときの解決方法について

AMPに対応しているページだけ、フォントカラーが変更されていないという事態が発生しました。

当ブログのモバイルページのサイドバーには「カスタムHTML」が挿入されてあるんですが、

仮にHTML内に下記のように記述すると、

<span style=”color: #ff0000;”>こんにちは</span>

↓

こんにちは

と、フォントの色が赤になりますが、このフォントカラー指定がAMP対応ページのみ反映されていないという状態です。

AMP対応ページだけフォントカラーが変更されない原因は？

当ブログではAMP対応ページとAMP非対応ページを使い分けているんですが、AMP対応ページのみフォントの色が変わりません。

どうやらAMP対応ページでは、「span style」を用いてカラーコードを変更した場合、不具合によって色の変更が反映されないことがあるようです。

原因は不明ですが・・・（苦笑）

そこでCSSでカラーを指定したところ、無事に直りました。

AMP対応ページでもフォントカラーを変更する方法

CSSに下記のようにコードを入力します。

.zzz {color: #ff0000;}

セレクタの「zzz」の箇所はご自身が覚えやすいような表記でOKです。

そしてHTML内の記述は下記の通り。

<span class=”zzz”>こんにちは</span>

上記のような方法で、AMP対応ページでもフォントカラーの変更を反映させることが可能です。

もちろんAMP非対応ページでもフォントカラーはきちんと変更されています。

さいごに

今回はAMP対応ページでフォントカラーが変更にならないときに解決方法についてお伝えしました。同じような現象が起こっている方は是非参考にしてみてください。

AMP対応するとPVは増える？実際にAMP化して感じたメリットとデメリットを解説します

2020.06.18

当サイトの理念について

関わったすべての人に「感動！」をもたらすべく日々奮闘中！

特にこれといった才能はないけれど、営業経験やコールセンターのスーパーバイザー経験から得た「ビジネススキル」や「電話対応」のノウハウを心を込めて書いてます。

自然が大好きで、暇さえあればキャンプやアウトドアに勤しむ自然人。メッセージはこちらから。

トップページへ戻る