配布しているテンプレート内には、「root」による色変えが可能なテンプレートがあります。
「root」による色変え方法について、簡単にまとめました。カスタマイズする際にはぜひ参考にしてください！
rootとは
CSS内にある記述で、この部分に記述した内容を、サイト内のデザインで使い回すことができるものです。
当サイトが配布しているテンプレートでは、「root.css」というファイルで管理しています。
/*
記述の例
_________________________________________*/
:root {
--color-text: #fff;
--color-main: #6B62BF;
--color-second: #393371;
--color-accent: #922C6D;
--color-primary: #1E1D2B;
}左側の「–color-text」～等となっている部分がその名称で、右側が指定されている内容です。
当サイトのテンプレートで色変えが可能なものは、色の指定をすべてこの名称で行っているので、右側を変更するだけで、サイトの色全体が変えられる仕組みです。
※基本的にフォントもこちらに入れているので変更可能ではありますが、Webフォントの場合は読み込みが必要なので、ここを変えるだけでは変更ができません。
実際に色を変更する
色を変更する場合は、ダウンロードしたフォルダ内から「root.css」を探して、その中で変更を行います。
※どこに入っているかは、同梱している「フォルダ構成」の画像を参考にしてください！
無難なグレーとかも入れているので長くなっていますが、メインの色については、基本的に下記のような書き方になっています。
/*
Cocktail Night テンプレートの参考例
_________________________________________*/
:root {
--color-text: #fff;
--color-main: #6B62BF;
--color-main-rgb: 107, 98, 191;
--color-second: #393371;
--color-second-rgb: 57, 51, 113;
--color-accent: #922C6D;
--color-accent-rgb: 146, 44, 109;
--color-primary: #1E1D2B;
--color-primary-rgb: 30, 29, 43;
}変更したいものの右側を、書き換えてしまえばOKなのですが、書き換える際には、
- カラーコード (#から始まる数字)
- RGB (カンマで区切られた3つの数字)
があるため、注意してください。
左側の名称部分に「-rgb」とついていないものは、カラーコードで指定します。左側の名称部分に「-rgb」とついているものは、カラーコードで指定した色のRGB版を記入します。
/* 変更するのが --color-main の場合 */
--color-main: #6B62BF; /* こちらはカラーコードで指定 */
--color-main-rgb: 107, 98, 191; /* こちらは「--color-main」の色をRGBに変換したものを指定 */もし、指定したい色のRGBがわからない！という場合は、カラーコードを入力すると、RGBに変換してくれるサイトなどもあるので、よければ使ってみてください＊
▼私もお世話になっているサイト様です！