【LION MEDIA】 AMP記事のテキストリンクをfunction.phpを使用して青色にする方法

【LION MEDIA】 AMP記事のテキストリンクをfunction.phpを使用して青色にする方法

私も使用しているWordPressのテーマ【LION MEDIA】ですが、AMP記事の場合に、テキストリンクを青色にするにはCSSでは適用できず、少々テクニックが必要です。

しかも、この【LION MEDIA】のテクニック、インターネットで検索しても見つからないので、ぜひ、本記事を参考に覚えてください。

 

私のお客様から、テキストリンクを青色にして欲しいとのことで、通常の記事は簡単にCSSの設定にて青色になったのですが、AMP記事の場合に反映されませんでした!!

そのお客様は、テーマの背景色が白色だったので、テキストリンクが白色になりリンクの文字が見えなかったのです!!

これは難しい!!

のですが、解決策はあります。

↓実際に私が対応したお客様のURL

https://konkatsu-memory.com/

 

なぜCSSが反映されない!

LION MEDIAのAMP動作仕様となります。AMP専用のCSSを定義する場所(ファイルもなし)がありませんので、追加CSSの欄に記載した内容はAMPの場合には読み込まれないこととなります。

かなりCSSにてレイアウトを変えている方は、AMPの場合には反映されませんので要注意です。

これは、LION MEDIAの動作仕様ですので、テーマがアップデートで対応しない限り、この動作を変えることはできません。

 

AMPの場合の対応方法

皆さんが知りたいことは、AMPの場合にもテキストリンクを青色にしたいってことですよね。

やっぱりテキストリンクは青色、そしてAMPの場合も同じにしたい、そう思いますよね。

この問題を解決するには、function.phpを利用します。

手順は2つです。

 

手順1:function.php修正

上記のコードを、function.phpに貼り付けてください。

内容を簡単にご説明すると、is_amp()はAMP判定関数です。

重要なのは、convert_body_amp()のpreg_replaceという関数を使用しているとこです。

<a>タグを”c-user01″(ユーザー定義カラー1)で定義された色にするよう強制的に置き換えています。これがポイントですね。

 

手順2:ユーザー定義カラー1を青色へ

LION MEDIAのカスタマイズで、デザインスキン設定[LION MEDIA用]のユーザー定義カラー1を青色(これがリンクの色になります)に変更します。

さぁ、AMP記事を確認してみましょう。

青色リンクになりましたよね(笑)、AMPで色を指定したい場合は、少々テクニックを要します。

LION MEDIAカテゴリの最新記事