Ver1.3.1をリリースしました(11/22)

色の設定をしよう

色の設定をする

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

6 Comments

TOMO

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

返信する
サルワカくん

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

返信する
TOMO

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

返信する
でんと

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

返信する

サルワカくん にコメントする コメントをキャンセル

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