---
title: "ウォークスルー:Pagesにカスタムスタイルを追加する方法"
slug: "walkthrough--adding-a-custom-style-to-pages"
abstract: "SXAコンポーネントにカスタムスタイルを追加する方法について、コンテンツ作成者がPagesアプリで使えるようにする方法。"
---
# ウォークスルー:Pagesにカスタムスタイルを追加する方法

> !注このトピックで説明されている手順はコンテンツエディターを使用してください。

スタイルは、Page Builderアプリと最終製品の両方でコンポーネントのレンダリング方法を定義します。サイトを作成すると、デフォルト設定でいくつかのスタイルが用意されています。ただし、SXAコンポーネントには自分のカスタムスタイルを追加できます。

以下のスクリーンショットは、コンテンツエディターで設定された「 **Background** in Pages」というカスタムスタイルを示しています。この例では、カスタムスタイルによりコンテンツ作成者がプロモーションコンポーネントの3種類の背景から1つを選択できます。リスト内の各値はスタイルクラスに対応しています。

このウォークスルーでは、以下の方法を説明します:

-   カスタムスタイルを追加しましょう。
-   Pagesでカスタムスタイルオプションの表示方法を指定してください。
-   Pagesで利用したいスタイルオプションを定義するために、スタイルクラスを追加してください。

## カスタムスタイルの追加

コンテンツ作成者に提供したいカスタムスタイルをPagesに追加してください。

カスタムスタイルを追加するには:

1.  サイトの *Presentation* フォルダに行ってください。
2.  「**スタイル」**を右クリックしてから「>**スタイル**を**挿入**」をクリックします。
3.  スタイルの名前を入力して **OK**をクリックします。

> !ヒント例えば、新しいスタイルにコンテンツ作成者が何をするのか理解しやすい名前を付け*Background*。

## 表示タイプを指定する

カスタムスタイルを追加した後、Pagesのスタイルオプション表示方法を設定してください。これを行うには、既製の [表示タイプ](https://doc.sitecore.com/sai/ja/developers/sitecoreai/content-modeling-and-presentation/sitecoreai-for-developers/pages-configuration/walkthrough--adding-a-custom-style-to-pages/display-types-for-styles.html "Display types for styles")のいずれかを割り当てる必要があります。

表示タイプを指定するには:

1.  コンテンツツリーで、作成したカスタムスタイルをクリックします。
    
2.  **データ**セクションで「**タイプ**リスト」をクリックし、スタイルの表示タイプを選択します。
    
    ![Specify a display type in the Content Editor](https://doc.sitecore.com/api/markdown-image/sai/ja/developers/sitecoreai/images/ce-style-types.png)
    
3.  コンテンツ作成者がセクションを空欄にしておけたい場合は、「 **空の値を許** す」チェックボックスを選択してください。
    

> !注 *アイコンボタングループチェック* や *アイコン* ボタングループラジオ表示タイプを使う場合は、[グリッドに](https://doc.sitecore.com/sai/ja/developers/sitecoreai/content-modeling-and-presentation/sitecoreai-for-developers/pages-configuration/walkthrough--setting-up-a-custom-grid.html "Walkthrough: Setting up a custom grid")正しいページアイコンが指定されているか確認してください。

## カスタムスタイルにスタイルクラスを追加

コンテンツ作成者がコンポーネントごとに異なるスタイルオプションを見られるようにするには、それぞれのオプションをスタイルクラスとして追加してください。

カスタムスタイルにスタイルクラスを追加するには:

1.  コンテンツツリーでカスタムスタイルを右クリックし、「**スタイル>挿入**」**をクリックします。**
2.  **Value**フィールドで、スタイルのCSSクラス名を入力します。[デフォルトのCSSクラスとカスタムCSS](https://doc.sitecore.com/sai/ja/developers/sitecoreai/content-modeling-and-presentation/sitecoreai-for-developers/pages-configuration/walkthrough--adding-a-custom-style-to-pages/available-css-classes.html "Available CSS classes")クラスの両方を利用できます。
3.  このクラスを特定のコンポーネントに関連付けるには、「許可された **レンダリング** 」セクションで **「編集**」をクリックします。ここでコンポーネントを入力すると、このクラスはそのコンポーネントのみで利用可能です。これをしないと、すべてのコンポーネントでクラスが受講可能です。