スタイル設定概要

これは、ブロックテーマに搭載された新しい機能です。色、タイポグラフィ、レイアウトなどを変更して、自由自在にサイトをカスタマイズできます。また、ブランドイメージでデザインしたボタンブロックに独自の色を追加したり、見出しブロックを好みのサイズに調整するなど、サイト全体で統一感を感じられるようブロックを調整できます。 

スタイルの場所

この機能を利用するには、ブロックテーマを使用する必要があります。管理画面で、「外観」 > 「エディタ（ベータ）」に移動します。ブロック設定サイドバーの横に、「スタイル」アイコンが表示されます。テンプレートやテンプレートパーツの種類に関係なく、編集中は使用できます。 

スタイルの動作

設定したスタイルは、サイト全体に影響を与えます。つまり、背景色を変更すると、すべての投稿、ページ、テンプレートの背景色が変わります。テーマにはさまざまなデフォルト設定がありますが、スタイルを使用すると、このオプションを独自のオプションで上書きできます。たとえば、カラーパレットに独自の色を追加したり、レイアウトコントロールを変更したりできます。

タイポグラフィ

このセクションでは、サイトで使用されるフォントや、フォントの太さ、行の高さなど、さまざまなグローバル要素のデフォルト設定を管理できます。 選択すると、テキストとリンクの両方を編集するオプションが表示されます。ここから、フォントファミリ、行の高さ、外観のカスタマイズを行うことができます。

色 

このセクションでは、カラーパレットとサイト上のさまざまなグローバル要素のデフォルト色を管理できます。背景色、文字色、リンク色なども含まれます。 

カスタム色、または、グラデーションの追加

サイト全体で使用するカスタム色を追加したい場合は、ここで追加できます。

1. スタイルインターフェースを開く。
2. 「色」セクションを選択する。
3. 「パレット」セクションを選択し、「単色」または「グラデーション」を選択する。
4. 「カスタム」の下で「+」ボタンを選択する。
5. ここから、カスタムオプションを選択し、名前を付けます。カスタムオプションの名前を付ける際は、既存の色名と重複しないよう、できるだけ一般的な色名（青、緑など）は避けてください。
6. 色と名前が決まったら、「完了」を押してから「保存」を押してください。
7. これで、サイト全体でこのオプションを使用できます。

レイアウト 

このセクションでは、サイト全体の構成にパディングを追加できます。恐らくこのセクションを使用する必要はないでしょうが、サイトのレイアウト全体を調整する場合には便利です。 

ブロック

サイトのすべてのブロックを、好みに合わせて調整できます。各ブロックには、カスタマイズ用のオプションが用意されています。例えば、画像ブロックにはレイアウトのオプションがあり、ボタンブロックにはタイポグラフィー、色、レイアウトのオプションがあります。 

ここで変更した内容は、サイト内のすべてのブロックのデフォルト状態に影響を与えますが、個別にカスタマイズしたブロックには適用されないことに注意してください。例えば、個別のボタンブロックにカスタム色を設定した場合、ここで設定したスタイルは、個別に設定した色を上書きしません。 

リソース

スタイルインターフェースで素早く変更する例を紹介します。