既にあらかた構築が終わっている WordPress サイトで、コンセプトカラーの変更を行いました。
実際にサイト全体の色味を変更しながら、「やっていて良かった！」と思ったことをご紹介します。
やっていて良かったこと
テーマ側で設定されているCSS変数を利用していた。
多くのテーマでは、さまざまな値を CSS 変数として定義しています。
CSS 変数とは、CSS で利用したい特定の値に名前を付けて再利用できるようにしたものです。
たとえば、メインカラーを #3498db と定義し、変数 --main-color として使用することで、複数の要素で統一された値を手軽に利用できます。
値に変更が生じた際も、定義した変数の値を変更するだけでサイト全体に一括して反映されるため、メンテナンスが容易になります。
その利点を活かすため、デザイン調整やカスタマイズのために独自で CSS を追加する際も、なるべく既にテーマ側で定義されている変数を利用するようにしていました。
たとえば、テーマカスタマイザーで指定しているメインカラーは、テーマ側でも変数として定義されることが多いです。定義された変数を利用していれば、カスタマイザーで変更した色味が、独自にあてた CSS にも同じように反映されてくれます。
独自に利用している値もCSS変数で管理していた。
上記と同じで、カスタマイザーで指定できない色も、あらかじめ自分で CSS 変数として宣言した上で利用するようにしていました。
サイト全体の色味調整となった場合、単純に元の色を丸ごと置き換えるだけでは対応できないケースもあります。背景色をメインカラーにしていたボタンが、アクセントカラーに置き換わる、などです。
部分的に別の色に置き換えたい時は、定義していた変数の値ではなく、クラスに対して指定した変数を別のものに置き換えることで対応できます。
たとえば、background-color: var(—-main-color); を background-color: var(—-accent-color);に変更すればいいのです。
カラーコードだけでなく、部分的に利用する font-family や、border-radius の値など、CSS 変数を利用しておくことで変更に対応しやすくなるものはたくさんあります。
まとめ
頻繁には発生しないことですが、先方の事業方針の変更などで、構築済みのサイト全体の色味調整が必要になることはあり得ます。 普段からCSS 変数を積極的に利用しておくことで、突然の変更にもスムーズに対応できることがよくわかりました。
変更・調整しやすくしておく工夫は他にもいろいろありそうです。
今回やっていて特に手間を感じたのはアイコン等の画像の差し替えでした。
単色のアイコンも、ファイルのパスを記述して呼び出す方法を利用していましたが、記載方法を工夫すれば画像そのものを差し替えることなくコードを直接書き換えて対応できそうでした。 その辺りも今後は検討していきたいです。