WordPressのAstraテーマに基本的な色指定を行っていく。
通常のテキスト（本文）、リンクテキスト、ホバーテキストの各色を指定する。
使用サーバー：ロリポップ
使用テーマ：Astra
Astraテーマの基本的な設定項目
設定に入る前に、Astraの基本的な設定項目を確認。
- 全般
- Header Builder
- パンくずリスト
- ブログ
- サイドバー
- Footer Builder
以上の6つでおおまかなデザインを形成する。
Astraテーマのカスタマイズメニュー
このうちHeader BuilderとFooter Builderのふたつは、Astra 3.0で追加された機能。
サイト全体に共通のヘッダー・フッターをかなり細かく設定できる。
ただし、ほかのプラグインやスターターテンプレートを入れると、表示されなくなる可能性があるので要注意。
特にAstra Pro（有料版テーマ）を入れると、ページヘッダーや固定ヘッダーといった機能が有効になる代わりに設定項目が増えてわかりづらくなる。
無料版でのカスタマイズにある程度慣れるまでは、有料版のインストールは控えた方がいい。
Astraテーマのカスタマイズメニュー
Astra設定画面にはカスタマイザー設定へのリンクとして、Header Builder、Footer Builderとレイアウトオプション、ブログレイアウトの計4つを呼び出せる。
さらにその下にAstra Proの機能一覧がある。
基本色を決める
今回はテーマカラーをフォレストグリーンとして、それに組み合わせる色をチョイスする。
色の指定には、参考になるサイトがたくさんあるが、まずWeb色見本 原色大辞典でフォレストグリーンの16進カラーコードを取得し、さらにAdobeカラーを使って、組み合わせる色をピックアップした。
色見本サイトでカラーコードを確認
Adobeカラーでは、基本にするベースカラーをひとつ決めて、それをもとにしたカラースキームを自動生成する。
Adobeカラーでスキームを生成
生成パターンは、類似色、トライアド、補色など9パターン＋カスタムの計10種。
カラースキームのボックスをひとつ選んでポイントすると［ベースカラーに設定］というポップアップが現れる。クリックするとベースカラーに設定されて、白い三角形アイコンが付く。
その下にあるカラーコード欄に、フォレストグリーンのコード”228b22"を入力してやるとカラーパレットが更新されて新たなスキームが現れる。
カラースキームのルール（カラーハーモニールール）は、左のリストで選択する。
作成したカラースキームは右上の［＋］ボタンでライブラリに登録できる（あらかじめAdobeユーザーとしてログインしておく）。
登録したスキームはライブラリからいつでも参照でき、コードのコピーも可能だ。
ライブラリに保存したカラースキーム
カラースキームの保存やコピーが可能
テーマカラーを設定する
テーマカラーが決まったら、WordPressのテーマカスタマイズ画面で色を登録。
全般＞色＞基本色と進んでパレットに色を割り当てる。
Astraテーマの基本色設定
文字色は変更しなくていいので、テーマ色、リンク色、リンクのホバーを割り当てていく。
カラーコードを入力
基本色設定が終わったところ