ブロックテーマの色・フォント・幅の変え方 | エディターのスタイル画面

スタイルでできること

Styles は、サイト全体の見た目とレイアウトを、全体（グローバル）でまとめて設定する機能よ。投稿や固定ページを1つずつ編集する必要はないの。たとえば背景色を変えると、すべての投稿・固定ページ・テンプレートの背景色が変わるわ。席ごとに模様替えしなくても、お店の内装を一度に変えられるようなものね。

使える条件は2つ。ブロックテーマを有効化していること、WordPress 5.9 以上であること。Site Editor は、ブロックテーマを有効化した時だけ使えるわ。

やりたいこと	開く場所（Styles パネル）	主な設定
背景・文字・リンクなどの色	Colors	Background、Text、Links、Headings、Buttons、Palette
文字の種類・大きさ	Typography	フォントの種類、フォントサイズ、行の高さ、テキスト装飾
コンテンツの幅・余白	Layout	content、wide、Padding、Block spacing
特定のブロックだけ	Blocks	ブロックの種類ごとの色・文字・余白

スタイル画面を開く手順

1. ダッシュボードで Appearance > Editor を開くのよ。
2. 画面右上の、半分塗りの円のアイコンを選びなさい。ブロック設定サイドバーの上にあるわ。
3. Styles パネルが開くの。Site Editor のメニューにある Styles からも開けるわ。

Styles パネルには、Typography、Colors、Layout、Blocks があるの。Typography・Colors・Layout の変更は、サイト全体に効くわ。

初めて開くと、Welcome Guide が出るわよ。右上の X で閉じられるの。あとで見たい時は、右上の縦3点アイコンから Welcome Guide を選びなさい。

変更を保存する時は、Site Editor の Save を使うの。押すと、変更のあったテンプレートなどの一覧が出て、全部または一部を保存できるわ。ヘッダーやフッターのテンプレートを変えると、そのテンプレートを使うすべてのページに及ぶから気をつけなさい。

色・フォント・幅を変える

色（Colors）

Colors を開くと、上にテーマのスタイルバリエーションのカラーパレット、その下に色を変えられる要素の一覧が出るわ。要素を選ぶと、その色の設定パネルが開くの。変更すると、左側のサイトの見た目が更新されるわよ。

要素	変えられるもの
Background	単色またはグラデーション
Text	サイト全体の標準の文字色。カラーピッカー、または HEX・RGB・HSL の値で指定
Links	リンクの標準色と、ホバー時の色
Headings	H1〜H6 のレベルごとの色。タブの All を選ぶと全レベルを一度に変更。見出しの背景色も設定可
Buttons	ボタンの文字色と背景色

要素のパネル右下の Clear を押すと、その要素に設定した色を消せるわ。

パレットそのものの色を変える手順は、次のとおりよ。

1. Colors パネルで Palette を開くの。
2. Solid タブの Theme の色は、テーマの設定全体で使えるわ。Default の色は、ページや投稿のブロックで使えるのよ。
3. Theme または Default の右上の縦3点から、Edit colors を選びなさい。
4. 変えたい色の丸を選び、カラーピッカーか HEX・RGB・HSL の値で指定するのよ。
5. 右上の Done で確定するの。

元に戻す時は、同じ縦3点から Reset colors を選びなさい。テーマ元のスタイルバリエーションの色に戻るわ。

テーマにカラーパレットがない場合は、Add custom colors ボタンが出るの。Palette の Custom セクションで、右上の + を押すと独自の色を追加できるわ。グラデーションは Gradient タブで編集・追加するのよ。

タイポグラフィ（Typography）

Typography を開き、変えたい要素（テキスト、リンク、見出し、ボタン）を選びなさい。変えられる項目は、フォントの種類、フォントサイズ、Appearance、行の高さ、テキスト装飾。選ぶとプレビューで見た目を確認できるわ。

フォントサイズは、S・M・L・XL・XXL のプリセットから選ぶか、px・em・rem などの単位でカスタム値を指定するの。

見出しは H1〜H6 ごとに、次の項目を設定できるわよ。

• Font Family
• Font Size
• Font Style（Default・Regular・Bold・Italic・Bold Italic）
• Line Height & Letter Spacing
• Text Decoration（None・Underline・Strikethrough）
• Text Orientation & Letter Case

サイズのプリセット自体を変える場合は、変えたいプリセットを選び、スライダーか数値で調整するの。使える単位は px・em・rem・vw・vh よ。Custom fluid values を有効にすると、通常のサイズ入力は使えなくなり、最小サイズと最大サイズを指定する形になるわ。

レイアウト（Layout）

Layout では、サイトのメインコンテンツ領域の幅をまとめて設定するのよ。

項目	内容
content	Align が None のブロックの標準の幅
wide	Align が Wide width のブロックの幅
Padding	サイト周囲の余白。上・右・下・左を設定
Block spacing	ブロック間の縦の余白

単位は、PX・%・EM・REM・VW・VH から選べるわ。

Padding は、初期状態ではリンクアイコンがロックされていて、1つの値が4辺に適用されるの。辺ごとに変えたい時は、リンクアイコンを押して解除しなさい。

戻す時は、縦3点から Content size、Wide size、Padding、Block spacing のうち、戻したい項目を選ぶのよ。

個別ブロックだけ変える・元に戻す

Styles の Blocks パネルには、全ブロックの一覧があるわ。名前で検索できて、ブロックを選ぶとそのブロックの設定が開くの。たとえば Quote ブロックの背景色・フォントサイズ・行の高さを、サイト全体の Quote ブロックにまとめて設定できるわよ。使える項目はブロックの種類で異なるわ。

Styles の変更は、個別にカスタマイズされていない、同じ種類のすべてのブロックに効くの。ホームページのボタンブロック1つだけ色を個別に変えていた場合、その色は残るわ。ほかのボタンは、Styles に従うのよ。

個別に変えたブロックの設定を、同じ種類のすべてのブロックに広げることもできるの。ブロックの設定で Advanced > Apply Globally を選びなさい。WordPress 6.2 以降の機能よ。

変更の影響を確かめるには、Style Book が使えるわ。Styles 画面で切り替えると、サイト上のすべてのブロックの見た目を一覧で見られるの。

元に戻す

Styles パネル右上の縦3点から Reset to defaults を選ぶと、変更前のテーマのスタイルに戻るわ。色・幅・余白は、前の節のとおり項目ごとにも戻せるの。

追加CSSの使いどころと注意

公式は、まず Styles の機能で試し、足りない部分に追加CSS（Additional CSS）を使うよう案内しているわ。順番よ、順番。

追加CSSは2種類あるの。

種類	場所	効く範囲
Additional CSS	Styles 画面の縦3点メニュー（WordPress 6.2 から）	サイト全体
Additional block CSS	Styles > Blocks で個別ブロックを選んだ画面	同じ種類のブロックすべて（例：Quote ブロックすべて）

ブロック単位の追加CSSは、セレクターと波かっこを書かず、property: value の形で書くの。Quote ブロックなら font-style: italic; ね。ホバー（:hover { ... }）など疑似クラスを使う時は、波かっこが必要よ。

追加CSSは、テーマを更新しても上書きされないのよ。ただし、テーマを切り替えると消えるわ。 別のテーマに替える予定があるなら、書いたCSSを控えておきなさい。

子テーマの作り方はブロックテーマの子テーマの作り方よ。

よくある質問

Stylesで変えた設定は、元に戻せますか。

戻せるわよ。Styles パネル右上の縦3点から Reset to defaults を選ぶと、変更前のテーマのスタイルに戻るわ。色・幅・余白は、項目ごとにも戻せるの。

特定のブロックだけ色を変えていると、Stylesの変更で上書きされますか。

上書きされないわ。個別にカスタマイズしたブロックの色は残って、ほかの同じ種類のブロックが Styles に従うのよ。

追加CSSは、テーマを更新すると消えますか。

更新では消えないわ。ただし、テーマを切り替えると消えるの。別のテーマに替える予定があるなら、書いたCSSを控えておきなさい。

出典

• Styles overview（WordPress公式）
• Site Editor（WordPress公式）