【AFFINGER6】ブログの色はここで設定する

AFFINGERを使っていると色の設定で悩みませんか？

AFFINGERでは色の設定箇所が200箇所以上あります！

これでは色を変えるだけでも、ずいぶんと時間がかかってしまいますよね。

なのでこの記事では、AFFINGERでよく使われている色の設定場所をまとめました。

この記事を読んでブログのカラー設定はちゃちゃっとすませちゃいましょう！

AFFINGERでのカラー設定

AFFINGERで設定できる色は全部で200箇所以上にのぼります。

ただ、あなたが設定したいのは主に下の画像の７箇所だと思います。

基本は全体カラー設定で決める

AFFINGERでのカラー設定は、「全体カラー設定」のみで8割が完了します。

全体カラー設定を済ませたあとは、個別に変更したいと思うポイントを設定していきましょう。

WordPressにログインして、「外観」→「カスタマイズ」→「全体カラー設定」の順にタップして設定画面を表示します。

キーカラー	・ヘッダーの背景色 ・グローバルナビの背景色 ・フッターの背景色 ・スマホスライドメニューの背景色 ・見出しH2のテキストカラー ・見出しH3の背景色 ・見出しH4のテキストカラー
メインカラー	・グローバルナビ ドロップダウンメニューの背景色 ・グローバルナビのボーダーカラー ・見出しH5のテキストカラー
サブカラー	・見出しH2の背景色 ・見出しH5の背景色 ・引用ブロックの背景色
テキスト	・ヘッダーのテキストカラー ・グローバルナビのテキストカラー ・グローバルナビ ドロップダウンメニューのテキストカラー ・フッターのテキストカラー ・スマホスライドメニューの背テキストカラー ・見出しH3のテキストカラー

この表にない項目は全体カラー設定では変更できません。個別に設定することになります。

また、AFFINGERの全体カラーの設定では、強制力に強弱をつけることもできます。

最も強く強制すると、個別に色を設定しても全く反映されなくなります。

設定内容	強制力
(1)全体的に反映	強制力最強 個別に色を設定しても反映されない。
(2)一部メニューのみに反映	強制力中 一部の項目では個別に色を設定しても反映されない。
(3)初期値として設定	最初だけ強制 一部の項目で最初だけ反映し、個別に設定することで色を変更できる。
使用しない	強制力なし 全体カラー設定を使わない。

この全体カラー設定を完了させたら、あとは気になるポイントだけ設定していきましょう。

ヘッダーの色の設定方法

まずヘッダーの色の設定方法をご紹介します。

ヘッダーの背景色の設定方法

WordPressにログインして「外観」→「カスタマイズ」→「基本エリア設定」の順にタップします。

遷移したページで「ヘッダーエリア」をタップすると、ヘッダーの色の設定画面に遷移できます。

ヘッダーのテキストカラーの設定方法

先ほどと同じく「カスタマイズ」のページから「ロゴ画像／サイトのタイトル」をタップすれば、設定画面を表示できます。

グローバルナビの色の設定方法

次にグローバルナビの色の設定方法です。

「カスタマイズ」のページで「各メニュー設定」→「PCヘッダーメニュー」の順にタップすれば設定画面を表示できます。

背景色	背景色を設定できます。
背景色（グラデーション上部）	背景色をグラデーションにできます。
ボーダー上下色	上下にボーダーカラーを設定できます。
ボーダー左右色	左端と右端にボーダーカラーを設定できます。
ボーダー右色	メニューを区切るボーダーカラーを設定できます。
文字色	テキストカラーを設定できます。
下層ドロップダウンメニュー背景色	グローバルナビを階層化した際のドロップダウンメニューの背景色を設定できます。

ヘッダーカードエリアの色の設定方法

ヘッダーカードエリアの設定方法です。

「カスタマイズ」のページから「基本エリア設定」→「ヘッダーカードエリア」の順にタップします。

メインエリアの色の設定方法

次にメインエリアの色の設定方法です。

「カスタマイズ」のページで「基本エリア設定」→「mainエリア（記事）」の順にタップすることで設定画面に移れます。

サイドバーの色の設定方法

次にサイドバーの色の設定です。

「カスタマイズ」のページで「基本エリア設定」→「背景色」の順にタップすることで設定画面に移れます。

サイドバーの色を背景色とは分けたい場合は、以下の設定項目から変更してください。

「カスタマイズ」のページで「基本エリア設定」→「サイドバー」の順にタップすることで設定画面に移れます。

フッターの色の設定方法

次にフッターの設定です。

「カスタマイズ」のページで「基本エリア設定」→「フッターエリア」の順にタップすることで設定画面に移れます。

スマホスライドメニューの色の設定方法

次にスマホスライドメニューの色の設定方法です。

「カスタマイズ」のページから「各メニュー設定」→「スマホメニュー（スマホヘッダー）」の順にタップして設定画面を表示します。

スライドメニューボタン背景色	ヘッダーに表示されている三本線の背景色を設定できます。
スライドメニューアイコン色	ヘッダーに表示されている三本線の色を設定できます。
スライドメニューバー背景色	ヘッダーの背景色を設定できます（スマホ表示のみ）。 ※「PCヘッダーメニュー」の設定にオーバーラップするので、こちらの設定の方が優先されます。
スライドメニューバー背景色（グラデーション上部）	ヘッダーの背景色をグラデーションにできます（スマホ表示のみ）。
スライドメニュー内のテキストリンク色	スマホスライドメニュー内のテキストの色を設定できます。
スライドメニュー内リンクのボーダー色	スマホスライドメニュー内のメニューの間のボーダーカラーを設定できます。
スライドメニュー内背景色	スマホスライドメニューの背景色を設定できます。
検索スライドメニュー内背景色	スマホヘッダーの検索アイコンをタップして表示されるスライドメニューの背景色を設定できます。
（追加メニュー）メニューアイコン色	スマホヘッダー上部に追加できるメニューのテキスト（またはアイコン）の色を設定できます。
（追加メニュー）背景色	スマホヘッダー上部に追加できるメニューの背景色を設定できます。
（追加メニュー2）メニューアイコン色	スマホヘッダー上部に追加できるメニューのテキスト（またはアイコン）の色を設定できます。
（追加メニュー2）背景色	スマホヘッダー上部に追加できるメニューの背景色を設定できます。

「追加メニュー」「検索スライドメニュー」はデフォルトでは表示されていません。

AFFINGER管理のメニュー設定をおこなうことで表示させることができます。

見出しの色の設定方法

次に見出しの色の変更方法です。

「カスタマイズ」のページで「見出しタグ（hx）/テキスト」→「H2タグ（H3タグ）」の順にタップすることで設定画面に移れます。

「カスタマイズ」のページで「見出しタグ（hx）/テキスト」→「H4タグ（H5タグ）」の順にタップすることで設定画面に移れます。

AFFINGERで自分なりの色を設定しよう

AFFINGERでは、色の設定項目が200カ所以上あります。

でも実際は全体カラーの設定だけで8割は完成します。

個別に設定する場合には、この記事の方法で設定を変えれば、自分なりの色の設定ができます。

AFFINGERでのカラー設定は、この記事で設定場所を確認して対応を進めましょう。