> ## Documentation Index
> Fetch the complete documentation index at: https://help.scribe-mail.com/llms.txt
> Use this file to discover all available pages before exploring further.

# スタイリングパネル

> 右側のスタイリングパネルで、署名ブロックのスタイルを設定できます。コンテンツ・スタイル・サイズ・レイアウトの各セクションに加え、パディング、ブランドカラー、リンクの調整が行えます。

スタイリングパネルでは、メール署名の見た目を調整できます。キャンバス上のブロックを選択すると、右側のパネルにそのブロックで利用できる設定項目が表示されます。

デザインツールのような感覚です。要素をクリックし、右側でスタイルを調整します。

<Frame>
  <img src="https://mintcdn.com/scribe/xbQhr3JjkYildsKM/images/styling-panel-overview.png?fit=max&auto=format&n=xbQhr3JjkYildsKM&q=85&s=fbe79897221564aa33255c61d52f34cc" alt="右側にブロック設定セクションを表示するスタイリングパネル" width="3456" height="1930" data-path="images/styling-panel-overview.png" />
</Frame>

<Note>
  表示されるオプションは、選択中のブロックによって異なります。テキストブロックではフォントと色の設定が表示されます。[画像ブロック](/ja/editor/image-blocks)ではサイズとトリミングのオプションが表示されます。ブロックの種類ごとに専用のコントロールが用意されています。
</Note>

## 仕組み

スタイリングパネルは、ブロックの種類に応じて表示される、一貫したセクション構成になっています。

* **コンテンツ設定**:ブロックに含める内容(テキスト、Smartfieldの接続、画像ソース、リンク)
* **スタイル**:見た目(色、フォント、書式、アイコンのバリアント)
* **サイズ**:該当する場合の寸法(幅、高さ)
* **レイアウト**:署名内での配置(パディング、ギャップ、整列、方向)

すべてのブロックに4つのセクションがあるわけではありません。シンプルな[テキストブロック](/ja/editor/text-blocks)ではコンテンツとスタイルの設定のみが表示されることもあれば、[コンテナブロック](/ja/editor/containers-and-columns)ではレイアウトと配置が中心になります。

ブロックが選択されていない場合、パネルには「Add or select a block to start editing.」と表示されます。キャンバス上の要素をクリックするか、左側のパネルから新しいブロックを追加してください。

***

## 共通のコントロール

これらのコントロールは複数のブロックタイプにまたがって表示され、どこでも同じように動作します。

### パディング

すべてのブロックには、レイアウトセクションにパディングのコントロールがあります。パディングとは、ブロックの端と周囲の要素との間の余白です。

パディングは全体に一括で設定(全方向に同じ値)することも、コントロールを展開して各辺(上・右・下・左)を個別に設定することもできます。

<Frame>
  <img src="https://mintcdn.com/scribe/xbQhr3JjkYildsKM/images/styling-panel-padding-controls.png?fit=max&auto=format&n=xbQhr3JjkYildsKM&q=85&s=3edd74259c5840ea98b18cc7ea1a8161" alt="スタイリングパネルで各辺を個別に設定できるパディングコントロール" title="スタイリングパネルで各辺を個別に設定できるパディングコントロール" className="mx-auto" style={{ width:"65%" }} width="614" height="320" data-path="images/styling-panel-padding-controls.png" />
</Frame>

### カラーピッカー

カラーフィールドが表示されている箇所をクリックすると、次の機能を備えたカラーピッカーが開きます。

* 視覚的に色を選択できるカラーグラデーションセレクター
* ベースカラーを選択する色相スライダー
* 正確な色の値を入力できる Hex 入力欄
* 会社のカラーパレットにすばやくアクセスできる、下部の**ブランドカラー**

### ブランドカラー

ブランドカラーは、すべての署名テンプレートで共有されます。ブランドカラーを編集すると、使用されているすべての箇所が更新されます。ブランドのブルーを一度変更するだけで、その色を使用しているすべての署名が自動で更新されます。

新しいブランドカラーは、カラーピッカーから直接 **+** ボタンで追加できます。

<Frame>
  <img src="https://mintcdn.com/scribe/xbQhr3JjkYildsKM/images/styling-panel-brand-color-picker.png?fit=max&auto=format&n=xbQhr3JjkYildsKM&q=85&s=2f172379c312fe4e84f783c436945901" alt="スタイリングパネルのブランドカラーパレット付きカラーピッカー" title="スタイリングパネルのブランドカラーパレット付きカラーピッカー" className="mx-auto" style={{ width:"58%" }} width="926" height="1250" data-path="images/styling-panel-brand-color-picker.png" />
</Frame>

### リンク

ほとんどのブロックはリンクに対応しています。リンクの入力欄には任意の URL を指定でき、最終的な署名でブロックをクリック可能にします。ウェブサイト・予約ページ・ソーシャルプロフィールへの誘導に便利です。

<Frame>
  <img src="https://mintcdn.com/scribe/xbQhr3JjkYildsKM/images/styling-panel-link-input.png?fit=max&auto=format&n=xbQhr3JjkYildsKM&q=85&s=89e49bc6fb843fbd5ab4eadf91963cee" alt="スタイリングパネルのリンクURL入力欄" title="スタイリングパネルのリンクURL入力欄" className="mx-auto" style={{ width:"64%" }} width="694" height="586" data-path="images/styling-panel-link-input.png" />
</Frame>

## 関連記事

* [エディタの概要](/ja/editor/editor-overview)
* [ブロックの追加](/ja/editor/add-blocks)
* [キャンバス](/ja/editor/canvas)
