【SWELL】基本カラーでメインカラーを決める手順
SWELLの色は、「基本カラー」でまとめて決められます。最初に決めておくと、見出しやボタンなど、サイトの目立つところの色がそろいます。
この記事では、「基本カラー」の「メインカラー」を決めて、公開するところまでを扱います。フォントやヘッダーの色は扱いません。
手順の要点：「外観」→「カスタマイズ」→「サイト全体設定」→「基本カラー」で、「メインカラー」を決めて「公開」する。
この記事でできること
- 「基本カラー」の場所がわかる
- メインカラーを変えて、サイトに反映できる
- 変えたあとの表示を、確かめられる
メインカラーって、何に使われる色ですか？
見出しやボタンなど、サイトの目立つところに使われる色です。会社のロゴの色に合わせておくと、どのページを開いても「この会社のサイト」だと伝わりやすくなります。
目次
前提
- 環境：WordPress 7.1、テーマはSWELL（2026年11月時点の管理画面です）
- 必要な権限：管理者
- 所要時間の目安：10分ほど
- 先に用意するもの：使いたい色のカラーコード（例：#1a3c6e のような、#から始まる6けたの文字）
SWELLの公式マニュアルでは、「基本カラー」の4つの項目を、次のように説明しています。
| 項目 | 公式マニュアルの説明 |
|---|---|
| メインカラー | 見出しやボタンなど、サイト内の目立つ箇所で使われる色 |
| テキストカラー | 本文などサイト全体の文字色 |
| リンクカラー | 記事本文中のリンクの文字色 |
| 背景色 | サイト全体の背景色 |
ヘッダーとフッターの色は、「基本カラー」ではなく、カスタマイズ画面の「ヘッダー」「フッター」で別に決めます。フォントは、「サイト全体設定」の「基本デザイン」にある「フォント設定」で決めます。どちらも、この記事では扱いません。
メインカラーを決める
この手順で、メインカラーが変わります。
- 管理画面の左のメニューで、「外観」→「カスタマイズ」をクリックします。
- 「サイト全体設定」をクリックします。
- 「基本カラー」をクリックします。
- 「メインカラー」の「色を選択」をクリックします。
- 色の選択欄に、用意したカラーコードを入力します。
- 画面の上にある「公開」をクリックします。
下の帯は、このページに入れた見本です。
この帯の背景は、このサイトのメインカラーです。色を変えると、ここも同じ色に変わります。
できたか確かめる
次の3つで確かめます。
- 「基本カラー」の「メインカラー」に、入力した色が出ていること
- カスタマイズ画面のプレビューで、見出しやボタンの色が変わっていること
- 公開したあと、サイトのトップページを開いて、同じ色になっていること
よくあるつまずき
| 症状 | 原因 | 直し方 |
|---|---|---|
| 「公開」を押したのに、サイトの色が変わらない | ブラウザや、サイトのキャッシュに、古い表示が残っている | ブラウザを再読み込みする。まだ変わらないときは、キャッシュの設定を見直す |
| ヘッダーの色だけ、別の色のまま | ヘッダーの色は、「基本カラー」とは別の項目になっている | 「ヘッダー」の「ヘッダー背景色」を確かめる。ヘッダーバーの背景色は、色を指定しないとメインカラーが使われる |
| コンテンツの部分だけ、白いままになる | 「基本デザイン」で、コンテンツの背景を白にする設定が入っている | 「サイト全体設定」の「基本デザイン」の「コンテンツの背景を白にする」を確かめる |
まとめ
やること：「外観」→「カスタマイズ」→「サイト全体設定」→「基本カラー」で、「メインカラー」を決めて「公開」する
確かめ方：プレビューと、公開後のトップページで、見出しやボタンの色を見る
つまずいたら：ヘッダーの色の項目と、コンテンツの背景の設定を見直す
次の一歩
固定ページをトップページにする設定は、公開済みの次の記事で扱っています。
