webコンテンツを徹底強化!WordPressサイト制作とプラグイン&テーマ情報・メンテ/エラー対応から、PHP/CSS/javascript、動画・音・イラスト等制作まで扱うコラム
マルチメディアコンテンツ制作読んどけ☆コラム

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

      2021/02/16

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

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

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

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

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

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

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

また、どうしてもCSSでやりたい上級者は『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です。喜びます。)


【カテゴリ】 - CSS
【タグ】 - ,

  関連記事

CSSのみで超軽量な、クリック開閉式ボックスのつくりかた【FAQやよくある質問に・jQuery/javascript不使用】

今回は、管理人がリメイクしていたサイトで、『CSSだけでクリック ...

【CSS】横並びメニューで、最初だけボーダー無しとかにしたい場合は?→擬似クラスfirst-childを、効かない例も紹介

今回は、『メニューなどで、最初の要素だけボーダー無しにしたい』み ...

cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)

今回は、CSSフレームワークなどを使ってサイトを構築していると、 ...

【CSSエディット】『 』みたいな空白スペース・改行タグでレイアウト調整が良くない理由

今回は、管理人がこのサイト(よんどけコラム)のCSSを調整してい ...

【CSS・hover/transition/rotateでアニメーション】jquery無し・アイコン画像や要素をくるっと回転させる機能を実装

今回は、当サイトでもよく取り上げているCSSを使ったアニメーショ ...

【CSSオンリー・超軽量】JavaScriptすら使わない!CSSだけで動くスライダー作ってみた(PC向け横長レイアウト)

今回は、一般的には『クソ重い』とされる、スライダー・スライドショ ...

【jQuery不使用・軽量でお洒落】CSSのみで、タップでふわっと広がって透けるスマートフォンメニューを実装

今回は、CSSのみで動作する、軽量でお洒落なスマートフォンメニュ ...