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

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

今回はこれらの色をパッと変えてくれる方法がありましたので、紹介していきます!
目次
- テーマカラーとは?
- テーマカラーの変更。
- 特定の場所だけ違う色にする場合は?
- まとめ
1.テーマカラーとは?
サイト全体を通してボタンや見出しに使用する色のことです。この設定をしておくと、固定ページや記事でテーマカラーを使用する要素を配置すると自動的に色が変わってくれます!

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

「リンク色」というのは、テキストにリンクが張られている場合に設定した色になります。テキストのリンクもボタンも、カーソルを合わせると「リンクのホバー色」に代わります。ボタンの場合、内部の文字色は背景色に合わせて自動で白か黒になるようです。
2.テーマカラーの変更
では早速自分好みに色を変更しましょう!
「外観」>「カスタマイズ」>「全般」>「色」まで選択します。

デフォルトだとこのように設定されていると思います(僕と同じテーマを選んでいる場合)。
僕はヘッダーと色が合うようにボタンの色のみ変えてみます。

「リンクのホバー色」は、カーソルがボタンに当たっていることがわかりやすいように色を少し変えます。この場合はベースの色よりも明るくしています。
設定はこれだけで完了です!
トップページだけでなく、別のページも併せて色が変わっていますね。

3.特定の場所だけ違う色にする場合は?
その場合は、その要素のみ色を指定すると別の色に変わってくれます。例として、このボタンの色を変えます。

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

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

ちゃんと変更されていますね!個別に色設定をすると、テーマカラーよりもこちらが優先されて反映されるみたいですね。
4.まとめ
今回はテーマカラーを変更してみました。私の場合はボタン色しか変更していませんが、皆さんはお好みで色々変えてみてください!
デモサイト↓↓
Astraデモサイト
みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください!
WordPressデザインサービスは以下から承っております。