穴埋め式LPテンプレートを最近良く使っているのですが、スマホ版で見た時にキャッチコピーを赤字にしたスタイルがなくて全て黒字になってしまう・・・これをどうしても修正できなかったので、作成者の中島さまにお問い合わせして修正することが出来ました。
同じ現象で困っている人もいるかと思うのでブログにて備忘録的にシェアしておきます。
与那嶺が送った質問文
> ーーーーーーーー
> 穴埋め式LPテンプレートですが、
> スマホでページを見ると
> キャッチコピーの文字色などが反映されなくて困っています。
>
> こちらのページ
> http://t-shiki.co.jp/lp/magad/
>
> <span>タグで特定の文字だけ赤字にしてて、
> PC、iPad miniで見ると問題ないのですが、
> スマホ（iPhone6S）で見ると文字が全て黒に・・・。
>
> 対応策があればご教示頂ければと思います。
> ーーーーーーーーー
こういう風に中島さまにお問い合わせをしました。
するとすぐにこういう回答を頂きました。
これは、スマホで表示させる時に、
タグを削除するコードを追加しているためです。部分的に、文字の色を変更する場合は問題ないのですが、
部分的にフォントサイズを変更する為に<span>タグを
使用した場合、スマホで表示させた時に、
その部分の文字だけ大きくなってしまい
表示バランスがおかしくなってしまいます。その為、タグを削除するようにしています。
与那嶺様のページを拝見すると、
フォントカラーのみの装飾のようですので、
下記の部分を変更するとカラー設定が反映されるようになります。lp_page.phpファイル
<?php if (is_mobile()) :?>
<?php
$catch = get_field(‘lp_catch_main’,$post->ID);
$catch = strip_tags($catch);
echo $catch;
?>
<?php else: ?>
<?php the_field(‘lp_catch_main’,$post->ID); ?>
<?php endif; ?>この部分を下記と差し替える。
<?php the_field(‘lp_catch_main’,$post->ID); ?>
よろしくお願い致します。
なるほど！では早速やってみたいと思います。
実際に修正してみた
WordPress管理画面の左メニューより「外観」＞「テーマ編集」を押しましょう。
テーマ編集画面の右サイドに下図のようなメニューが有ると思います。その中から「LPテンプレ 固定ページテンプレート（lp_page.php）」を押しましょう。
その中から45行目〜53行目の部分を入れ替えます。
赤枠部分を以下に差し替えます。
<?php the_field('lp_catch_main',$post->ID); ?>
下図のような感じ。
するとスマホでも<span>で指定したフォントカラーが反映されるようになります。