このページではWordPressテーマ「SANGO」でサイトカラーを変更する方法を解説します。Webデザインの知識がなくても簡単な操作で自分好みの配色にすることができます。
目次 非表示
カスタマイザーを開く
まずは、WordPressでカスタマイザーを開きます。
管理画面⇒外観⇒カスタマイズ
「色」をクリック
次に上から2番目にある「色」を選びます。
すると下のように色の設定ウィンドウが左側に表示されます。右側にはサイトのプレビュー画面が表示されるのでここを見ながら、色を決めていくと良いのではないかと思います。
なお、それぞれの色は下のように直感的に選ぶことができます。
各設定カラーの解説
ここからはそれぞれの設定色の解説をしていきます。「背景色」はその名の通りサイトの背景に使われる色で分かりやすいかと思うので省略します。
メインカラー
メインカラーは最も多くの部分に使われる色です。例えば、以下の部分にメインカラーは使用されます。
記事一覧
目次（TOC+プラグイン使用時）
一部の見出しなどの記事パーツ
一部のボタンなど
ここまで紹介したのは初期設定でメインカラーを使うパーツの一例です。もちろんCSSをいじれば、自分好みでそれぞれのパーツを別色に変えることもできます。
多くの部分が同色になり不便に感じられるかもしれませんが、色数を制限することは見やすいデザインにするためにとても重要です。
薄めの下地色
「何に使われるのか」がいちばん分かりづらいのがこの「薄めの下地色」かもしれません。この色が使用される部分はかなり限定的です。
ひとつめに、記事ページの下部に「この記事を書いた人」を挿入する設定をした場合、その背景色として使用されます。
他に下地色が使用されるのは、SANGOオリジナルの「見出し」や「箇条書き 」を挿入するときです。これらのデザインの中には、カスタマイザーで設定したメインカラーやアクセントカラー、下地色を用いるものもあります。
例えば、下の見出しは「下地色が背景」＋「メインカラーが下線」というデザインになっています。
詳しくは以下の記事で解説しています。
アクセントカラー
アクセントカラーにはメインカラーと並べたときに目立ち、かつ違和感の無い色を選びましょう。アクセントカラーは以下の部分で使用されます。
円形シェアボタン（記事ページ）
新着記事のNEWマーク
人気記事ランキングの番号
記事内のボタンやボックス・見出しなど
リンク色
その名の通り、リンクテキストに使用されます。リンクだということが読み手に伝わりやすい色（青が一般的）を選ぶようにしましょう。
ヘッダー背景色
ヘッダー背景色はその名の通り、ページ最上部のヘッダーバーで使用されます。
また、ページ最下部のフッターバーにもここで選んだ色が使用されることにご注意ください（始まりと終わりは同じ色だとなんとなくスッキリするので）。
ヘッダータイトル色
ヘッダータイトル色はサイトタイトルのテキスト色です。テキストではなくロゴ画像を使っている場合には、この色は使用されません。
ヘッダーメニュー色
ヘッダーメニュー色は以下の3部分に使用されます（どれも設定しなければ表示されないメニューです）。1つめにデスクトップ表示でのメニューです。
2つめにモバイル表示でのヘッダースクロールメニューです。
3つめは、画面最下部のフッターバーのメニュー/テキスト色です。
ウィジェットタイトル/背景色
「ウィジェットのタイトル色」と「ウィジェットタイトルの背景色」はサイドバーに表示されるウィジェットのタイトル部分に使われます。好きな組み合わせの色を選べば良いかと思います。
フッターウィジェットの背景色/文字色
フッターウィジェットも設定したときにのみ表示されるパーツです。背景色はウィジェットエリアの背後に塗られる色、文字色はテキストの色です。リンクはopacityというCSSのプロパティを使って少しだけ色が薄くなるようにしています。
配色例
ここまでそれぞれの色設定の意味を解説してきました。ここからは、少しだけ色の組み合わせの例を紹介してみたいと思います。
赤ベース
- 背景色：#f4f4f4
- メインカラー：#f28282
- 薄めの下地色：#ffc6c6
- アクセントカラー：#82d1f2
- リンク色：#4ab8e8
- ヘッダー背景色：#f28282
- ヘッダータイトル色：#FFF
- ヘッダーメニュー色：#FFF
- ウィジェットタイトル色：#FFF
- ウィジェット背景色：#f28282
- フッターウィジェット背景色：#e4e4e4
- フッターウィジェット文字色：#555
緑ベース
- 背景色：#eaeaea
- メインカラー：#40ce9a
- 薄めの下地色：#d9f7de
- アクセントカラー：#82d1f2
- リンク色：#ff9090
- ヘッダー背景色：#40ce9a
- ヘッダータイトル色：#FFF
- ヘッダーメニュー色：#d9f7de
- ウィジェットタイトル色：#40ce9a
- ウィジェット背景色：#d9f7de
- フッターウィジェット背景色：#e4e4e4
- フッターウィジェット文字色：#555
モノクロベース
- 背景色：#eaedf2
- メインカラー：#3d3d3d
- 薄めの下地色：#d7dae0
- アクセントカラー：#ec6767
- リンク色：#ec6767
- ヘッダー背景色：#3d3d3d
- ヘッダータイトル色：#ec6767
- ヘッダーメニュー色：#FFF
- ウィジェットタイトル色：#FFF
- ウィジェット背景色：#3d3d3d
- フッターウィジェット背景色：#555
- フッターウィジェット文字色：#FFF
配色に困ったら下のページを参考にしてみると良いかもしれません（サルワカで作成した配色パターン集です）。
ヘッダーの下
超初心者です。こちらのサルカワさんのサイトデザインのようにヘッダー部分がブルーとオレンジ系グラデーションの2色になっていますがどのように設定すれば2色になりますか？
h3タグの色が反映されない（SANGOアプデの影響？）
こんにちは。 SANGOの子テーマにcssを記述して、次のようにh3見出しの色を変えてきましたが、SANGOのアップデートを実施した先月くらいから、それが反映されなくなりました。 .entry-content h3 { border-left: red solid 0.3em; } ※!importantを付けると反映されますが、他ページで使っている「別のデザインを持つh3タグ」と競合するのでやり…
記事一覧のタイトル欄の背景色の変更
お世話になっております。 トップの記事一覧のページについてです。 投稿記事のサムネイルの下に投稿日時とタイトルが記載される箇所があるかと思います。 その箇所の背景を白ではなく他の色に変更する方法はありますでしょうか？ お手数をおかけいたしますが、ご教示のほどよろしくお願いいたします。
ウィジェット、本文の背景の色を変えたい
こんにちは、コメント失礼します。 ウェジェットのサイドバーに音楽プレイリストを載せているのですが、 そこの背景の色をサイト全体と同じにしたいです。 「ウィジェットタイトルの背景色」の設定で、 タイトルの背景の色は変えられましたが、 ウェジェットの本文の背景も黒に統一したいのですが、色設定の場所が見つかりません。 もしやり方があるのなら、教えていただけますか？
NEWマークの色をアクセントカラー以外に変えたい
NEWマークの色をアクセントカラー以外に変えたいのですが、可能でしょうか？
記事の背景色、記事の文字色を一括で変更したい
注文番号を確認したところ、SANGOを購入してちょうど１年でした。これほどまでに使いやすいテーマを提供してくださりありがとうございます。 昨今、色の配色としてダークモードがトレンドになりつつありますので、私が運営しているブログも背景を黒を基調としたスタイルに変更しようと思っています。 そこで素人質問で恐縮ですが、今まで書いた記事を含めすべての記事の背景色、文字色を変更するカスタマイズの方法をご教授…
ヘッダーメニューの色を変えるには
お世話になっております。 ヘッダーメニューの色を変えるにはどうしたらいいでしょうか？ 教えてください。 よろしくお願いします。
トップページ用の固定ページの背景を変えたい
いつもお世話になっております。 トップページ用の固定ページの背景を変えたい場合、どのようなコードを記述すれば良いでしょうか？
リンクの色
リンクの色をトップページとその他記事で別々に設定はできないでしょうか？ トップページはメニューになっているのでリンクの入っているテキストも黒がいいのですが 記事中のリンクテキストは青で表示といった感じです。 方法があれば教えてください。 よろしくお願いします。
メインカラーが反映されません
他の部分はカスタマイズ画面で変更すれば色が変わるのにメインカラーが反映されなくなってしまいました。 お忙しいところ恐れ入りますが、原因または対処法が分かればご教授お願いいたします。
リンクと下線の色設定
サルワカさん、はじめまして。素敵なテーマありがとうございます。 記事中のリンク部分において、文字色はデフォルトのままに、下線のみ好みの色に設定することは可能でしょうか？ 可能であればマウスホバー時に文字色も下線と同じ色に変えたいと考えています。 お忙しいところ大変恐縮ですが、ご回答いただけると幸いです。
サイドの色の設定について
いつもサンゴ使わせていただいております！ サイトのサイド部分のみの色の変更をしたいです。 具体的には、現在赤い下地に白い文字となっている、search、recent post、検索マークを、全て白い下地に赤い文字にとしたいです。 どのように設定すればよろしいでしょうか。教えていただけますと幸いでございます。
カテゴリーラベルの文字色を変更したい
すてきなテーマを作ってくださって、本当にありがとうございます。 まだまだ不慣れですがワクワクしながらカスタマイズさせて頂いています。 質問なのですが カテゴリーラベルの文字色（白）を他の色に変更することは可能ですか？ 初歩的なことで恐縮ですが、お答えいただけたら幸いです。
カスタマイズを保存しても実際のページに反映されない
カスタマイズの画面上では、色やウィジェトの変更設定が反映されているのですが、サイト画面に行くと、なぜか初期設定のままになってしまいます。 設定方法を教えてください。
ヘッダーメニューの部分のみ色を変えたい
いつもお世話になっています。 SANGO愛が止まらないリエ子です。 ヘッダーメニューの背景色の変更について教えていただけると助かります。 desktop-nav、mobile-nav に対して背景色の変更を子テーマに適用したところ、ヘッダーメニュー部分のみに変更が適用されました。 実際にやりたいことは、ヘッダーメニュー部分を一行丸ごと、帯状に背景色を変更したいのです。 本質問で登録したサイトを見て…
サイトの背景を画像にしたい
こんばんは！ sangoのカスタマイズが楽しすぎて記事作成が進まないリエ子です（汗 ステキすぎるテンプレありがとうございます！ 背景色を画像で設定したいのですが、どこかの設定でできますでしょうか？ ちなみに、ヘッダーについては以下で設定できました。 header.header { background:url(***); } 背景色というのは、記事の背景ではなくブログ全体の背景色でございます。 お…
フッターメニューの色を変えたい
いつもsango使わせていただいております。 配色についての質問なのですが、ヘッダー背景色を白に設定した場合、フッターにあるhomeやprivacy policyも白色なので、同化して見えなくなってしまいます。 ヘッダーは白がいいので、homeなどの文字を黒色にしたいのですが、どのようにすればいいでしょうか。 よろしくお願いいたします。
トップページのヘッダーと背景色を同色にしても、ヘッダー下にぼやっとしたラインが残る
サルワカさんこんにちは。 トップページのヘッダーと背景色を同色にしても、ヘッダー下にぼやっとしたラインが残るんですが、 これを消すことはできますか？ またこのラインの色はどこを変更すると変わりますか？
タグクラウドの背景色を変えたい
いつもお世話になっております。 他の方の質問をざっと確認しましたが、よくある質問でも見つけられなかったのでご質問させていただきます。 タグクラウドの背景のグレー色を変更したいのですが、どのように変更できますでしょうか？ お忙しいところ、大変恐れ入りますが、教えていただけますと幸いです。
フッターリンクの文字色を変えたい
素晴らしいテーマをありがとうございます。 フッターの背景色の変更ができました。（上記3/18のコメント） フォントの色も変更しようとして、 .footer #footer-menu { background-color: 222222; color: ffffff; } としたのですが、index.phpの中での色指定が優先して、 反映されないようなのです。 ご指導いただければ幸いです。
サイドバーのテキスト色を変えたい
お世話になります。 サイドバーのテキスト色を変えるにはどうすればよろしいでしょうか？
ヘッダーメニューのホバー時のアンダーラインの色を変えたい
お世話になります。 とても使いやすいテーマで大変気に入っております。 質問ですが、ヘッダーメニューのホバー時のアンダーラインのみ、色を変えることはできないでしょうか。
モバイルのスクロールメニューの文字色を変更したい
モバイル表示のスクロールメニューの色が変更できないのですが、、、。 外観→カスタマイズ→色→ヘッダーメニュー色では、「パソコン表示での表示されるヘッダーメニューの文字色です。」となっているのですが、スマホのカラーはどこで変更可能でしょうか？
ヘッダーとフッターの背景色を別々に設定をしたい
サルワカくんさん、こんにちは。 ヘッダーとフッターの背景色を別々に設定をしたいのですが、どのように設定すれば良いでしょうか？
グレーっぽいテキストカラーを完全な黒にしたい
デフォルトでグレーになっているテキストの色を全てブラックにしたいのですが、どのようにしたら良いでしょうか？
サイドバーを背景と同じ色にしたい
サイドバーを背景と同じ色にしたいのですが、どのように設定すればよいのでしょうか。 外観→カスタマイズ→色からでは白色のサイドバーを変更できませんでした。