スタイルを使用すると、さまざまな色、タイポグラフィ設定、レイアウトオプションでサイトのデザインをカスタマイズできます。このガイドでは、スタイルを使用してサイト全体でデザインを統一する方法について説明します。
この機能は、WordPress.com プレミアムプラン、ビジネスプラン、コマースプランと従来の Pro プランをご利用のサイトで使用できます。無料プランおよびパーソナルプランのサイトでこの機能を利用するには、プランをアップグレードしてください。
サイトでサイトエディターをサポートするテーマを使用している場合は、「スタイル」設定にアクセスできます。サイトでサイトエディターが使用されているかどうかを簡単に確認するには、サイトのダッシュボードの「外観」でチェックします。こちらに「エディター」が表示されている場合は、「スタイル」にアクセスできます。
スタイルを使用するには、対象プランが必要です。サイトのプランがスタイルをサポートしていない場合でも設定にはアクセスできますが、以下のメッセージにより、プランのアップグレードを求められます。
サイトにはプレミアムスタイルが含まれ、プレミアムプラン以上にアップグレードした場合のみ訪問者に表示されます。
サイトのスタイルをカスタマイズした後で、スタイルをサポートしていないプランにサイトをダウングレードした場合、カスタマイズした内容は保持されますが、サイトをサポート対象プランに再びアップグレードするまで訪問者には表示されません。
サイトの編集中に、画面の右上にある「スタイル」オプションを見つけます。このスタイルアイコンは、右側の画像のように半分白で半分黒の円として表示されます。
スタイルパネルを見つけるための全手順は次のとおりです。
- サイトのダッシュボードにアクセスします。
- 「外観」→「エディター」の順に移動します。
- 左側のメニューから「スタイル」を選択します。
- 特定のテーマでは、複数のスタイルの組み合わせから選択するよう求められることがあります。鉛筆アイコンをクリックして、すべてのスタイル設定を開きます。
「スタイル」設定に次のオプションが表示されます。
3つのオプションのそれぞれついては、本ガイドの次のセクションで説明します。
テーマによっては、さまざまなフォントや色などを試すために、複数のスタイルバリエーションが用意されています。これらのスタイルバリエーションを使用すると、既製の信頼できるデザインを使用してサイトをすばやく微調整し、カスタマイズできます。
「タイポグラフィ設定」を使用して、サイト全体で使われるテキストの外観を管理します。
以下については個別に設定を調整できます。
- テキスト
- リンク
- 見出し
- キャプション
- ボタン
タイポグラフィのオプションは以下のとおりです。
- フォントでは、テキストに適用するフォントファミリーを選択できます。
- サイズでは、フォントの大きさを設定できます。デフォルトのフォントサイズセットを選択するか、サイズ選択の上にあるスライダーボタンを使って REM、PX、EM でカスタムサイズを設定できます。
- 「外観」では、テキストの太さ (細字から極太まで) と傾き (標準またはイタリック) を変更します。
- 「行の高さ」では、テキストの上下のスペースを設定します (0を選択する場合は、モバイルでサイトを確認してください)。
プラグイン対応プランのサイトには、カスタムフォントをインストール、アップロード、管理できる追加の「フォント」セクションがあります。
詳細については、「タイポグラフィ設定」の専用ガイドをご覧ください。
「色設定」を使用して、サイトのグローバル要素のカラーパレットを管理します。たとえば、サイトの背景色を変更する場合は、「背景」要素を使って変更します。
一番上に表示されるオプションは「パレット」です。サイトのカラーパレットは、サイト全体で使用されるデフォルトの色を設定します。引き続き特定の要素の色をコントロールできますが、カラーパレットを定義することでサイト全体で一貫した配色を実現できます。
「パレット」のすぐ下の色設定に、サイトのさまざまな要素の色を編集するオプションが表示されます。これらの要素は次のとおりです。
- テキスト
- 背景
- リンク
- キャプション
- ボタン
- 見出し
詳細については、「サイトの色をカスタマイズする」の専用ガイドをご覧ください。
「シャドウ」設定を使用すると、サイト全体の各要素で使用されるデフォルトのシャドウスタイルをカスタマイズできます。
ここで定義するシャドウのスタイルは、シャドウのオプション (ボタン、 画像、カラムなど ) を含む特定のブロックのシャドウ設定で使用できます 。
テーマのデフォルトのスタイルには、「ナチュラル」、「ディープ」、「シャープ」、「アウトライン」、「くっきり」があります。
「カスタム」の横にある「+」アイコンをクリックして、色、角度、範囲、ぼかしを微調整し、独自のシャドウスタイルを作成します。
レイアウト設定を使用して、サイトのコンテンツエリアの幅を制御したり、パディングを追加したり、ブロック間の間隔を調整したりできます。
スタイルパネルで「ブロック」をクリックし、サイト全体の特定のブロックの外観をカスタマイズします。
ここでは、サイト全体でカスタマイズできるすべてのブロックのリストが表示されます。ブロックを選択すると、そのブロックに使用できるオプションが表示されます。
スタイルを使用してブロックに加えた変更は、ブロックを個別にカスタマイズした場合を除き、サイトに追加したタイプのすべてのブロックに影響します。たとえば、ボタンブロックを問い合わせページに追加し、背景色を黄色に設定した場合、スタイルを変更してもこの黄色は上書きされません。ただし、ボタンブロックを問い合わせページに挿入し、デフォルトの色を変更しなかった場合、その色はスタイルで設定した色に変更されます。
サイトに追加できるすべてのコンテンツに対する変更の影響を確認するには、「スタイルブック」を使用します。これには、スタイルの変更を保存した後にすべての使用可能なブロックが表示される例を紹介します。
- 「スタイル」パネルで、右上にある「スタイルブック」ボタンをクリックします。右側の画像に表示されているとおり、アイコンは目のように見えます。
- 画面上部のタブを使用して、テキスト、メディア、デザインなど、さまざまなカテゴリーのブロック間を移動します。
- 「スタイルブック」アイコンを再度クリックしてオフにし、コンテンツに戻ります。
このガイドで説明されている設定を使用して、サイトのスタイルのほぼすべての面をカスタマイズできます。そのため、CSS を使用して変更を加える必要はほとんどありません。
ただし、CSS コードに精通しており、CSS を使用してサイトのスタイルを変更する場合は、次の手順に従って CSS コードを追加できます。
- 「スタイル」パネルを開きます。
- 右上にある省略記号 (3つの点) をクリックします。
- 「追加 CSS」を選択します。
- 表示されたボックスに CSS を入力します。画面左側のコンテンツには、CSS の変更がリアルタイムで反映されます。
- 「ストア」をクリックします。
特定のブロックにのみ CSS を適用するには、次の手順に従います。
- 「スタイル」パネルを開きます。
- 「ブロック」を選択します。
- 「ブロック」を選択します。
- 一番下までスクロールし、「高度な設定」をクリックします。
- 「追加 CSS」というラベルのボックスに CSS を入力します。画面左側のコンテンツには、CSS の変更がリアルタイムで反映されます。
- 「ストア」をクリックします。
サイトのスタイルを以前のバージョンに復元できます。スタイル設定の省略記号 (3つの点) をクリックし、「リビジョン」パネルを探します。このオプションは、変更が保存された後にのみ表示されます。
次の画面で、特定の期間の変更をプレビューする任意のリビジョンを選択し、「適用」ボタンを選択して、このバージョンのスタイル設定を復元します。
サイトに適用したカスタムスタイルを取り消して、テーマのデフォルトの外観に戻すことができます。これは、適用したプレミアムスタイルを、対象プランにアップグレードすることなく削除する場合に役立ちます。
プレミアムスタイルを削除し、スタイル設定をテーマのデフォルトの外観にリセットするには、次の手順を実行します。
- サイトのダッシュボードにアクセスします。
- 「外観」→「エディター」の順に移動します。
- 左側のメニューから「スタイル」を選択します。
- 特定のテーマでは、複数のスタイルの組み合わせから選択するよう求められることがあります。鉛筆アイコンをクリックして、すべてのスタイル設定を開きます。
- 右側に表示される「スタイル」パネルで、省略記号 (3つのドット) をクリックし、「スタイルをリセット」オプションを選択します。
これにより、スタイル設定に加えたすべての変更 (タイポグラフィ、色、レイアウト) が取り消されます。 スタイル設定のみがリセットされ、コンテンツやサイトの設定に加えた変更はリセットされません。
特定の要素のスタイルのみをリセットする場合は、まず「タイポグラフィ」、「色」、「レイアウト」、「ブロック」をクリックします。その後、省略記号 (3つのドット) をクリックし、「すべてリセット」をクリックすると、選択した要素のスタイルのみをリセットできます。
特定のブロックをデフォルトにリセットすることもできます。
スタイルが変更されていない場合は、「デフォルト設定にリセット」オプションはグレー表示されます。
日本語サポート 
コメントを投稿するにはログインしてください。