【てがきノート】プライマリーカラー・セカンダリーカラーなどの色は一箇所で変更できます

てがきノートでは、プライマリーカラー（メインカラー）・セカンダリーカラーなどの色をCSS変数で制御しています。

CSS変数を使うと繰り返し使う色などを一か所で定義し管理することができるため、例えばプライマリーカラーを一箇所を変更するだけでプライマリーカラーが適用されている箇所すべてが一気に変更できます。

style.cssの:rootから変更できます
お好きな色を調べる方法
カラー参考になるWEBサイト
16進法(#ffffff など)のカラーコードからRGBに変換できるWEBサイト

style.cssの:rootから変更できます

プライマリーカラー、セカンダリーカラーなどを変える場合はスキンのstyle.cssの: rootから色を変更できます。

以下の:rootから書き直してください。

以下の:rootはてがきノートのブルーコーラルです。他のてがきノートのスキンもこのようになっております。

/* カラー設定 */
:root {
	--primary-color: 143, 187, 234;
	--secondary-color: 240, 171, 165;
	--back-color: 240, 235, 232;
	--black-color: 65, 64, 62;
	--white-color:255, 255, 255;
	--gray-color: 221, 221, 221;
	--gray-light-color: 247, 247 ,247;
}

プライマリーカラー（メインカラー）を変える場合は、–primary-colorの値を変えてください。
セカンダリーカラーを変える場合は、–secondary-colorの値を変えてください。

お好きな色を調べる方法

色を調べるにはWEB色見本が便利です。

WEB色見本原色大辞典 - HTMLカラーコード

色の名前とカラーコードが一目でわかるWEB色見本

使い方は以下の通りです。

他にもカラーの参考になるサイトを後述しておりますのでよろしければそちらもご覧ください。

WEB色見本でプライマリーカラーなどを変更する流れ

ステップ2
ダッシュボード > 外観 > テーマエディター > skins > skin-tegakinote-bluecoral(などお好きなスキン) > style.cssを開く
この状態でstyle.cssを開いて置いたままにしておきます。
ステップ2
別タブでWEB色見本から気になる色をクリック
WEB色見本を開き、この中から気になる色をクリックします。
ステップ3
WEB色見本から◯◯◯（数字）,◯◯◯（数字）,◯◯◯（数字）をコピー
-primary-color-rgbなど、◯◯◯（数字）,◯◯◯（数字）,◯◯◯（数字）となっている部分を入れ替えたい場合は、WEB色見本から3種類の数字をコピペします。
ステップ4
style.cssの–primary-colorをステップ3でコピーした3種類の数字に置き換え
開いておいたstyle.cssの–primary-colorの値をコピーしたコピーした3種類の数字に入れ替ます。
ステップ5
「ファイルを更新」をクリック
style.cssの「ファイルを更新」をクリックして色の変更が完了です。
ステップ6
ホームページを確認
ホームページを確認するとこのようにお好きな色に変わりました！