> ## 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.

# キャンバス

> Scribe署名エディター内の署名デザイン用ビジュアルワークスペースであるキャンバス上で、ブロックを直接選択・編集・並べ替え・サイズ変更できます。

キャンバスは、署名が出来上がっていく様子を確認しながら操作できる、エディターの中心エリアです。ビジュアルデザインツールのように動作し、クリックで選択、ドラッグで並び替え、テキストはインラインで編集できます。これらの操作中も、ツリーパネルとスタイリングパネルは常に同期します。

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/canvas-editor-overview-full.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=43103cb126a92c2c6b71e934c69bc1fc" alt="署名のブロックとパネルが表示されたScribeエディターのキャンバス" width="3456" height="1928" data-path="images/canvas-editor-overview-full.png" />
</Frame>

## ブロックの選択

キャンバス上の任意のブロックをクリックして選択します。選択したブロックの周囲に青い枠線が表示され、次のように動作します。

* 対応する項目が**ツリーパネル**でハイライト表示されます
* 右側の**スタイリングパネル**が、そのブロックの設定を表示するように更新されます

この連動は双方向です。ツリーパネルでブロックをクリックすると、キャンバス上でも選択され、表示位置までスクロールされます。

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/canvas-block-selected-blue-border.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=c8cc218981ed8bf4dcfc88c135fcae8b" alt="青い枠線で選択されたキャンバス上のブロックとスタイリングパネル" width="3456" height="1928" data-path="images/canvas-block-selected-blue-border.png" />
</Frame>

<Tip>
  ネストされたブロック(列内のテキスト要素など)の場合は、まず1回クリックして親コンテナを選択し、もう一度クリックして内部の子ブロックを選択します。
</Tip>

## テキストのインライン編集

テキストブロックは、キャンバス上で直接内容を編集できます。テキストブロックをクリックして選択し、もう一度クリックするとカーソルが配置され、入力を開始できます。単語やフレーズを選択して、スタイリングパネルから書式を適用することも可能です。

テキストをインラインで編集中は、スタイリングパネルにテキストレベルのコントロールが表示されます。フォント、サイズ、色、行の高さ、書式オプション(太字、イタリック、大文字、取り消し線、下線)を調整できます。

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/canvas-text-inline-editing.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=f672931097ae87ea925ca6ebf2780fb1" alt="キャンバス上でインライン編集モードのテキストブロック" width="3456" height="1930" data-path="images/canvas-text-inline-editing.png" />
</Frame>

<Note>
  Smartfield(名前や役職など)に接続されたテキストブロックは、キャンバス上に Smartfield の値を表示します。値そのものはデータソースから取得されるため、ここでは編集できません。ただし、見た目のスタイル設定はできます。
</Note>

## 行と列の追加

キャンバス上のブロックを右クリックすると、**行を追加**と**列を追加**の2つのオプションを含むコンテキストメニューが開きます。キャンバスを離れることなく、ブロックをすばやくグループ化できます。

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/canvas-right-click-context-menu.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=a5df92eb1060a397f1cc6381858ef144" alt="「行を追加」と「列を追加」のオプションが表示された右クリックのコンテキストメニュー" width="3456" height="1928" data-path="images/canvas-right-click-context-menu.png" />
</Frame>

たとえば、2つのボタンを横に並べたい場合は、片方を選択して右クリックし、**列を追加**を選びます。選択したブロックが新しい列コンテナで囲まれ、その隣に別のブロックを配置しやすくなります。共有のコンテナ内で要素を縦に積み重ねたい場合は、代わりに**行を追加**を選択します。

ソーシャルアイコンを並べたレイアウト、ペアになった CTA ボタン、複数のブロックをまとめて整列させたいセクションなどを構築する際に、特に便利です。

## ブロックの並べ替え

キャンバス上のブロックをドラッグすると、コンテナ内で並べ替えできます。ドラッグ中は、青い破線の枠で、離したときにブロックが配置される位置が表示されます。

ツリーパネルでブロックをドラッグして並べ替えることもできます。結果は同じです。

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/canvas-block-drag-reorder.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=a510ddd4e8c403d6fa94a35d7d6eb44c" alt="青い破線のドロップインジケーターとともに並べ替えのためにドラッグされているブロック" width="3456" height="1929" data-path="images/canvas-block-drag-reorder.png" />
</Frame>

## サイズ変更

一部のブロック(画像など)では、選択時に端や角にリサイズハンドル(小さな青い四角)が表示されます。これらのハンドルをドラッグすると、キャンバス上で直接ブロックのサイズを変更できます。正確な寸法は、スタイリングパネルにリアルタイムで反映されます。

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/canvas-image-resize-handles.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=43adfd56f04195f6f0092cf1e6dcc7e0" alt="キャンバス上の画像ブロックと青いリサイズハンドル" width="3456" height="1930" data-path="images/canvas-image-resize-handles.png" />
</Frame>

## キャンバスの操作

キャンバスは無限に広がるワークスペースです。下部の[アクションバー](/ja/editor/action-bar)でズームイン・ズームアウトしたり、ハンドツールを有効にしてブロックを誤って選択せずにパン操作したりできます。

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/canvas-action-bar-zoom-controls.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=21abcbc64fe94aad3a79258f30c95881" alt="キャンバス下部のアクションバーに表示されたズームとハンドツールのコントロール" width="3448" height="1908" data-path="images/canvas-action-bar-zoom-controls.png" />
</Frame>
