色の設定をしよう

このページではWordPressテーマ「SANGO」でサイトカラーを変更する方法を解説します。Webデザインの知識がなくても簡単な操作で自分好みの配色にすることができます。

カスタマイザーを開く

まずは、WordPressでカスタマイザーを開きます。

カスタマイザーの位置

管理画面⇒外観⇒カスタマイズ

「色」をクリック

次に上から2番目にある「色」を選びます。

「色」を選ぶ

すると下のように色の設定ウィンドウが左側に表示されます。右側にはサイトのプレビュー画面が表示されるのでここを見ながら、色を決めていくと良いのではないかと思います。

カスタマイザーが開く

なお、それぞれの色は下のように直感的に選ぶことができます。

メインカラー


各設定カラーの解説

ここからはそれぞれの設定色の解説をしていきます。「背景色」はその名の通りサイトの背景に使われる色で分かりやすいかと思うので省略します。

メインカラー

メインカラーは最も多くの部分に使われる色です。例えば、以下の部分にメインカラーは使用されます。

記事一覧
トップページの記事一覧

目次(TOC+プラグイン使用時)
目次

一部の見出しなどの記事パーツ

一部のボタンなど
ボタン

ここまで紹介したのは初期設定でメインカラーを使うパーツの一例です。もちろんCSSをいじれば、自分好みでそれぞれのパーツを別色に変えることもできます。

MEMO

多くの部分が同色になり不便に感じられるかもしれませんが、色数を制限することは見やすいデザインにするためにとても重要です。


薄めの下地色

「何に使われるのか」がいちばん分かりづらいのがこの「薄めの下地色」かもしれません。この色が使用される部分はかなり限定的です。
ひとつめに、記事ページの下部に「この記事を書いた人」を挿入する設定をした場合、その背景色として使用されます。

この記事を書いた人

他に下地色が使用されるのは、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

配色に困ったら下のページを参考にしてみると良いかもしれません(サルワカで作成した配色パターン集です)。

配色パターン見本40選:ベストな色の組み合わせ確認ツール
配色パターン見本40選:ベストな色の組み合わせ確認ツール

マテリアルデザインカラー:色の組み合わせ見本集
マテリアルデザインカラー:色の組み合わせ見本集

107 COMMENTS

アバター
yuko 2021/06/19

ヘッダーの下

超初心者です。こちらのサルカワさんのサイトデザインのようにヘッダー部分がブルーとオレンジ系グラデーションの2色になっていますがどのように設定すれば2色になりますか?

回答を見る
アバター
Leon 2021/03/05

h3タグの色が反映されない(SANGOアプデの影響?)

こんにちは。 SANGOの子テーマにcssを記述して、次のようにh3見出しの色を変えてきましたが、SANGOのアップデートを実施した先月くらいから、それが反映されなくなりました。 .entry-content h3 { border-left: red solid 0.3em; } ※!importantを付けると反映されますが、他ページで使っている「別のデザインを持つh3タグ」と競合するのでやり…

回答を見る
アバター
EO 2020/09/08

記事一覧のタイトル欄の背景色の変更

お世話になっております。 トップの記事一覧のページについてです。 投稿記事のサムネイルの下に投稿日時とタイトルが記載される箇所があるかと思います。 その箇所の背景を白ではなく他の色に変更する方法はありますでしょうか? お手数をおかけいたしますが、ご教示のほどよろしくお願いいたします。

回答を見る
アバター
メイ 2020/08/26

ウィジェット、本文の背景の色を変えたい

こんにちは、コメント失礼します。 ウェジェットのサイドバーに音楽プレイリストを載せているのですが、 そこの背景の色をサイト全体と同じにしたいです。 「ウィジェットタイトルの背景色」の設定で、 タイトルの背景の色は変えられましたが、 ウェジェットの本文の背景も黒に統一したいのですが、色設定の場所が見つかりません。 もしやり方があるのなら、教えていただけますか?

回答を見る
アバター
Takuya 2020/08/21

NEWマークの色をアクセントカラー以外に変えたい

NEWマークの色をアクセントカラー以外に変えたいのですが、可能でしょうか?

回答を見る
アバター
きゃんねん 2019/08/12

記事の背景色、記事の文字色を一括で変更したい

注文番号を確認したところ、SANGOを購入してちょうど1年でした。これほどまでに使いやすいテーマを提供してくださりありがとうございます。 昨今、色の配色としてダークモードがトレンドになりつつありますので、私が運営しているブログも背景を黒を基調としたスタイルに変更しようと思っています。 そこで素人質問で恐縮ですが、今まで書いた記事を含めすべての記事の背景色、文字色を変更するカスタマイズの方法をご教授…

回答を見る
アバター
名もなき人 2019/06/28

ヘッダーメニューの色を変えるには

お世話になっております。 ヘッダーメニューの色を変えるにはどうしたらいいでしょうか? 教えてください。 よろしくお願いします。

回答を見る
アバター
あおい 2019/06/11

トップページ用の固定ページの背景を変えたい

いつもお世話になっております。 トップページ用の固定ページの背景を変えたい場合、どのようなコードを記述すれば良いでしょうか?

回答を見る
アバター
N 2019/05/12

リンクの色

リンクの色をトップページとその他記事で別々に設定はできないでしょうか? トップページはメニューになっているのでリンクの入っているテキストも黒がいいのですが 記事中のリンクテキストは青で表示といった感じです。 方法があれば教えてください。 よろしくお願いします。

回答を見る
アバター
スタイリッシュぼっち 2019/05/02

メインカラーが反映されません

他の部分はカスタマイズ画面で変更すれば色が変わるのにメインカラーが反映されなくなってしまいました。 お忙しいところ恐れ入りますが、原因または対処法が分かればご教授お願いいたします。

回答を見る
アバター
あき 2019/03/24

リンクと下線の色設定

サルワカさん、はじめまして。素敵なテーマありがとうございます。 記事中のリンク部分において、文字色はデフォルトのままに、下線のみ好みの色に設定することは可能でしょうか? 可能であればマウスホバー時に文字色も下線と同じ色に変えたいと考えています。 お忙しいところ大変恐縮ですが、ご回答いただけると幸いです。

回答を見る
アバター
taro 2019/03/20

サイドの色の設定について

いつもサンゴ使わせていただいております! サイトのサイド部分のみの色の変更をしたいです。 具体的には、現在赤い下地に白い文字となっている、search、recent post、検索マークを、全て白い下地に赤い文字にとしたいです。 どのように設定すればよろしいでしょうか。教えていただけますと幸いでございます。

回答を見る
アバター
ぼっくり 2019/01/08

カテゴリーラベルの文字色を変更したい

すてきなテーマを作ってくださって、本当にありがとうございます。 まだまだ不慣れですがワクワクしながらカスタマイズさせて頂いています。 質問なのですが カテゴリーラベルの文字色(白)を他の色に変更することは可能ですか? 初歩的なことで恐縮ですが、お答えいただけたら幸いです。

回答を見る
アバター
Kazu 2018/11/01

カスタマイズを保存しても実際のページに反映されない

カスタマイズの画面上では、色やウィジェトの変更設定が反映されているのですが、サイト画面に行くと、なぜか初期設定のままになってしまいます。 設定方法を教えてください。

回答を見る
アバター
リエ子 2018/10/25

ヘッダーメニューの部分のみ色を変えたい

いつもお世話になっています。 SANGO愛が止まらないリエ子です。 ヘッダーメニューの背景色の変更について教えていただけると助かります。 desktop-nav、mobile-nav に対して背景色の変更を子テーマに適用したところ、ヘッダーメニュー部分のみに変更が適用されました。 実際にやりたいことは、ヘッダーメニュー部分を一行丸ごと、帯状に背景色を変更したいのです。 本質問で登録したサイトを見て…

回答を見る
アバター
リエ子 2018/10/11

サイトの背景を画像にしたい

こんばんは! sangoのカスタマイズが楽しすぎて記事作成が進まないリエ子です(汗 ステキすぎるテンプレありがとうございます! 背景色を画像で設定したいのですが、どこかの設定でできますでしょうか? ちなみに、ヘッダーについては以下で設定できました。 header.header { background:url(***); } 背景色というのは、記事の背景ではなくブログ全体の背景色でございます。 お…

回答を見る
アバター
taro 2018/10/07

フッターメニューの色を変えたい

いつもsango使わせていただいております。 配色についての質問なのですが、ヘッダー背景色を白に設定した場合、フッターにあるhomeやprivacy policyも白色なので、同化して見えなくなってしまいます。 ヘッダーは白がいいので、homeなどの文字を黒色にしたいのですが、どのようにすればいいでしょうか。 よろしくお願いいたします。

回答を見る
アバター
まとん 2018/08/30

トップページのヘッダーと背景色を同色にしても、ヘッダー下にぼやっとしたラインが残る

サルワカさんこんにちは。 トップページのヘッダーと背景色を同色にしても、ヘッダー下にぼやっとしたラインが残るんですが、 これを消すことはできますか? またこのラインの色はどこを変更すると変わりますか?

回答を見る
アバター
ひまわり 2018/06/25

タグクラウドの背景色を変えたい

いつもお世話になっております。 他の方の質問をざっと確認しましたが、よくある質問でも見つけられなかったのでご質問させていただきます。 タグクラウドの背景のグレー色を変更したいのですが、どのように変更できますでしょうか? お忙しいところ、大変恐れ入りますが、教えていただけますと幸いです。

回答を見る
アバター
MKK 2018/05/06

フッターリンクの文字色を変えたい

素晴らしいテーマをありがとうございます。 フッターの背景色の変更ができました。(上記3/18のコメント) フォントの色も変更しようとして、 .footer #footer-menu { background-color: 222222; color: ffffff; } としたのですが、index.phpの中での色指定が優先して、 反映されないようなのです。 ご指導いただければ幸いです。

回答を見る
アバター
たぬき 2018/04/23

サイドバーのテキスト色を変えたい

お世話になります。 サイドバーのテキスト色を変えるにはどうすればよろしいでしょうか?

回答を見る
アバター
オスギ 2018/03/26

ヘッダーメニューのホバー時のアンダーラインの色を変えたい

お世話になります。 とても使いやすいテーマで大変気に入っております。 質問ですが、ヘッダーメニューのホバー時のアンダーラインのみ、色を変えることはできないでしょうか。

回答を見る
アバター
ガオ 2018/03/24

モバイルのスクロールメニューの文字色を変更したい

モバイル表示のスクロールメニューの色が変更できないのですが、、、。 外観→カスタマイズ→色→ヘッダーメニュー色では、「パソコン表示での表示されるヘッダーメニューの文字色です。」となっているのですが、スマホのカラーはどこで変更可能でしょうか?

回答を見る
アバター
のりぽん 2018/03/18

ヘッダーとフッターの背景色を別々に設定をしたい

サルワカくんさん、こんにちは。 ヘッダーとフッターの背景色を別々に設定をしたいのですが、どのように設定すれば良いでしょうか?

回答を見る
アバター
hiro 2018/02/26

グレーっぽいテキストカラーを完全な黒にしたい

デフォルトでグレーになっているテキストの色を全てブラックにしたいのですが、どのようにしたら良いでしょうか?

回答を見る
アバター
かっしー 2018/02/10

サイドバーを背景と同じ色にしたい

サイドバーを背景と同じ色にしたいのですが、どのように設定すればよいのでしょうか。 外観→カスタマイズ→色からでは白色のサイドバーを変更できませんでした。

回答を見る

コメントを残す

* は入力必須項目です。
コメント投稿ガイドラインを読んでから投稿してください。
メールアドレスは公開されませんが、名前は公開されます。

HTMLやPHPのコードを掲載するときはHTMLエスケープツールで特殊文字を変換してから貼り付けてください。