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は増える?実際に導入して感じたメリットとデメリットを解説します

2020.06.18


当サイトの理念について

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

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

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


トップページへ戻る