スタイルブックを使用してサイトをデザインする

このガイドでは、スタイルブックを使用して、サイトにブロックを挿入せずに、スタイルの変更がブロックの表示に与える影響をプレビューする方法について説明します。

この機能は、WordPress.com プレミアムプラン、ビジネスプラン、コマースプランと従来の Pro プランをご利用のサイトで使用できます。無料プランおよびパーソナルプランのサイトでこの機能を利用するには、プランをアップグレードしてください。

スタイルブックでは、サイトのスタイルに対する変更を保存した後に、使用可能なブロックのすべてがどのような外観になるかの例を示します。

1. サイトのダッシュボードにアクセスします。
2. 「外観」→「エディター」の順に移動します。
3. 左側のメニューから「スタイル」を選択します。
4. 「スタイル」テキストの右側にある目のアイコンをクリックします (アイコンをもう一度クリックすると、エディターに戻ることができます)。

ページ、テンプレート、テンプレートパーツを編集する際にスタイルブックを開くこともできます。上の動画による概要で使用されている手順は次のとおりです。次の手順を実行します。

1. サイトのダッシュボードにアクセスします。
2. 「外観」→「エディター」の順に移動します。
3. ページ、テンプレート、テンプレートパーツを編集します。
4. エディターの上部ツールバーにある「スタイル」アイコン (白黒半々の円) をクリックします。
5. 「スタイルブック」アイコン (目のような外観のアイコン) をクリックしてスタイルブックを開きます (アイコンをもう一度クリックすると、エディターに戻ることができます)。

スタイルブックを開くと、配色やタイポグラフィをプレビューおよび変更できます。それぞれの変更が特定のテキスト、ブロック、メディアなどにどのような影響を与えるかの例も表示されます。

「スタイル」パネルの右側には、サイトのさまざまな種類の要素 (色、タイポグラフィ、ボタン、画像など) のプレビューが表示されます。特定の要素のスタイルを編集するには、次の手順に従います。

1. 画面の右側にあるプレビューで要素 (色、タイポグラフィなど) をクリックします。
2. 左側の「スタイル」パネルで要素のスタイルを編集します。
3. 要素名の横にある戻り矢印をクリックして要素の全リストに戻り、スタイルを設定する別の要素を選択します。

4. 完了したら、「デザイン」パネルの下部にある「変更を確認…」ボタンをクリックして、変更を確認して保存します。

変更を保存せずに終了するには、「デザイン」 パネルの左上にあるアイコンをクリックして、変更を保存せずに終了するオプションを選択します。