> ## Documentation Index
> Fetch the complete documentation index at: https://docs.zonely.gen.tr/llms.txt
> Use this file to discover all available pages before exploring further.

# 追加CSS

> コードエディタから追加のスタイルルールでテーマの外観を完了します。

ページのクリエイティブ**追加 CSS**は、その部分を開きます。 あなたは、コードエディタに独自のCSSルールを書くことができます。 行番号は、あなたが長いファイルで配置した場所を見つけるのに役立ちます。

[![CSS editor, Line numbers](https://mintcdn.com/zonely-a8cd49e7/chEWsMezXc9HlpJ7/images/panel/page-builder-guide-20261025/22-ek-css-ja.png?fit=max\&auto=format\&n=chEWsMezXc9HlpJ7\&q=85\&s=5239f88fec943c92f6a749d32e4e4082)](https://docs.zonely.gen.tr/images/panel/page-builder-guide-20261025/22-ek-css-ja.png)

> [card] 1. CSSエディタ
>
> スタイルルールをType で設定します。例えば、カードコーナーがロールされます。

> [card] 2. ライン番号
>
> Helpsは、長いルールで変更する行に従う。

## スタイルルールを追加する

まず、変更したい項目のクラスを選択します。次のルールは、デフォルトのテーマのヘルプライティングカードのコーナーをローリングします。

```css theme={"theme":"css-variables"}
.zn-help-article-card {
  border-radius: 18px;
}
```

選択的は、規則で適用される項目を指定します。装飾された括弧の領域はスタイルを変更します。異なるテーマで作業している場合は、関連する項目のクラスを使用してください。

## ドメインを識別する

`.card` 一般的なセレクターと同様に、同じクラスの多くのカードに影響を与えることができます。 特定の部分だけを変更するには、そのセクションで選択的にクラスまたはコンテナを追加します。

一般的な色、幅、フォントの前に [彩色彩色](https://docs.zonely.gen.tr/ja/guides/page-builder/colors.md)、[決済](https://docs.zonely.gen.tr/ja/guides/page-builder/layout.md) と [フォント](https://docs.zonely.gen.tr/ja/guides/page-builder/fonts.md) フィールドを使用します。追加の CSS では、これらの設定を書き換えると、次の規則の2箇所をチェックする必要があります。

## プレビューと保存

ルールを書いた後、影響を受けるページをプレビューで開きます。例えば、ヘルプ記事のヘルプカードの規則を確認してください。メインページでは利用できなくなることがあります。

ウィンドウを閉じる **保存する すべて** ボタンを押します。 同じページを表示し、開いた/デスクトップ ビューとユーザ側にある電話表示。

結果が現れない場合は、選択的なマッチが正しい項目と一致するかどうか、装飾された括弧が閉じられ、特徴線は点点群で区切られます。 最後の追加規則を削除および比較することによって、その変更が外観に影響を及ぼすかどうかを調べることができます。


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.