信頼感のある青系。
STEP 03
CSSでサイトの色を変更する
Template 001では、CSSの最初に「初心者向け編集エリア」を用意しています。複雑なCSSを探さなくても、色の値を数か所変えるだけでサイト全体の印象を変更できます。
1. style.css を開く
Template 001のデザインは、主に次のCSSファイルで指定しています。
template001-simple-business/css/style.cssファイル上部に「初心者向け編集エリア」というコメントがあります。まずはそこだけを編集します。
2. CSS変数は「色の設定表」のようなもの
同じ色を何十か所にも直接書かず、名前を付けてまとめて管理する仕組みです。
初心者向け編集エリアstyle.css
:root {
/* サイトのメインカラー */
--main-color: #315a8a;
/* 濃い背景 */
--dark-color: #172235;
/* 通常の文字色 */
--text-color: #333846;
}--main-color が使われているボタンや装飾は、ここを1か所変えるだけでまとめて変更できます。
3. まずメインカラーを変更する
例えば青系から緑系へ変更する場合は、16進カラーコードを書き換えます。
落ち着いた緑系。
変更例style.css
--main-color: #2f6f5e;セミコロン「;」を消さない： CSSでは各設定の最後にある
; が重要です。色の部分だけを書き換えます。4. 背景色・文字色も必要なら変更する
明るい雰囲気、落ち着いた雰囲気などに合わせて補助色も調整できます。
配色例style.css
:root {
--main-color: #2f6f5e;
--dark-color: #17352e;
--text-color: #303a36;
--soft-bg: #f4f8f6;
}一度に全部変えず、メインカラー→濃い色→薄い背景の順に変更すると調整しやすくなります。
5. #から始まる6桁は色コード
#315a8a のような表記は16進カラーコードです。一般的なカラーピッカーで好きな色を選び、その値をコピーして使えます。
#ffffff：白#000000：黒#333333：真っ黒より柔らかい濃いグレー#f5f5f5：薄いグレー背景
色選びの基本： メインカラーを1色決め、濃淡を組み合わせるとまとまりやすくなります。最初から多くの色を使いすぎない方がきれいです。
6. 読みやすさを壊さない配色のコツ
文字と背景の差をしっかり付ける
薄いグレーの文字を白背景に載せるなど、差が小さすぎる配色は読みづらくなります。
ボタンは周囲から見つけやすくする
問い合わせや詳細ページへのボタンは、背景と同化しない色にします。
ブランドカラーを全部の場所に使わない
強い色は見出しやボタンなど重要部分に絞ると、デザインが落ち着きます。
7. 色変更後のチェック
- 文字が背景に埋もれていない
- ボタンの文字が読める
- リンクが見つけやすい
- 濃い背景上の白文字がきれいに見える
- PC・スマートフォンの両方で違和感がない
GUIDE PROGRESS
STEP 4へ →最初の3ステップが完了です。
文字・画像・色が変更できれば、テンプレートを自分のサイトとして使う基本は身につきました。次はメニュー編集へ進みます。