最新情報

WordPress サイト作成 #02 テーマのカラー設定

WordPressのAstraテーマに基本的な色指定を行っていく。

通常のテキスト(本文)、リンクテキスト、ホバーテキストの各色を指定する。

 

使用サーバー:ロリポップ

使用テーマ:Astra

 

Astraテーマの基本的な設定項目

設定に入る前に、Astraの基本的な設定項目を確認。

  • 全般
  • Header Builder
  • パンくずリスト
  • ブログ
  • サイドバー
  • Footer Builder

以上の6つでおおまかなデザインを形成する。

WordPressサイト構築 #0007

Astraテーマのカスタマイズメニュー

このうちHeader BuilderとFooter Builderのふたつは、Astra 3.0で追加された機能。

サイト全体に共通のヘッダー・フッターをかなり細かく設定できる。

ただし、ほかのプラグインやスターターテンプレートを入れると、表示されなくなる可能性があるので要注意。

特にAstra Pro(有料版テーマ)を入れると、ページヘッダーや固定ヘッダーといった機能が有効になる代わりに設定項目が増えてわかりづらくなる。

無料版でのカスタマイズにある程度慣れるまでは、有料版のインストールは控えた方がいい。

WordPressサイト構築 #0007

Astraテーマのカスタマイズメニュー

Astra設定画面にはカスタマイザー設定へのリンクとして、Header Builder、Footer Builderとレイアウトオプション、ブログレイアウトの計4つを呼び出せる。

 

さらにその下にAstra Proの機能一覧がある。

 

基本色を決める

今回はテーマカラーをフォレストグリーンとして、それに組み合わせる色をチョイスする。

色の指定には、参考になるサイトがたくさんあるが、まずWeb色見本 原色大辞典でフォレストグリーンの16進カラーコードを取得し、さらにAdobeカラーを使って、組み合わせる色をピックアップした。

WordPressサイト構築 #0009

色見本サイトでカラーコードを確認

 

 

Adobeカラーでは、基本にするベースカラーをひとつ決めて、それをもとにしたカラースキームを自動生成する。

WordPressサイト構築 #0010

Adobeカラーでスキームを生成

 

生成パターンは、類似色、トライアド、補色など9パターン+カスタムの計10種。

カラースキームのボックスをひとつ選んでポイントすると[ベースカラーに設定]というポップアップが現れる。クリックするとベースカラーに設定されて、白い三角形アイコンが付く。

その下にあるカラーコード欄に、フォレストグリーンのコード”228b22"を入力してやるとカラーパレットが更新されて新たなスキームが現れる。

カラースキームのルール(カラーハーモニールール)は、左のリストで選択する。

 

作成したカラースキームは右上の[+]ボタンでライブラリに登録できる(あらかじめAdobeユーザーとしてログインしておく)。

 

登録したスキームはライブラリからいつでも参照でき、コードのコピーも可能だ。

WordPressサイト構築 #0011

ライブラリに保存したカラースキーム

 

WordPressサイト構築 #0012

カラースキームの保存やコピーが可能

 

テーマカラーを設定する

テーマカラーが決まったら、WordPressのテーマカスタマイズ画面で色を登録。

全般>色>基本色と進んでパレットに色を割り当てる。

WordPressサイト構築 #0013

Astraテーマの基本色設定

 

文字色は変更しなくていいので、テーマ色、リンク色、リンクのホバーを割り当てていく。

WordPressサイト構築 #0014

カラーコードを入力

 

WordPressサイト構築 #0015

基本色設定が終わったところ

 

-最新情報