これから Nishiki Pro
テーマを使うなら1度は確認しよう!

Nishiki テーマおすすめ設定 テーマおすすめ設定を見る
  1. ホーム
  2. マニュアル
  3. Nishiki(Pro)
  4. バランスよく配色しよう。Nishiki Pro テーマのカラー設定まとめ

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

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

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

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

配色について

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

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

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

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

比率に注目してください。

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

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

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

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

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

カラー設定がたくさんあるのはなぜ?

ベースカラー/メインカラー/アクセントカラーはあくまで配色に関する基本的な考え方で、必ず守らなければいけないわけではありません。

そして、複数のカラーを使用しても、見やすくバランスのよいウェブサイトは数多くあります。

Nishiki Pro 開発者がこれまで数多くのウェブサイト制作に携わった経験則や、今後の未来予想、ユーザーから頂いたフィードバックなどをもとに「3 色以上のカラーを細かく設定できたほうがよい」と判断し、現在のようなパーツやコンテンツごとにカラー設定ができるシステムになっています。

ベースカラー

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

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

設定箇所を見る

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

メインカラー

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

設定箇所を見る

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

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

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

アクセントカラー

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

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

設定箇所を見る

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

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

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

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

その他のカラー

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

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

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

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

テキスト

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

設定箇所を見る

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

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

リンク

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

設定箇所を見る

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

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

ヘッダー

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

設定箇所を見る

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

フッター

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

設定箇所を見る

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

ページタイトル

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

投稿ページ

設定箇所を見る

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

固定ページ

設定箇所を見る

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

アーカイブページ

設定箇所を見る

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

ソーシャルアカウント

設定箇所を見る

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

パンくずリスト

設定箇所を見る

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

目次

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

設定箇所を見る

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

キャンペーンリンク(お知らせ)

設定箇所を見る

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

タグ

設定箇所を見る

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

ログインページ

設定箇所を見る

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

WordPress テーマ Nishiki Pro

「ウェブサイト運営に本当に必要とされる機能」をテーマ内にまとめて搭載したワードプレステーマです。

ブロックエディター機能を強化し、これまでのワードプレスでは難しかったコンテンツが簡単に作れます。

ブログ、ポートフォリオ、コーポレートサイト、ビジネスサイト、オンラインショップなど、様々な目的のウェブサイトに対応できるテーマです。

最新情報をチェック!

Nishiki / Nishiki Pro テーマに特化した情報を「にしきちゃん」がお伝えします😀

  • リリース情報
  • 新機能の紹介
  • 便利な使い方
  • 開発中の機能紹介
  • 導入事例
  • あるある日常ネタ

など