以前の記事でヘッダーを編集した時に、ボタンの色を変えてみました。

テンプレートからデザインを変更したヘッダー

ただ、ボタンはほかにもあって、これらを一つ一つ色を変えていくのはとても大変ですね・・・。

「ホーム」ページ

今回はこれらの色をパッと変えてくれる方法がありましたので、紹介していきます!

目次

  1. テーマカラーとは?
  2. テーマカラーの変更。
  3. 特定の場所だけ違う色にする場合は?
  4. まとめ

1.テーマカラーとは?

サイト全体を通してボタンや見出しに使用する色のことです。この設定をしておくと、固定ページや記事でテーマカラーを使用する要素を配置すると自動的に色が変わってくれます!

テーマカラーの設定画面と対応要素

上の図で確認してみると、ボタンの色はもちろん、文字の色や、見出しの色まで個別に指定できるようですね。

ボタンにカーソルを合わせたとき

「リンク色」というのは、テキストにリンクが張られている場合に設定した色になります。テキストのリンクもボタンも、カーソルを合わせると「リンクのホバー色」に代わります。ボタンの場合、内部の文字色は背景色に合わせて自動で白か黒になるようです。

2.テーマカラーの変更

では早速自分好みに色を変更しましょう!
「外観」>「カスタマイズ」>「全般」>「色」まで選択します。

テーマカラー設定画面

デフォルトだとこのように設定されていると思います(僕と同じテーマを選んでいる場合)。

僕はヘッダーと色が合うようにボタンの色のみ変えてみます。

設定後

「リンクのホバー色」は、カーソルがボタンに当たっていることがわかりやすいように色を少し変えます。この場合はベースの色よりも明るくしています。

設定はこれだけで完了です!
トップページだけでなく、別のページも併せて色が変わっていますね。

「サービス内容」ページ

3.特定の場所だけ違う色にする場合は?

その場合は、その要素のみ色を指定すると別の色に変わってくれます。例として、このボタンの色を変えます。

トップページのヘッダー

固定ページ編集画面で、ボタンを選択し、「色設定」で変更します。めっちゃわかりやすく気持ち悪い色にしてみました(笑)

ボタン色編集

これで公開してサイトを見てみると、

ボタン色変更後のWebサイト

ちゃんと変更されていますね!個別に色設定をすると、テーマカラーよりもこちらが優先されて反映されるみたいですね。

4.まとめ

今回はテーマカラーを変更してみました。私の場合はボタン色しか変更していませんが、皆さんはお好みで色々変えてみてください!

デモサイト↓↓
Astraデモサイト


みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください!
WordPressデザインサービスは以下から承っております。

ワードプレスホームページを新規導入します テンプレート付き!!初めての導入、初心者の方にオススメ!!

関連記事

  • 関連記事
  • おすすめ記事
  • 特集記事
TOP