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

公開日: 更新日: Ver1.0の更新情報

ある程度完成したので私の管理しているいくつかのサイト(1ドメインでサブディレクトリにインストールしているものがあるので結構な数があります)で実際に【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; */
}
同じものを2行にして、1つの前後にそれぞれ「/* 」「 */」を付けます。これをコメントアウトといいます。その後コメントになっていない方のカラーコードを変更すれば、元の状態を保存したまま変更ができるようになり、いざ元に戻す場合にも元に戻すだけ!!これならわざわざ元の色を調べる必要もありませんね。

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

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

キャッシュのクリア?どうやるの?

キーボードからブラウザのスーパーリロード(キャッシュクリア)をする方法(Windows用)

CSSの編集後すぐに変更が適用されないときに以下の方法で一時保存されている情報をクリアします

  • Google Chrome/Microsoft Internet Exproler/Mozilla Firefox
  • ctrlを押しながらf5
  • Microsoft EDGE
  • F5を押す、またはctrlを押しながらR
  • Apple Safari
  • ctrlを押しながらR

いつでもご相談・お見積りの依頼を受け付けています

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

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】