Ver1.5 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選:ベストな色の組み合わせ確認ツール
マテリアルデザインカラー:色の組み合わせ見本集
マテリアルデザインカラー:色の組み合わせ見本集

54 Comments

TOMO

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

返信する
サルワカくん

「外観⇒カスタマイズ⇒色⇒背景色」で全体背景の色を変えることができるのですが、
そちらとはまた別の部分でしょうか。

返信する
TOMO

申し訳ありません。。そこは記事の背景だと勘違いしておりました。
そちらで変更できました!ありがとうございます!

返信する
でんと

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

返信する
ケンイチ

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

返信する
サルワカくん

仰る通り、1カラム用の固定ページやトップページ用の固定ページを使っていることが影響しています。
背景色を設定したい場合は、通常の投稿ページや固定ページをご利用くださいませ。

返信する
グース

色設定がまとめてできて、かつ簡単でかなり助かっています!
一点テーマというよりも、この記事ページに関して…
緑ベースのアクセントカラーとリンク色の値が逆になっていませんか?

返信する
かっしー

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

返信する
サルワカくん

サイドバーウィジェットの背景色を変えるには、CSS(子テーマのstyle.cssが良いですね)の追記が必要です。

.sidebar .widget {
background-color: カラーコード;
}
返信する
かっしー

サイドバーの背景を変更することができました。
ご回答ありがとうございました。

返信する
hiro

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

返信する
サルワカくん
body, .cardtype__link, .widget ul li a, .footer, .footer a, .footer .widget ul li a,.single-title, .page-title, .entry-title,.entry-meta,.related-posts ul li a,.author_label span {
    color: black;
}

このCSSを子テーマのstyle.cssに追加してみるとどうでしょうか。

返信する
hiro

目次以外は変更することができました!
大変助かりました。ありがとうございました。

返信する
のりぽん

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

返信する
サルワカくん

カスタマイザーでは、ヘッダーで使いたい色を選んで頂き、
以下のCSSを追加することで、フッター色を指定すると良いかと思います。

.footer #footer-menu {
    background-color: #色コード;
}
返信する
ガオ

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

返信する
サルワカくん

ヘッダーメニュー色に指定した色がスマホのスクロールメニューでも使用されます。
わかりづらい表記になってしまっており、申し訳ないです。

もし、スマホのスクロールメニューの色は別に設定したい場合には、以下のCSSを子テーマのstyle.cssなどに追加して頂ければと思います。

.mobile-nav li a {
  color: #色コード;
}
.mobile-nav .current-menu-item {
    border-bottom-color: #色コード;
}

上の色コードが文字色を指定するもの
下の色コードが、現在選択中のメニューの下線色を指定するもの
になります。

返信する
オスギ

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

返信する
サルワカくん

以下のCSSを追加すればいけます!

.header .desktop-nav li:after {
    background: #色コード;
}
.mobile-nav .current-menu-item {
    border-bottom-color: #色コード;
}

上の方が、PCのヘッダーメニューの下線です。
下の方が、モバイルのヘッダーナビの現在表示中ページのリンクの下に表示される下線です。

返信する
いのり

サルワカくんさん、こんにちは。SANGO、楽しくうれしく使わせていただいております。既出の質問だったら申し訳ないのですが、上でhiroさんが質問しておられるデフォルトのグレーっぽい文字色は何色でしょうか? もし可能であればカラーコードを教えていただければと思います。
お忙しい中恐縮ですが、お手隙の際にでもよろしくお願いいたします。

返信する
サルワカくん

こんにちは!グレーの色コードは「#8e949a」かと思います。
色コードだけで良いですか?

返信する
たぬき

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

返信する
サルワカくん
.sidebar {/*サイドバーの文字色*/
    color: #2196F3!important;
}
.sidebar a {/*サイドバーのリンク文字色*/
    color: #2196F3!important;
}

#2196F3が色コードです。好きな色コードに変えてくださいませ。

返信する
MKK

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

返信する
サルワカくん

フッターの文字色はリンクの部分ですか?
リンクの部分の文字色は

.footer #footer-menu a {
 color: #ffffff;
}

というようにaタグに対して指定する必要があります。
また、色コードの前には#をつけるようにご注意ください。

返信する
MMK

早急にお返事を頂き、解決できました。
本当にありがとうございます。初歩的な誤りで、恐縮です。
copyrlight も同色に変更したいので
.footer #footer-menu a, .footer #footer-menu p
{ color: #ffffff; }
としましたが、合ってますでしょうか。
ありがとうございました。

返信する
ひまわり

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

返信する
サルワカくん

タグクラウドのリンクの背景色は

.tagcloud a {
 background-color: #色コード;
}

で変えられるかと思います。

返信する
ひまわり

ご返信誠にありがとうございます。
せっかく教えていただいたのに大変申し訳ありませんが、変更できませんでした。
現在タグクラウドをフッターに持って来ておりまして、その際に
背景にうっすらかかるグレー色を変更したいと思っております。
何か他の方法で変更できるのでしょうか?

ご多用の中大変恐れ入りますが、教えていただければ幸いです。
宜しくお願い申し上げます。

返信する
サルワカくん

あ、フッターのウィジェット内のタグクラウドの場合には、以下のCSSを追加して頂ければ良いと思います。

.footer .tagcloud a {
  background: #色コード;
}
返信する
まとん

サルワカさんこんにちは。

トップページのヘッダーと背景色を同色にしても、ヘッダー下にぼやっとしたラインが残るんですが、
これを消すことはできますか?

またこのラインの色はどこを変更すると変わりますか?

返信する
サルワカくん

おそらくそちらは影ですね。子テーマのstyle.cssや、外観⇒カスタマイズ⇒追加CSS欄に、以下を追加することで消すことが可能です。

.header {
  box-shadow:none!important;
}
返信する
taro

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

返信する
サルワカくん

なるほど。
子テーマのstyle.cssに以下のCSSを追加してみて頂けますか?

#footer-menu .footer-links a {
  color: #色コード;
}

#footer-menu .footer-links a:hover{
    color: #色コード; /*カーソルを上に重ねたとき*/
}
返信する
taro

早急なお返事ありがとうございます。

赤色にしようと思い、
#footer-menu .footer-links a {
color: #f28282;
}

#footer-menu .footer-links a:hover{
color: #f28282; /*カーソルを上に重ねたとき*/
}

を子テーマの”以下にCSSを記入していきましょう”の下に貼り付けましたが、見えないままでした。

CSSの知識がなく申し訳ないのですが、何か他に改善策はありますでしょうか。ぜひよろしくお願いいたします。

返信する
サルワカくん

子テーマは読み込まれていますか?
可能であれば、該当のサイトURLを教えて頂ければ確認ができます。

返信する
taro

子テーマに設定しております!

URLはhttp://www.amei-media.com/になります。お手数かけましてすみません、本当にありがとうございます!

サルワカくん

ありがとうございます。
子テーマのCSSを以下のように書き換えてみていただけますか?

#footer-menu a {
color: #f28282;
}
#footer-menu a:hover{
color: #f28282; /*カーソルを上に重ねたとき*/
}
リエ子

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

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

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

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

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

返信する
サルワカくん

こんばんは。
背景画像は、外観⇒カスタマイズ⇒サイトの基本設定⇒背景画像で設定できるかと思います。
もしうまくいかなければもう一度コメント頂ければと思います。

返信する
taro

すみません、上のホームページのものです。

#footer-menu a {
color: #f28282;
}
#footer-menu a:hover{
color: #f28282; /*カーソルを上に重ねたとき*/
}

にしましたが、改善いたしません。これはもう無理なのでしょうか。

隠し文字だと思われるといけないので、何か他の改善策があれば教えていただきたいです!よろしくお願いいたします。

返信する
サルワカくん

サイトを拝見したところ、CSSの適用の優先順位が負けているようです。以下のCSSで効くはずです!


#footer-menu a {
color: #f28282!important;
}
#footer-menu a:hover{
color: #f28282!important; /*カーソルを上に重ねたとき*/
}
返信する
taro

ありがとうございます!

できました!しつこい質問にずっと親切にありがとうございました!これからもsango使わせていただきます!!

返信する
taro

すみません!これに関して追加で質問なのですが、2018 all rights reserved みたいな文言の色はどのように設定すればよろしいでしょうか。

これがいまだに白色で同化してしまっているので、よろしくお願いいたします。

サルワカくん

この部分の色には、外観⇒カスタマイズ⇒色⇒「ヘッダーメニュー色」が適用されるようになっています。
そちらを変えてみて頂ければと思います。

リエ子

いつも早急にご回答いただき、ありがとうございます!

な、なんてこと…。
カスタマイザーで簡単に設定できるよう設計してくださってるんですね…。
確認不足で愚かな質問をしてしまい、お手を煩わせて申し訳ございません…。

おかげ様で、無事設定できました。
以後、不用意な質問でお手間をかけないよう気を付けます!
今後ともよろしくお願いいたします。

返信する

TOMO にコメントする コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です