sucreSWELLのDEMO02を使ってサイトを作り始めたばかりの頃、
「色って、どこで変えるの？」
「変えたら、どこまで影響するの？」
と、私はとても迷っていました。
なんとなく設定してみても、
あとから「ここも変わるんだ…」「ここは別だったんだ…」と気づくことも多く、
少しずつ調整しながら、自分なりに理解していった感じです。
この記事では、
私がほぼ“はじめてに近い状態”からカラー設定を見直していった記録をもとに、
DEMO02の配色を自分好みに整えるまでの流れをまとめています。
「これから色を変えてみたい」
「最初の設定で迷っている」
そんな方の参考になればうれしいです。
カラー設定の前に｜サイト構成の確認
カラー設定を考える前に、
まずはサイト全体の構成を整理しておきました。
関連する記録はこちら👇
✔ あわせて読みたい
▶サイト全体のレイアウト構成はこちら
👉 【SWELL】DEMO02トップページ構成図｜場所・名前・設定まとめ
カラー設定を変更する
DEMO02トップページ｜カラー設定の全体イメージ（全体図）
SWELL（DEMO02）導入直後に設定したカラー項目を、
トップページ全体で整理した図です。
基本カラー設定（サイト全体）
🛠️ WordPress管理画面＜外観＜カスタマイズ＜サイト全体設定＜基本カラー
SWELL基本カラーボックスの設定表
| カラー項目 | 説明（反映される主な場所） | 使用カラー |
|---|---|---|
| ◆ メインカラー | アクセント色・装飾・リンクなど | #d6c6b4（やさしいベージュ） |
| ● テキストカラー | 本文・見出し・メニューの文字色 | #333333（読みやすい定番） |
| 🔗 リンクカラー | リンク文字色、統一感が出る | #a8c0c8（くすみブルー） |
| ○ 背景色 | サイト全体の背景色 | #ffffff（白） |
⇩
お知らせバーのカラー設定
🛠️ WordPress管理画面＜外観＜カスタマイズ＜サイト全体設定＜お知らせバー＜カラー設定
ヘッダーのカラー設定
🛠️ WordPress管理画面＜外観＜カスタマイズ＜サイト全体設定＜ヘッダー＜カラー設定
フッターのカラー設定
🛠️ WordPress管理画面＜外観＜カスタマイズ＜サイト全体設定＜フッター＜カラー設定
記事スライダーのカラー設定
🛠️ WordPress管理画面＜外観＜カスタマイズ＜トップページ＜記事スライダー
⚫︎ 記事スライダーの背景色： #7d9ca3（アッシュブルー）
sucre😄 この一番上にくるメインの色はとても大事。
少し深みのあるブルーで、私好みになりました。しない
メインビジュアルは、テーマ02の初期設定のままにしました。
記事スライダーを設置しているのでメインビジュアの位置に記事スライダーを設置してあるようです。
🛠️ WordPress管理画面＜外観＜カスタマイズ＜トップページ＜記事スライダー＜記事スライダーエリアの文字色
- 背景色：
#7d9ca3（深みのあるブルー） - 文字色：
#ffffff（白でくっきり）
メインビジュアルのカラー設定
02のテーマでは、初期設定で表示しないの設定になっている。
🛠️ WordPress管理画面＜外観＜カスタマイズ＜トップページ＜メインビジュアル
◎表示しない
フォント設定（文字の見やすさ）
フォントをやさしく
🛠️ WordPress管理画面＜外観＜カスタマイズ＜サイト全体設定＜基本デザイン＜フォント設定
「游ゴシック」選ぶと01に近づきま
※ フォントサイズについて
ベースフォントを「游ゴシック」に設定した場合、「中（16px）」ではやや文字が小さく感じたため、
サイト全体のフォントサイズを「大（18px）」に変更しました。
実際の見やすさを優先した調整です。
⑤【メインビジュアルの下の背景色を変更する】
トップページのメインビジュアル画像の直後にある背景色も印象に影響します。
やさしくナチュラルな印象にするには：
画像の直後に表示されるセクションの背景色を以下のいずれかに設定
🛠️ WordPress管理画面＜外観＜カスタマイズ＜トップページ＜メインビジュアル
- くすみブルー： #e6f0f3（やさしいブルーグレー）
- ナチュラルベージュ： #f4f1ed（淡いベージュ）
- テキストが乗る場合は、色のコントラストにも注意（文字色は #555555 などがおすすめ）
⑥【ヘッダー下の帯やカラーエリアを白に変更する】
デモ02では、ヘッダー下に色付きの帯（黄色や青系）が表示されていることがあります。
やさしい印象にするには：
- WordPress管理画面 → 外観 → カスタマイズ → ヘッダー → ヘッダー下エリア（またはカラー設定）
- 帯や背景色を #ffffff（白）に設定し、全体を明るく統一感のあるトーンに整える
- 必要に応じて、余白やセクション間のスペースも調整することでよりナチュラル
まとめ｜少しずつ私らしいサイトへ
sucre今回は、SWELL DEMO02のカラー設定について、
私自身の「はじめてに近い状態」からの記録をまとめてみました。
最初は、
「どこで変えればいいのかわからない」
「思っていた色と違う」
と迷うこともたくさんありましたが、
少しずつ試しながら、自分なりの形を見つけていくことができました。
カラー設定に、これといった正解はありません。
大切なのは、自分が見ていて心地よいかどうかだと思います。
この記事が、
「ちょっと触ってみようかな」
「少しずつ整えてみようかな」
と思うきっかけになれば、とてもうれしいです。
これからも、迷いながら、楽しみながら、
少しずつ“私らしいサイト”を育てていこうと思います。
