WordPress（SWELLテーマ）の色が変更できない問題を解消｜原因を特定して正常な状態へ修正した事例
「SWELLの設定から色を変更したのに反映されない…」
「ヘッダーや見出しカラーを変更しても元に戻ってしまう」
「カスタマイズ画面では変更されているのにサイト側に反映されない」
このようなご相談は、SWELLテーマを利用しているWordPressサイトで意外と多くあります。
特に、
- CSSを追加している
- 過去に別の制作会社がカスタマイズしている
- 子テーマで独自調整されている
といったサイトでは、SWELL本来の設定よりも別のCSSが優先されてしまい、色変更が正常に反映されないケースがあります。
今回は実際に行った、SWELLテーマで「色が変更できない」状態を調査し、原因を特定して正常な状態へ修正した事例をご紹介します。
ご相談内容
今回のケースでは、
- ヘッダー色
- 見出しカラー
- 一部デザインカラー
などをSWELLのカスタマイズ設定から変更しても、サイト側に反映されない状態でした。
クライアント様側でも、
- SWELL設定確認
- キャッシュ削除
- ブラウザ更新
などを試されたそうですが、改善しない状況でした。
特にSWELLは、本来であれば比較的直感的に色変更ができるテーマのため、
「設定しても変わらない」
という状態は、何らかの上書きや競合が発生している可能性が高いです。
原因調査で確認した内容
まずは現在読み込まれているCSSを確認し、どの設定が優先されているのかを調査しました。
調査の結果、
SWELLテーマの設定よりも優先されるCSSが別途記述されており、
- ヘッダー色
- 見出し色
- リンクカラー
などが上書きされている状態でした。
特にCSSでは、
- 後から読み込まれたCSS
- !important指定
などが優先されるため、
テーマ設定が正しくても、別CSSによって反映されないケースがあります。
実際に行った修正内容
今回のケースでは、原因となっていたCSS設定を整理し、
- 不要な上書きCSS削除
- 優先順位調整
- SWELL設定との整合性確認
を行いました。
また、
- 子テーマ側CSS
- 追加CSS
- カスタムコード
なども確認し、影響範囲を調査しています。
修正後は、
SWELL側で変更した色設定が正常に反映される状態へ改善しました。
SWELLテーマで色変更できない時によくある原因
SWELLテーマで色変更が反映されない場合、実際には以下のケースが多いです。
追加CSSで上書きされている
「外観 → カスタマイズ → 追加CSS」に記述された内容が優先されているケースです。
子テーマ側でCSS調整されている
過去制作時のカスタマイズが残っていることがあります。
!importantが使用されている
!importantが指定されていると、通常のテーマ設定では上書きできない場合があります。
キャッシュが残っている
ブラウザやキャッシュプラグインによって古いCSSが表示されることがあります。
そのため、Google Chromeのシークレットモードで確認すると正常表示されるケースもあります。
CSS読み込み順の問題
CSSは上から順番に読み込まれるため、後から読み込まれるCSSが優先されます。
SWELLは便利な反面、カスタマイズ競合が起こることもある
SWELLは非常に使いやすく人気の高いWordPressテーマですが、
- 独自CSS追加
- プラグイン追加
- 過去カスタマイズ
などによって、テーマ設定との競合が発生することがあります。
特に複数人が運用しているサイトでは、
「どこでCSSを書いたか分からない」
という状態になることも少なくありません。
今回の修正結果
今回のケースでは、
原因となっていたCSS上書きを整理したことで、
- ヘッダー色
- 見出しカラー
- 各種デザイン設定
が正常に反映される状態へ改善しました。
また、今後も管理しやすいように、不要なCSS整理も合わせて実施しています。
色変更が反映されない時は無理に触りすぎないのがおすすめ
色変更がうまくいかない時、
- とりあえず!importantを付ける
- CSSを追加し続ける
などを繰り返してしまうケースがあります。
しかしこれを続けると、さらに管理が複雑になり、
別箇所のデザイン崩れにつながることもあります。
そのため、まずは「なぜ反映されていないのか」を調査することが重要です。
無料相談受付中
当方では、
- SWELLテーマ修正
- CSS調整
- 色変更不具合修正
- デザイン崩れ修正
- WordPressカスタマイズ相談
などを承っております。
また、
- 365日対応
- 8:00〜23:00対応可能
- 最短即日対応
個人対応だからこそ、柔軟かつ迅速に対応可能です。
SWELLテーマの色変更やCSS不具合でお困りの際は、お気軽にご相談ください。
