このページでは、Nishiki Pro テーマのカラー設定について解説しています。

目次

• Nishki Pro のカラー設定について
• 配色について
• バランスのよい 3 つのカラーを設定しよう
  • ベースカラー
  • メインカラー
  • アクセントカラー
  • メインカラー/アクセントカラーはブロックエディターのスタイルに一部対応
• その他のカラー
  • テキスト
  • リンク
  • ヘッダー
  • フッター
  • ページタイトル
  • ソーシャルアカウント
  • パンくずリスト
  • 目次
  • キャンペーンリンク（お知らせ）
  • タグ
  • ログインページ

Nishki Pro のカラー設定について

Nishiki Pro バージョン 1.0.256 から、カラー設定を以下のように整理しました。

• ベースカラー
• メインカラー
• アクセントカラー
• その他のカラー

配色について

カラーを設定する前に「配色」について大まかに知っておきましょう。

「配色」とは、一般的には 2 色以上のカラーの組み合わせや、色合いのことを指します。

バランスのよい 3 つのカラーを設定しよう

次に、下の画像を見てください。

配色は 3 色で構成し、全体を 100 % として、それぞれのカラーと比率（配色比率）を「ベースカラー：70%」「メインカラー：25%」「アクセントカラー：5%」とするのが一般的にバランスがよいとされています。

この配色比率は、ファッション/インテリア/ウェブサイトなどにも広く取り入れられている考え方です。

配色比率に沿ってカラー設定をすると、失敗しにくく、キレイで見やすいウェブサイトが作りやすくなります。

Nishiki Pro では、上記の配色比率の「ベースカラー」「メインカラー」「アクセントカラー」に加え、さらにアレンジを加えたい上級者向けにパーツやコンテンツごとにカラーが設定できるようになっています。

以下にまとめましたので、参考ください。

ベースカラー

ウェブサイト全体で最も面積の広い部分、つまり背景カラーを「ベースカラー」としてください。

無難に行くなら（テキストの読みやすさなどを考慮すると）白や薄いグレーなどを選ぶのがいいでしょう。もちろん他のカラーを選んでも構いません。

設定箇所を見る

ワードプレスの管理画面から「外観」→「カスタマイズ」→「サイト基本情報」から「ベースカラー」の項目の「背景カラー」で設定できます。

メインカラー

ウェブサイト全体を印象付けるカラーを設定してください。

設定箇所を見る

ワードプレスの管理画面から「外観」→「カスタマイズ」→「サイト基本情報」から「メインカラー」の項目の「カラー01」「カラー02」の 2 色を設定してください。

2 色を設定する理由は、主に背景カラー、テキストカラーとして使用するためです。

※メインカラーはアソートカラーやサブカラーとも呼ばれることがありますが、役割は同じです。

アクセントカラー

ウェブサイト全体を引き締めるカラーを設定してください。

一般的にはメインカラーと反対の色（補色）を選ぶとよいと言われていますが、ベースカラーやメインカラーを濃くしたもの、薄くしたものを選んでもいいでしょう。

設定箇所を見る

ワードプレスの管理画面から「外観」→「カスタマイズ」→「サイト基本情報」から「アクセントカラー」の項目の「カラー01」「カラー02」の 2 色を設定してください。

2 色を設定する理由は、主に背景カラー、テキストカラーとして使用するためです。

メインカラー/アクセントカラーはブロックエディターのスタイルに一部対応

まだ数は多くありませんが、メインカラー/アクセントカラーに対応した Gutenberg のブロックスタイルもあります。

まだ開発段階だけど、追加したブロックにメインカラー/アクセントカラーのスタイルを適用させておくと一括で変えられるので、サイト全体の色のバランスも取りやすくなるはず😉

ヘッダー、フッター、ナビゲーションをブロックで作る未来がやってきても対応できる気がするhttps://t.co/Ibq0b7lmCI pic.twitter.com/5QTpaHY5xx

— Imamura | AnimaGate, Inc. (@s56bouya) September 16, 2021

その他のカラー

Nishiki Pro では、上記のベースカラー/メインカラー/アクセントカラーを決めた上で、以下のカラーをそれぞれ個別に設定できます。

• テキスト
• リンク
• ヘッダー
• フッター（ウィジェット/テキスト/ボタン/フッターメニュー）
• タイトル（投稿ページ/固定ページ/アーカイブページ）
• ソーシャルアカウント
• パンくずリスト
• 目次
• キャンペーンリンク（お知らせ）
• ログインページ

「どんなカラーがいいのかわからない！」という人は、それぞれのカラーに対してメインカラー または アクセントカラー（に近い色でも OK）を設定するとバランスが取りやすいです。

以上を前提として、その他のカラーについて以下にまとめました。

テキスト

本文とサイドバーのテキストカラーを設定してください。

設定箇所を見る

ワードプレスの管理画面から「外観」→「カスタマイズ」→「サイト基本情報」から「テキストカラー」の項目の「カラー01」「カラー02」の 2 色を設定してください。

2 色を設定する理由は、主に本文のテキスト、フォームのプレースホルダーなどに使用するためです。

リンク

本文とサイドバーのリンクカラーを設定してください。

設定箇所を見る

ワードプレスの管理画面から「外観」→「カスタマイズ」→「サイト基本情報」から「リンクカラー」の項目の「カラー01」「カラー02」の 2 色を設定してください。

2 色を設定する理由は、主にテキストリンク、テキストリンクのマウスオーバーとして使用するためです。

ヘッダー

ヘッダーのカラーを設定してください。

設定箇所を見る

ワードプレスの管理画面から「外観」→「カスタマイズ」→「ヘッダー」から「カラー」の項目の「テキストカラー」「背景カラー」の 2 色を設定してください。

フッター

フッターのカラーを設定してください。フッターにはウィジェットやフッターメニューも設置できますが、それぞれ設定項目があります。

設定箇所を見る

ワードプレスの管理画面から「外観」→「カスタマイズ」→「フッター」から「ウィジェット」「テキスト」「ボタン」「フッターメニュー」それぞれの項目にあるカラーを設定してください。

ページタイトル

各ページのタイトルの背景とテキストカラーを設定してください。

投稿ページ

設定箇所を見る

ワードプレスの管理画面から「外観」→「カスタマイズ」→「投稿ページ」から「ページタイトル」の項目にある「テキストカラー」「背景カラー」を設定してください。

固定ページ

設定箇所を見る

ワードプレスの管理画面から「外観」→「カスタマイズ」→「固定ページ」から「ページタイトル」の項目にある「テキストカラー」「背景カラー」を設定してください。

アーカイブページ

設定箇所を見る

ワードプレスの管理画面から「外観」→「カスタマイズ」→「アーカイブページ」から「ページタイトル」の項目にある「テキストカラー」「背景カラー」を設定してください。

ソーシャルアカウント

設定箇所を見る

ワードプレスの管理画面から「外観」→「カスタマイズ」→「[Nishiki Pro]オプション」→「ソーシャルアカウント」から「テキストカラー」「背景カラー」を設定してください。

パンくずリスト

設定箇所を見る

ワードプレスの管理画面から「外観」→「カスタマイズ」→「[Nishiki Pro]オプション」→「パンくずリスト」から「テキストカラー」「背景カラー」「リンクカラー」「リンクカラー（マウスオーバー）」を設定してください。

目次

本文内に表示される「目次」と、スクロールするとヘッダー部分に表示される「固定目次」があります。それぞれ設定してください。

設定箇所を見る

ワードプレスの管理画面から「外観」→「カスタマイズ」→「[Nishiki Pro]オプション」→「目次」→「全体」「固定目次」それぞれの項目のカラーを設定してください。

キャンペーンリンク（お知らせ）

設定箇所を見る

ワードプレスの管理画面から「外観」→「カスタマイズ」→「[Nishiki Pro]オプション」→「キャンペーンリンク（お知らせ）」から「テキスト」「ボタン」「背景」それぞれの項目にあるカラーを設定してください。

タグ

設定箇所を見る

ワードプレスの管理画面から「外観」→「カスタマイズ」→「デザイン」→「タグ」から「テキストカラー」「背景カラー」それぞれの項目にあるカラーを設定してください。

ログインページ

設定箇所を見る

ワードプレスの管理画面から「外観」→「カスタマイズ」→「[Nishiki Pro]オプション」→「ログインページ」から「カラー」の項目にある「テキストカラー」「背景カラー」を設定してください。