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

# 要素をデザインする

> Widget Studio の Content セクションで、要素の選択、配置、スタイル設定、状態の設定を行います。

要素をデザインすると、要素の見た目と画面上の配置を設定できます。見た目と配置の変更は、Widget Studio の **Content** セクションで行います。このセクションの **Elements** リストには、各要素が表示されます。

![Screen Default と Elements リスト（Wrapper、Button、Image、Text、Heading）を表示した Widget Studio の Content タブ](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/edit-your-widgets-step-1-2x.png)

## 要素を選択して配置する

### 要素を選択する

要素をクリックして選択するか、左側の階層パネルで要素の名前をクリックします。

### 要素を追加、複製、編集、または削除する

左側のパネルで要素にカーソルを合わせると、補助的な操作が表示されます。**+** アイコンをクリックすると、選択した要素の下に要素を追加できます。**three-dots** メニューをクリックすると、要素の編集、名前変更、複製、非表示、削除ができます。

![Wrapper の下にある Elements リストで Image 要素を選択した Content タブ](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/edit-your-widgets-step-2-2x.png)

> [!NOTE]
>
> 要素にイベントが関連付けられている場合、その要素は削除できません。先にイベントを削除する必要があります。

#### 要素を複製する

同じ画面内で要素を複製することも、ある画面から別の画面へ要素を複製することもできます。

### 要素のサイズを変更する

プレビューウィンドウ（右側）で要素のサイズを変更できます。要素の端にカーソルを合わせ、クリックしてドラッグすると、寸法を編集できます。

左側のパネルでも、寸法を変更できます。

#### Auto-resize text and heading

![Auto-resize block to fit text にチェックが入った Heading 要素のパネル（General タブ）](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/edit-your-widgets-step-7-2x.png)

このオプションを有効にすると、要素のサイズがテキストの内容に合わせて自動的に拡大または縮小されます。

#### Smart guides

Smart guidesを使うと、ウィジェットの編集中に、要素を縦方向と横方向の両方で揃えて配置できます。

#### Constrain proportions

要素のサイズを変更したら、その寸法をロックできます。

要素の縦横比を固定するには:

1. 左側のパネルで要素を選択します。
2. 要素にカーソルを合わせ、**padlock** をクリックします。

### 要素を移動する

プレビューで要素をドラッグ&ドロップして移動します。

### 要素を回転させる

要素を回転させるには、要素を選択し、左側のパネルの回転パラメーターに目的の回転角度を入力します。

## 要素のコンテンツを編集する

要素をクリックして、その設定にアクセスします。

AI を使用して、テキストを編集または生成できます。

![テキスト要素のパネル（General タブ）。テキストエディターには「Get 20% off your first order when you join our list today」と表示されている](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/edit-your-widgets-step-3-2x.png)

リンクを追加するには、単語、複数の単語、またはテキストのブロック全体を選択します。

> [!NOTE]
>
> テキストに関連付けられた URL を変更するには、クリックイベントを作成し、それに **URL** アクションを関連付けます。

見出し、テキスト、リンクに絵文字を追加することもできます。

## 独自のフォントをアップロードする

ウィジェットに独自のフォントを追加できます。

1. テキストエディターで **T** アイコンをクリックし、**+ Add a font** をクリックします。

![Font size、Font family、Font weight を表示したフォント設定ポップオーバーと Apply ボタンを含む、テキスト要素のパネル](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/edit-your-widgets-step-4-2x.png)

2. フォントのインポート設定で、**Font Source:** を選択します。
   * **From your website:** フォントがウィジェットと同じウェブサイトでホストされている場合は、このオプションを選択します。
   * **Link to a font file:** フォントファイルへの直接の URL を入力します（例: `.woff`、`.woff2`、`.ttf`、`.otf`）。
   * **Embed code:** `@import` または `@font-face` を使ってフォントを読み込む CSS コードを挿入します（Google Fonts や Adobe Fonts などのサービスから取得できます）。Google Fonts を貼り付ける場合は、`@import` から `</style>` までのコードだけをコピーします。
3. **Font family** を指定します。
4. **Preview & Add** をクリックすると、テキストにそのフォントを適用した見た目をすぐに確認できます。

![Pacifico のカスタムフォントのプレビューダイアログ。Thin 100 から SemiBold 600 までのフォントウェイトを一覧表示し、Back、Cancel、Add ボタンを表示している](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/edit-your-widgets-step-5-2x.png)

プレビューテキストを調整したり、斜体表示を切り替えたりすることもできます。フォントウェイトは 1 つまたは複数選択できます。確定するには **Add** をクリックします。

保存すると、フォントが **Font family** ドロップダウンに表示されます。任意のテキスト要素にそのフォントを適用して、リアルタイムでプレビューできます。

## カスタムカラーを使用する

カラーピッカーパネルのスポイトを使うと、画面上の任意の色を取得して、要素に使用できます。

![Enable background color にチェックが入り、Hex 値 #ffffff の Custom color picker が開いているテキスト要素のパネル](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/edit-your-widgets-step-6-2x.png)

## 要素の状態を設定する

要素を選択すると、編集メニューの上部に 2 つのタブが表示されます。**General** と **States** です。

**States** タブを選択すると、要素の状態（Hover、Active、Disabled）を編集するための追加のプロパティが表示されます。

![Choose state が default に設定され、編集する状態を選択するよう促すメッセージが表示された、テキスト要素のパネル（States タブ）](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/edit-your-widgets-step-8-2x.png)

たとえば、見出し要素の hover 時の見た目を、状態に応じてパーソナライズできます。

![Choose state が hover に設定され、Font、Background Color、Background Image、Border の各セクションを表示した、テキスト要素のパネル（States タブ）](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/edit-your-widgets-step-9-2x.png)

**General** タブをクリックすると、ウィジェットのプレビューが要素のデフォルトの状態に切り替わります。要素のデフォルトの状態は **General** タブで選択できます。

## テキスト要素の HTML を編集する

HTML コードエディターを使うと、テキスト要素のマークアップ（例: メッセージの一部を囲む strong タグ）を変更できます。

テキスト要素の HTML を編集するには:

1. テキスト要素を選択します。
2. **Text content** ツールバーで三点メニューをクリックし、**Code** をクリックします。
3. コードエディターで HTML を編集します。

![Text 要素の設定パネル（General タブ）。テキストの内容が HTML コードで表示され、20% off の周りに strong タグがあります](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/edit-your-widgets-step-14-code-2x.png)