1.8.6 Released !

色の設定をしよう

色の設定をする

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

カスタマイザーを開く

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

カスタマイザーの位置
管理画面⇒外観⇒カスタマイズ

「色」をクリック

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

「色」を選ぶ

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

カスタマイザーが開く

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

メインカラー


各設定カラーの解説

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

メインカラー

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

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

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

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

一部のボタンなど
ボタン

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

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

薄めの下地色

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

この記事を書いた人

他に下地色が使用されるのは、SANGOオリジナルの「見出し」や「箇条書き」を挿入するときです。これらのデザインの中には、カスタマイザーで設定したメインカラーやアクセントカラー、下地色を用いるものもあります。

例えば、下の見出しは「下地色が背景」+「メインカラーが下線」というデザインになっています。

詳しくは以下の記事で解説しています。

ヘッダーアイキャッチを設定するヘッダーアイキャッチ画像を設定しよう

 


アクセントカラー

アクセントカラーにはメインカラーと並べたときに目立ち、かつ違和感の無い色を選びましょう。アクセントカラーは以下の部分で使用されます。

円形シェアボタン(記事ページ)

新着記事のNEWマーク

人気記事ランキングの番号

記事内のボタンやボックス・見出しなど


リンク色

その名の通り、リンクテキストに使用されます。リンクだということが読み手に伝わりやすい色(青が一般的)を選ぶようにしましょう。


ヘッダー背景色

ヘッダー背景色はその名の通り、ページ最上部のヘッダーバーで使用されます。

また、ページ最下部のフッターバーにもここで選んだ色が使用されることにご注意ください(始まりと終わりは同じ色だとなんとなくスッキリするので)。

フッター


ヘッダータイトル色

ヘッダータイトル色はサイトタイトルのテキスト色です。テキストではなくロゴ画像を使っている場合には、この色は使用されません。


ヘッダーメニュー色

ヘッダーメニュー色は以下の3部分に使用されます(どれも設定しなければ表示されないメニューです)。1つめにデスクトップ表示でのメニューです。

2つめにモバイル表示でのヘッダースクロールメニューです。

モバイルナビの色

3つめは、画面最下部のフッターバーのメニュー/テキスト色です。

ヘッダーメニュー色の使われる部分

お知らせ

【2017/09/27】ロゴ画像を中央寄せした場合に、PC表示でのメニュー色が変わらない不具合が生じています。ご迷惑をおかけして大変申し訳ありません。次回のアップデートで修正は致しますが、現時点での対処法を記載します。下のボタンをクリックすると対処法が表示されます。

表示する

メニュー色が変わらない不具合の対処法

①管理画面の[外観]⇒[テーマの編集]をクリック

②右上の[編集するテーマを選択:]で「SANGO」を選択

③下の方にスクロールし、右下にある「style.css スタイルシート」をクリック

④枠内のコードを全てコピーして、メモ帳などにペースト(念のためのバックアップ)

⑤コード内の3500行目辺りの 「.header–center .desktop-nav li a」を見つける(Ctrl + Fで検索すると楽かと思います)

⑥以下のコード内のcolor: #FFF;を削除

.header--center .desktop-nav li a {
      height: auto;
      padding: 10px 15px 15px;
      color: #FFF;
      font-size: 15px;
      line-height: 1.5;
}

※ 削除後は以下のようになります。

.header--center .desktop-nav li a {
      height: auto;
      padding: 10px 15px 15px;
      font-size: 15px;
      line-height: 1.5;
}

⑥ページ下の[ファイルを更新]をクリック

これでカスタマイザーで設定した色が反映されるようになるはずです。反映されない場合にはキャッシュの削除をしてみてください(解説:キャッシュとは)。
なお、親テーマを修正しましたので、次のアップデート時にはこのstyle.cssは上書きされます(上書きファイルでも該当部分は修正されています)。

【2017/09/29】ver1.2にて不具合を修正致しました。


ウィジェットタイトル/背景色

「ウィジェットのタイトル色」と「ウィジェットタイトルの背景色」はサイドバーに表示されるウィジェットのタイトル部分に使われます。好きな組み合わせの色を選べば良いかと思います。

ウィジェットの画像


フッターウィジェットの背景色/文字色

フッターウィジェットも設定したときにのみ表示されるパーツです。背景色はウィジェットエリアの背後に塗られる色、文字色はテキストの色です。リンクは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選:ベストな色の組み合わせ確認ツール
マテリアルデザインカラー:色の組み合わせ見本集
マテリアルデザインカラー:色の組み合わせ見本集

93 COMMENTS

きゃんねん 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

すてきなテーマを作ってくださって、本当にありがとうございます。
まだまだ不慣れですがワクワクしながらカスタマイズさせて頂いています。

質問なのですが
カテゴリーラベルの文字色(白)を他の色に変更することは可能ですか?
初歩的なことで恐縮ですが、お答えいただけたら幸いです。

回答を見る
aoki 2018/12/14

はじめまして。お忙しいところ失礼いたします。
ヘッダーカラーの変更が反映されないため困ってます。
不具合修正後のsangoを使用しているため、何が原因かわかりません。
どうしたらよいか、お知恵を拝借できないでしょうか。

回答を見る
メダりんブログ 2018/12/08

「この記事を書いた人」のプロフィール文&フォローボックスの「この記事が気に入ったらフォローしよう」の文字が青くなるんですが、どこを直せばなおりますか?

回答を見る
Kazu 2018/11/01

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

回答を見る
リエ子 2018/10/25

いつもお世話になっています。
SANGO愛が止まらないリエ子です。

ヘッダーメニューの背景色の変更について教えていただけると助かります。

desktop-nav、mobile-nav に対して背景色の変更を子テーマに適用したところ、ヘッダーメニュー部分のみに変更が適用されました。

実際にやりたいことは、ヘッダーメニュー部分を一行丸ごと、帯状に背景色を変更したいのです。

本質問で登録したサイトを見ていただけると、「サンプルページ」のメニュー部分に背景色:白が適用されていますが、「サンプルページ」のある行を丸ごと帯で白色に変更できますでしょうか?

大変お手数をおかけいたしますが、そのような方法があればご教示ください。
よろしくお願いします。

回答を見る
リエ子 2018/10/11

こんばんは!
sangoのカスタマイズが楽しすぎて記事作成が進まないリエ子です(汗
ステキすぎるテンプレありがとうございます!

背景色を画像で設定したいのですが、どこかの設定でできますでしょうか?
ちなみに、ヘッダーについては以下で設定できました。

header.header {
background:url(***);
}

背景色というのは、記事の背景ではなくブログ全体の背景色でございます。
お手数ですが、header.headerに置き換えるコードを教えていただけると嬉しいです!

どうぞよろしくお願いします。

回答を見る
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

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

回答を見る
ケンイチ 2018/01/23

外観→カスタマイズ→色で背景色を変更しても投稿ページの背景色しか変わりません。他の固定ページの背景色は白いままです。どのようにすれば変更できるのでしょうか?
私のホームページの現状は固定ページをトップページに設定して、別の固定ページを投稿ページに設定してブログ的に使っています。それが影響しているのでしょうか?

回答を見る
でんと 2017/11/25

カテゴリー毎に色を指定できるようになるといいのですが。
記事一覧のサムネイル画像に表示されるカテゴリーラベルの視認性改善の為。

回答を見る
TOMO 2017/10/22

全体背景のライトグレーの部分のカラーも変更したいのですが、今後実装していただけないでしょうか。

回答を見る

コメントを残す

メールアドレスは公開されません。* は必須項目です。コメント投稿のガイドライン