「メインカラー」の適用箇所について

このページでは、WordPressテーマ「Arkhe（アルケー）」での「メインカラー」設定について解説していきます。

Arkheでは、「カスタマイザー」→「全体設定」の中に「メインカラー」という設定項目があるのですが、
この「メインカラー」がデフォルトでどの部分に反映されているのか？という話になります。

CSS変数として代入されている

まず最初に覚えておいて欲しいのが、「CSS変数」として使えるという点です。
--ark-color_mainという名前で、カスタマイザーで設定したメインカラーを扱うことができるようになっています。

CSSでデザインを調節していく際にメインカラーとなる部分はこの変数を使用していただくことで、後から「少し色を変えたい」という時にコードを書かずカスタマイザーから変更することができます。

デフォルトでメインカラーが反映されている箇所

• グローバルナビの項目をマウスホバーするとテキストカラーがメインカラーに変化します。
• グローバルナビのサブメニューの背景色として使用。
• コアの「ボタンブロック」のデフォルトカラーとして使用。
• コアの「テーブルブロック」のヘッダー背景色として使用。
• カレンダーウィジェットのアクティブカラーとして使用。
• ページネーションのアクティブカラーとして使用。
• 画面右下に現れる「ページトップへ」ボタンの背景色として使用。
• コメントエリアの送信ボタン
• （他にも書き漏らしている部分があるかもしれません…！）

例

当サイトのメインカラーは黒に設定しているので少しわかりづらいかもですが、以下のようなコンテンツに「メインカラー」が使用されています。

ここの背景色が	メインカラーです。
テーブル	テーブル
テーブル	テーブル