WordPress CSSで色が変わらない時『functions.phpやテーマカスタマイザー』もチェック

2017/09/07 2021/02/16

今回は、ワードプレスのサイト制作をするとき、ひっかかりそうなポイントについてです。最近ワードプレスサイト制作のお仕事をしていたんですけど、たまに、CSSなどを調整しても色がかわらないポイントなどがあって困っていました。どういう状況かさっそく見ていきましょう。

1 テーマによっては、ＣＳＳ使っても色がかわらないところがある！
2 ＣＳＳで色がかわらないときのチェックポイント
3 ■まとめ

テーマによっては、ＣＳＳ使っても色がかわらないところがある！

管理人はいつも、ワードプレス管理画面の『外観→テーマ編集』というように入って、ＣＳＳからカラー指定などを行っています（color:#000000;みたいな）。しかし・・・

テーマによっては色指定ＣＳＳが効かないものがあります。たとえばヘッダーの部分のＣＳＳで、サイトタイトルなどはフォントサイズを小さくしたりできましたが、『#f5b730（山吹色）』のサイトタイトルが、なんどやっても反映しませんでした。このほかにも『テーマstingerで文字色がＣＳＳでかわらない』みたいなのもあるようです。

ＣＳＳで色がかわらないときのチェックポイント

テーマカスタマイザーでおこなう

管理画面についている、こういう感じで、パーツごとに色を指定するものです。ＣＳＳほど細かく指定できないことが多いけど、こちらに変更したい部分がある場合は、こちらで行います。

また、どうしてもＣＳＳでやりたい上級者は『phpファイルのテーマカスタマイザー・色指定部分をカットしたり書き換える』などという手もあります。

phpファイルで指定してある部分を探す（functions.phpなど）

functions.php
// Set up the WordPress core custom background feature.
	add_theme_support( 'custom-background', apply_filters( 'ribbon_lite_custom_background_args', array(
		'default-color' => '#EBEBEB',
		'default-image' => '',

functions.phpを見ていたら、テーマの基本色を設定していた部分が見つかりました。しかし、表記はcustom-backgroundで『#EBEBEB（薄いグレー）』ということからわかるように、背景でした。

テーマによっては『functions.php』で指定している場合もあるかもしれません。とはいえ、ちょっとのphp記述ミスでサイトが表示されなくなる危険性もあるため、慣れていない方にはハードルが高い部分でもあります。

今回はコレだった！custom-header.php

custom-header.php (inc/custom-header.php
'default-text-color'	=> '4d4d4d',

『ribbon lite』というテーマだったんですけど、これには『custom-header.php』というのがありました。ヘッダーのタイトル部分がずっと濃いグレー（#4d4d4d）でしたが、どうやらここで指定されていたようです。これが、テーマのCSSより後から読み込み、優先で反映されていたようです。これをカットすることにより・・・

得意のCSSエディットで反映させられるようになります。

■まとめ

CSS色指定が効かないテーマでは『テーマカスタマイザーで行う・およびそこのphpを書き換えてCSSでやる』『functions.phpや、該当部分含むパーツを出力するphpをチェックし書き換える』などで対応が可能になることと思います。（テーマ構造によっては、カスタマイザーがヘッダーstyleタグ内CSSを出力し、これが後から読み込まれたりするので、テーマCSSをいくら変更しても上書きしてしまう、ということがある。）

こういった点を頭に入れ、思い通りのサイトカスタマイズをしてみてください。（不明な部分は、管理人に発注いただいてもokです。喜びます。）