#3 ボタンの色を変える方法！簡単３STEP！

ボタンやReadmore、ページ番号の色を変えたいのに、どこで設定するのかわからない…。

そんな経験はありませんか？

実はサイトエディターのスタイル機能を使えば、コードを一切書かずに簡単に変更できます。この記事では、3ステップでボタンの色を変える方法を解説します。

X-T9のボタンの色はどこで変える？

サイトエディターとは、ブロックテーマ専用のサイト全体を編集できる画面のことです。

ヘッダー・フッター・テンプレートなど、サイト全体のデザインをここで管理できます。クラシックテーマにはない、ブロックテーマならではの機能です。

※変更できない所もありますが、大体ここで変更ができます。

サイトエディターには「スタイル」という機能があります。

スタイルとは、サイト全体の色・フォント・余白などのデザインをまとめて管理できる仕組みのことです。ここでプライマリカラー（メインの色）を変更すると、ボタンや装飾など複数の箇所に一括で反映されます。（ボタンだけだと、色→ボタンの色のみ変更できます）

私は同系色にするため、Readmoreやページ番号のボタンも同じ色にしました。

（今回はボタン・ページネーション・お問い合わせボタンの色など一括で変更したいので、テーマパレット→プライマリの色から変更します。）テーマとあるところはテーマで使用しているカラーです。テーマカラー一括で変更する場合は、ここを変更します。

カラーコード（例：#FF0000）がわかっている場合は、直接入力すると正確な色に変更できます。

保存したらサイトを見て、色が変わっていることを確認してください。

キャッシュが残っていると変更が反映されないことがあります。ブラウザの再読み込み（Ctrl＋F5）を試してみてください。

プライマリカラーを変更すると、以下の箇所の色がまとめて変わります。

投稿ページや固定ページに設置したボタンブロックの背景色が変わります。

記事一覧ページの「続きを読む」ボタンの背景色が変わります。

記事一覧ページの下部に表示されるページ番号（ページネーション）の背景色も変わります。

ヘッダーの右上（ナビゲーションの所）にあるお問い合わせのボタンの背景色がプライマリーカラーに変わります。全体としてアクセントに使われているカラーです。

※プライマリカラーはサイト全体に影響するため、変更前にどの箇所に使われているか確認しておくと安心です。

コードを書かずにサイトの印象をガラッと変えられるので、ぜひ試してみてください！

次の記事では、X-T9のテンプレートの仕組みについて解説します。

必要なもの