スタイル設定概要

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

スタイルの場所

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

Image showing the Styles sidebar open with all options listed.
スタイルサイドバー

トップ ↑

スタイルの動作

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

トップ ↑

タイポグラフィ

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

Style sidebar for the Links section showing various customizations.

トップ ↑

色 

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

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

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

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

トップ ↑

レイアウト 

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

トップ ↑

ブロック

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

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

トップ ↑

リソース

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

この記事は役に立ちましたか ? どうすればさらに改善できますか ?