---
title: "カスタムフォントやスタイルを追加"
slug: "add-custom-fonts-and-styles"
abstract: "コンポーネントビルダーのカスタムCSSコードエディタを使って、ブランドに合ったカスタムフォント、要素スタイル、ルールをスタイルライブラリに追加してください。"
---
# カスタムフォントやスタイルを追加

コンポーネントビルダーの **スタイル** タブでは、UIで利用可能な様々なスタイルや機能のルールや要素を作成できます。また、CSSコードとして独自の機能を追加することも可能です。例えば、UIにまだ存在しないフォントやカスタム箇条書きを追加したり、段落内のリンクの表示方法を変更したりできます。

ルールや要素にカスタムCSSを追加すると、そのスタイルはカスタマイズされたルールや要素で構築されたテーマに適用されます。

> !注カスタムCSSエディタに入力するコードはUIに設定されたスタイリングを上書きし、スタイルライブラリの他のユーザーを混乱させる可能性があります。したがって、利用可能なUIを使い、カスタムCSSは新しい機能の追加にのみ使い、エディターから自動生成されたコードを上書きしないことを推奨します。

## カスタムフォントを追加する

基本的なスタイルにAdobeフォントを含むカスタムフォントを追加できます。新しいフォントを使って、要素やテーマのタイポグラフィルールを作成できます。

スタイルライブラリにカスタムフォントを追加するには:

1.  **スタイル**ビルダーの左側ペインで**「フォント**」をクリックします。
2.  ページ上部の **フォントライブラリを追加** をクリックします。
3.  **フォントタイプ**欄で**「カスタムCSS」**をクリックします。
4.  コードエディタで、以下のいずれかを行います:
    -   @font-face {}ルール内でフォントを記述するCSSコードを貼り付けます。
    -   または **、リモートCSSファイルの取得** をクリックし、そのURLを貼り付けてください。
5.  **「保存**」をクリックします。

## カスタムCSSでルールや要素スタイルを追加できます

ルールや要素スタイルに新しいスタイルを追加するには:

1.  コンポーネントビルダーで「 **スタイル」** タブをクリックします。
    
2.  左側のペインで、カスタムCSSを追加したいルールまたは要素を選択し、**カスタムCSS**タブをクリックします。
    
3.  コードエディターで、生成されたコードの後に新しい機能を加えた自分のCSSコードを追加します。
    
    > !注コードエディタは、スタイルの他のタブに組み込まれた特徴から生成されたCSSコードを表示します。この生成されたコードは編集できませんが、追加は可能です。その後、コードエディタがあなたのコード構文を検証します。
    
4.  コードが正しく完成したら、「 **保存」**をクリックします。
    

カスタムCSSタブの青い点は、ルールや要素にカスタマイズがあることを示します。

![Example of custom CSS code editor with customization.](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/2023-12-05_11-12-06.png)