はてなブログのCSSで色を変える時に変数を使うとちょっとだけ便利

まだブログのデザインが決まっていないので色や配置などをちょこちょこ変更しています。いろんな場所に同じ色番号を書くのがめんどくさいので変数をつかってみました。

変数とは

一か所で数値や文字列を定義して名前を決めておくと、別の場所でその名前を書くと定義済みの数値などを書いたのと同じになります。

イメージ

名前（変数名）を決める

「AAA」という名前（変数名）に色番号「#000000」を定義する。
名前（AAA）= #000000

別の場所で使用

色を名前（変数名）で指定する。
color = 名前（AAA） が color = #000000 と同じ意味になります。

こんな感じの使い方

名前（AAA）= #000000

color = 名前（AAA）
color = 名前（AAA）
color = 名前（AAA）

上の #000000 を変更すれば下の3か所を全て変更したのと同じになります。

実際の使い方

名前（変数名）を決める

:root {
    --charactor-color: #454545;
}

--charactor-color が名前（変数名）にになります。

別の場所で使用

body {
    background-color: var(--charactor-color) ;
}

が

body {
    background-color: #454545 ;
}

これと同じ意味になります。

こんな感じで使っています

いくつか色を定義して、いろんな場所で使用しています。

/* カラー定義 */
:root {
    --main-color: #5DB98B;
    --background-color: #f5f5f5;
    --box-background-color: #f0f0f0;
    --frame-color: #ddd;
    --charactor-color: #454545;
}

/* 背景色 */
body {
    background-color: var(--background-color);
}

/* ブログタイトルの文字色 */
#title a{
    color: var(--main-color);
}

　　　　．
　　　　．
　　　　．

シンタックスカラーを「css」で定義していますがうまくいっていません、なんでだろう？