【ha-Basic】テーマ内のカラー要素のみをCSSでカスタマイズできるようにしました

ある程度完成したので私の管理しているいくつかのサイト（１ドメインでサブディレクトリにインストールしているものがあるので結構な数があります）で実際に【ha-Basic】テーマを使用するようになりました。

そしてそこで起こりうる問題などを少しずつ改善してブラッシュアップをさせています。
※残念ながら今のところ使用いただいている方がいませんので都度テーマファイルを最新にしていっています。

そこで、色を変更しようと試みたのですが・・・どうにもめんどくさい！！（作者としてあるまじき発言でした・・）

単純に色を変えるだけなのにデベロッパーツールで要素を見て追加CSSへ転記して・・・これどんなテーマでも当たり前のことなのですが、カラー変更のカスタマイザーを持たないことにしている【ha-Basic】でこれを行うのは本当に大変です。とっても使う方に不親切だと実感しました。

何とかもう少し楽にならないかなぁ・・・・と思慮した結果、そうだ！！カラー部分だけをカスタマイズできるようにすればいいんだ！！という結論に至りました。

テーマCSSから色のみを変更できるようにしました

テーマにはデザイン要素を指定するため「style.css」というファイルがあるのはご存知ですね。そして、そこには文字の大きさやら太さやらいろいろな要素がセレクタ（場所）ごとにごちゃごちゃと書かれています。

これを色の部分だけ見つけて編集していくのはとっても大変・・・ということで、「style.css」から色の部分だけを抜き出した別のCSSを用意しました。

テーマファイルの中にある「a-color-style.css」というのがそうです（テーマ編集からも表示・編集ができます）。

ここには【ha-Basic】で色を指定している部分だけが書かれていますので、それを編集すれば簡単に色の変更ができるというちょっと便利な仕組みです。

CSSファイルの読み込み順

【ha-Basic】テーマのCSS読み込み順は以下の通りです

1. 「style.css」を読み込む
2. 「a-insert-css.css」を読み込む
3. 「a-color-style.css」を読み込む

優先順は逆になりますので、最終的に同じセレクタであれば「a-color-style.css」のものが最優先で適用されます。

後から元に戻せるCSS編集の仕方

これで色だけを簡単に編集できるようになったわけですが、ルンルン気分でカラーコードを変更してしまうと「やっぱり元に戻そう」という際に元の状態が分からなくなってしまいます（当たり前ですけど）。

それじゃあもう一回「a-color-style.css」を上書きしてやり直すしかないのか・・あーめんどくさ！！

いえいえそんなことはありません。変更する前にちょっと工夫する癖をつけるだけで簡単に元に戻せるんです。一部を例に説明しますね。
※この方法はすべてのCSSで使えます（ソースコードはやり方が異なるものもあるので今回はCSSに限定します）

「a-color-style.css」の冒頭にあるhタグの文字色

/********** 見出しタグ **********/
h1, h2, h3, h4, h5, h6 {
	color:#333;
}

「color:#333;」というのが文字の色を少し薄めの黒にしてねという指示なのですが、直接変更する前に一行下へコピーしてコメント（適用されないよう）にします。

実際にはこんな感じです

/********** 見出しタグ **********/
h1, h2, h3, h4, h5, h6 {
	color:#333;
	/* color:#333; */
}

変更したのに表示が変わらないときは

上の優先順も合ってるし、カラーコードも合ってるのに表示が変わらない、そんな時はブラウザのキャッシュをクリアをしてみてください

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。