こんにちは "osaboo"
です。"@osaboo_Bot"
この記事で解決できる悩み
この記事では、これらのお悩みを解決します。
「まずはブログを始めたい！」という方は、『WordPressブログ完全ガイド』をご覧ください。
開設から運営・収益化までを初心者向けに画像付きでわかりやすく解説しています。
AFFINGER7の全体カラー設定とは？
AFFINGER7では、カスタマイザーの「全体カラー設定」から、サイト全体のカラーをまとめて変更できます。
ヘッダーや見出し、ボタンなどの色を個別に設定する前に、基本となるカラーを設定しておくことで、サイト全体のデザインを統一しやすくなります。
また、カラー設定は後から何度でも変更できるため、ブログ開設時はまず全体カラー設定で大まかな配色を決め、その後細かい部分を調整すると効率的です。
全体カラー設定を開く場所
AFFINGER7の全体カラー設定は、WordPress管理画面のカスタマイザーから変更できます。
設定場所
Menu『WordPress管理画面 → 外観 → カスタマイズ → 全体カラー設定 / リセット』をクリックします。
カスタマイザーが起動します。
以下の手順で、全体カラー設定 / リセットの詳細設定項目を開きます。
全体カラー設定 / リセット
➡︎
詳細設定項目
⬇︎
「全体カラー設定」では、サイト全体で使用する基本カラーをまとめて設定できます。
全体カラー設定でできること
全体カラー設定では、主に以下のカラーを変更できます。
| 設定項目 | 役割 |
|---|---|
| キーカラー（推奨：一番濃い色） | サイト全体の基準となる色 |
| メインカラー（推奨：少し薄い色） | 見出しなど主要なデザイン部分に使われる色 |
| サブカラー（推奨：とても薄い色） | 補助的に使われる色 |
| テキスト（一部） | 本文などの文字色 |
| アクセントカラー（特殊：保存用） | よく使う色を保存する |
| カスタマイザーをリセットする | カスタマイザー設定を初期化する |
サイトの印象はカラー設定によって大きく変わるので、ブログのジャンルや雰囲気に合わせて調整しましょう。
AFFINGER管理のカラーパターンとの違い
AFFINGER7には、全体的にカラーを変更する設定場所として、
- AFFINGER管理 → 全体設定 → カラーパターン
- 外観 → カスタマイズ → 全体カラー設定 / リセット
の2種類があります。
どちらもサイトの色を変更する機能ですが、役割が少し異なります。
| 設定場所 | 特徴 |
|---|---|
| AFFINGER管理のカラーパターン | 用意された配色パターンから簡単に変更できる |
| 全体カラー設定 | カラーコードを使って細かく色を調整できる |
カラーデザインを手軽に変更したい場合は「カラーパターン」、サイトの雰囲気に合わせて細かく調整したい場合は「全体カラー設定」を使うのがおすすめです。
カラーを細かく設定したい場合は、まずカラーパターンでベースとなるデザインを選び、その後に全体カラー設定で調整するとスムーズです。
関連記事 AFFINGER管理の各設定項目については、以下の記事で詳しく解説しています。
-
-
AFFINGER7の全体設定を解説｜サイト全体の初期設定とカスタマイズ方法
AFFINGER7の全体設定を初心者向けに解説。カラーパターンやデザインパターン、レイアウト、フォントなど、サイト全体の初期設定とおすすめのカスタマイズ方法を画像付きでわかりやすく紹介します。
全体カラー設定（詳細）項目とその反映場所
- ブロックパターン側でカラーが指定されている場合、全体カラー設定を変更しても反映されない箇所があります。
| 設定（詳細）項目 | 反映場所 |
|---|---|
| キーカラー（推奨：一番濃い色） | ・ヘッダーの背景 ・ヘッダーナビゲーションの背景 ・PCヘッダーメニューの背景 ・フッターの背景 ・スマホスライドメニューの背景 ・見出しh2のテキスト ・見出しh3の背景 ・見出しh4のテキスト ・目次のタイトル（すごい目次） ・カテゴリーマーク背景 ・関連記事の見出し背景 ・サイドバーの見出しテキスト |
| メインカラー（推奨：少し薄い色） | ・下層ドロップダウンメニューの背景 ・ヘッダーナビゲーションのボーダー ・PCヘッダーメニューのボーダー ・スマホスライドメニューのボーダー ・見出しh5のテキスト ・AFFINGER：拡張ブロックの枠・アイコン・見出し背景 |
| サブカラー（推奨：とても薄い色） | ・見出しh2の背景 ・見出しh4の背景 ・目次の枠（すごい目次） ・サイドバーの見出し背景 ・AFFINGER：拡張ブロックの背景 |
| テキスト（一部） | ・ヘッダーのテキスト ・ヘッダーナビゲーションのテキスト ・PCヘッダーメニューのテキスト ・下層ドロップダウンメニューのテキスト ・フッターのテキスト ・スマホのアイコン・テキストリンク ・見出しh3のテキスト ・関連記事の見出しテキスト ・AFFINGER：拡張ブロックの見出しテキスト |
AFFINGER7の全体カラー設定を変更する方法
関連記事 AFFINGER7を導入したばかりの方は、初期設定を先に済ませておくとスムーズです。
-
-
AFFINGER7の初期設定完全ガイド｜導入後に最初にやるべき設定を初心者向けに解説
AFFINGER7の初期設定を初心者向けにわかりやすく解説。設定画面の場所から導入後に最初にやるべき設定、おすすめ設定、SEOやアフィリエイトに役立つ設定まで順番に紹介します。
AFFINGER管理でデザインパターンを「リセット」以外に変更する
カラー設定を変更する前に、AFFINGER管理の「デザインパターン」を確認しましょう。
「WordPress管理画面 → AFFINGER管理 → 全体設定」を開き、「デザインパターン」を確認します。
「リセット」以外のパターンが選択されていればOKです。
カラー設定は、選択したデザインパターンの初期設定をベースに反映されます。
- グラデーションなどのデザイン要素は、選択したパターンの初期設定に依存します。
全体カラー設定の「簡単設定を使用する」をONにする
「簡単設定を使用する」を有効にすると、設定したカラーをサイト全体へ一括で反映できます。
カラー設定を変更する場合は、まず「簡単設定を使用する」をON（使用する）に設定しましょう。
有効化すると、キーカラー・メインカラー・サブカラー・テキストカラー（一部）が連動して反映され、サイト全体のデザインをまとめて変更できます。
全体カラーを設定する
デザインパターンを「リセット」以外に設定し、「簡単設定を使用する」を有効にしたら、次はサイト全体のカラーを設定しましょう。
全体カラーを設定すると、ボタンやリンク、見出しなどの配色に反映され、サイト全体のデザインに統一感が生まれます。
ここでは、それぞれのカラーの役割とおすすめの設定方法を順番に解説します。
全体カラー設定 / リセットの詳細設定項目
全体カラー設定 / リセット
- キーカラー（推奨：一番濃い色）
- サイト内で最も目立たせたい色を設定します。
主に、見出しの装飾・ボタン・リンク・アクセント部分など、重要な部分に使用されるカラーです。
サイトの印象を決めるメインカラーになるので、ロゴやサイトテーマに合わせて設定しましょう。
- サイト内で最も目立たせたい色を設定します。
- メインカラー（推奨：少し薄い色）
- キーカラーを補助するカラーです。
背景やボックス、装飾部分などに使用され、キーカラーとの組み合わせでサイト全体の雰囲気を整えます。
キーカラーより少し明るい色や薄い色を設定すると、バランスが取りやすくなります。
- キーカラーを補助するカラーです。
- サブカラー（推奨：とても薄い色）
- サイト全体のデザインを整える補助的なカラーです。
背景色や囲み装飾など、目立たせすぎたくない部分に使用されます。
メインカラーよりさらに薄い色を設定すると、統一感のあるデザインになります。
- サイト全体のデザインを整える補助的なカラーです。
- テキスト（一部）
- 記事内の一部テキストカラーを設定します。
通常の本文色とは別に、強調部分や特定の文字色などに使用されます。
読みやすさを考慮して、黒に近い色や濃いグレーがおすすめです。
- 記事内の一部テキストカラーを設定します。
- アクセントカラー（特殊：保存用）
- 特殊用途のカラー設定です。
通常のサイトカラー設定では使用する場面が少ないため、基本的には初期設定のままでも問題ありません。
- 特殊用途のカラー設定です。
- ミニパレットを非表示にする → ON（エディター画面右上に表示）
簡単設定を使用する
- 使用する
簡単設定を使用する
- 『リセット』→ カスタマイザーすべての設定がリセットされるので要注意
「極力触らない！」
AFFINGER7のカラー設定が反映されない場合の確認ポイント
全体カラー設定を変更しても、すぐに反映されない場合があります。
その場合は、以下のポイントを確認してみましょう。
「簡単設定を使用する」が有効になっているか確認
全体カラー設定をサイト全体に反映させるには、「簡単設定を使用する」を有効にする必要があります。
OFFのままでは、設定したカラーが反映されないため注意しましょう。
ブロックパターン側でカラーが指定されていないか確認
ブロックパターンで個別にカラーが設定されている部分は、全体カラー設定では変更されません。
意図した色にならない場合は、ブロックパターンや各ブロックのカラー設定も確認してみましょう。
ブラウザやキャッシュを更新する
カラーを変更しても画面が変わらない場合は、ブラウザやキャッシュの影響で古いデータが表示されている可能性があります。
ブラウザを再読み込みしたり、キャッシュ系プラグインを利用している場合はキャッシュを削除してから確認しましょう。
関連記事 カラー以外のデザイン設定も見直したい方は、全体設定の記事も参考にしてください。
-
-
AFFINGER7の初期設定完全ガイド｜導入後に最初にやるべき設定を初心者向けに解説
AFFINGER7の初期設定を初心者向けにわかりやすく解説。設定画面の場所から導入後に最初にやるべき設定、おすすめ設定、SEOやアフィリエイトに役立つ設定まで順番に紹介します。
よくある質問（FAQ）
AFFINGER7の全体カラー設定はどこから変更できますか？
WordPress管理画面の「外観 → カスタマイズ → 全体カラー設定」から変更できます。
AFFINGER管理のカラーパターンとの違いは何ですか？
カラーパターンは用意された配色を一括で適用する機能です。一方、全体カラー設定はキーカラーやメインカラーなどを自由に設定し、サイト全体の色を細かく調整できます。
カラーを変更しても反映されないのはなぜですか？
「簡単設定を使用する」が無効になっている場合や、ブロックパターン・各ブロックで個別に色が設定されている場合は反映されません。また、ブラウザやキャッシュの影響で変更が表示されないこともあります。
「簡単設定を使用する」は有効にしたほうがいいですか？
はい。サイト全体のカラーを一括で反映させたい場合は、有効にするのがおすすめです。個別にデザインを調整したい場合のみ無効で使用します。
おすすめの配色はありますか？
サイト全体の統一感を出すため、メインカラー・アクセントカラー・文字色の3色程度にまとめるのがおすすめです。色数を増やしすぎると、見た目がまとまりにくくなります。
まとめ！AFFINGER7の全体カラー設定方法｜サイト全体の色を一括変更する手順
AFFINGER7の全体カラー設定を使えば、サイト全体の配色をまとめて変更できます。
設定する際は、まず「簡単設定を使用する」を有効にし、キーカラーやメインカラーなどを調整していきましょう。
カラーが反映されない場合は、「簡単設定を使用する」が有効になっているかや、ブロックパターンで個別にカラーが設定されていないかを確認しましょう。
サイト全体のデザインに統一感を持たせたい方は、色数を増やしすぎず、テーマカラーを決めて設定すると見やすいサイトに仕上がります。
AFFINGER7には、カラー設定以外にもサイトデザインを整える便利な機能が多数用意されています。まだ設定していない項目がある方は、初期設定の記事もあわせて参考にしてみてください。
