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