> ## 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で要素を追加・デザイン・サイズ変更・移動・アニメーション化し、カスタムデータやフォントを挿入してパーソナライズされたウィジェット体験を構築します。
## 要素を追加する
**Add element** セクションで、要素タイプをクリックしてウィジェットに追加します。
複数の要素が利用可能です。
### Typography
* Heading
* Text
* Link
### Survey
* Button
* Short Answer
* Long Answer
* Multiple Choice
* NPS
* Scale
* Hidden input
### Media
* iFrame
* Image
* Video
* HTML
* Slider
* Countdown
* Click-to-copy
* Progress bar
* Step Progress bar
* QR Code
* Wheel of fortune
### Layout
* Block
* Close button
* Shape
* Tooltip
### Form
* Input
* Date
* Time
* Toggle
* Checkbox
* Radio button
* Select
* Text area
* Range input
* Error message
レイヤースタックは、前景または背景での要素の位置を反映しています。
## 要素を設計する
ウィジェットの要素は **Content** セクションで設計できます。
### 要素を選択する
要素をクリックして選択するか、左側の階層パネルでその名前をクリックします。
### 要素にホバーする
左パネルで要素にホバーすると、セカンダリアクションが表示されます。**+** アイコンをクリックして、選択した要素の下に要素を追加します。**三点リーダー**メニューをクリックして、要素の編集、名前変更、複製、非表示、または削除を行います。
要素にイベントが関連付けられている場合、その要素は削除できません。先にイベントを削除する必要があります。
#### 複製
同じ画面で要素を複製したり、ある画面から別の画面に要素を複製したりできます。
### 要素をクリックする
要素をクリックすると、設定にアクセスできます。
AIを使ってテキストを編集または生成できます。
リンクを追加するには、単語、単語のグループ、またはテキスト全体のブロックを選択します。
テキストに関連付けられたURLを変更するには、クリックイベントを作成し、**URL** アクションを関連付けます。
見出し、テキスト、リンクに絵文字を追加することもできます。
### 独自のフォントをアップロードする
ウィジェットに独自のフォントを追加できます。
1. テキストエディタの **T** アイコンをクリックし、**+ Add a font** をクリックします。
2. フォントインポート設定で、**Font Source:** を選択します:
* **From your website:** フォントがウィジェットと同じウェブサイトにすでにホストされている場合は、このオプションを選択します。
* **Link to a font file:** フォントファイル（たとえば `.woff`、`.woff2`、または `.tiff`）への直接URLを指定します。
* **Embed code:** `@import` または `@font-face` を使用してフォントをインポートするCSSコードを挿入します（Google FontsやAdobe Fontsなどのサービスから）。Google Fontsをペーストする場合、`@import` から `` までのコードのみをコピーしてください。
3. **Font Family** を指定します。
4. **Preview & Add** をクリックして、フォントがテキストにどのように表示されるかをすぐに確認します。
プレビューテキストを調整したり、斜体表示を切り替えたりすることもできます。1つまたは複数のフォントウェイトを選択できます。**Add** をクリックして確定します。
保存すると、フォントが **Font family** ドロップダウンに表示されます。フォントを任意のテキスト要素に適用し、リアルタイムでプレビューできます。
### カスタムカラーを使用する
カラーピッカーパネルのスポイトを使用すると、画面上の任意の色を選び、要素で使用できます。
### 動的テキストとリンクを挿入する
フォーム入力/API/カスタムデータの値に基づいて生成されたテキストやリンクパラメータを挿入できます。
### 要素のサイズを変更する
プレビューウィンドウ（右側）で要素のサイズを変更できます。要素の端にカーソルを合わせ、クリックしてドラッグすると、寸法を編集できます。
これらの寸法は左パネルでも変更できます。
#### テキストと見出しの自動サイズ調整
このオプションは、要素のサイズを自動的に調整し、テキストコンテンツに合わせて拡大または縮小します。
#### スマートガイド
スマートガイドは、ウィジェットを編集する際に要素を垂直方向および水平方向に整列・配置するのに役立ちます。
#### 比率を固定する
要素のサイズを変更したら、寸法をロックできます。
要素の比率を固定するには:
1. 左パネルで要素を選択します。
2. 要素にホバーして **鍵** をクリックします。
## 要素の状態を編集する
要素を選択すると、編集メニューの上部に **General** と **States** の2つのタブが表示されます。
**States** タブを選択すると、要素の状態（ホバー、アクティブ、無効）を編集できる追加のプロパティが表示されます。
たとえば、見出し要素のホバー時の外観を状態に応じてパーソナライズできます。
**States** タブを選択している状態で **General** タブをクリックすると、ウィジェットのプレビューはデフォルトの状態に切り替わります。**General** タブで要素のデフォルト状態を選択できます。
## 要素を移動する
プレビューで要素をドラッグ＆ドロップして移動します。
## 要素を回転する
要素を回転させたい場合は、要素を選択し、左パネルの回転パラメータに希望する回転角度を入力します。
## Image Editorで画像を編集する
Image Editorで画像を編集するには:
1. 編集したい画像に移動します。
2. **Open in Image Editor** を選択します。Image Editorが開きます。
3. 希望する編集を適用します。
このエディタでは4つのタブが利用できます。
* Frame
* Draw
* Shapes
* Filters
Image Editorの右上では、ズームインとズームアウト、変更の取り消しと再適用、編集中の画像の変更ができます。
### Frame
ここでは、画像のサイズ変更、トリミング、反転ができます。
#### サイズ変更
画像のサイズを変更するには:
1. **Resize** ツールをクリックします。
2. 希望する寸法を入力するか、スライダーを使用して画像サイズを調整します。
#### トリミング
画像の端をトリミングする必要がある場合:
1. **Crop** ツールをクリックします。
2. プリセットの寸法を選択するか、トリミングエリアを選択します。
#### 反転
**Flip** ツールを使用して、画像を水平方向または垂直方向に反転できます。
### Draw
**Draw** ツールを使用して画像に描画します。ブラシのサイズと色を選択して描画をカスタマイズします。
### Shapes
**Shapes** ツールを使用して、円、四角形、矢印などの図形を挿入します。図形のサイズ、色、位置を調整できます。
### Filters
**Filters** オプションを選択して、フィルターで画像を強化します。画像の明るさ、ノイズ、しきい値を調整できます。
## テキスト要素のHTMLを編集する
ウィジェット内の任意のテキスト要素を選択し、HTMLで編集できます。
## 要素をアニメーション化する
ウィジェットの要素にアニメーションを付けることができます。
要素を選択すると、2つのパラメータ（**Entrance animation** と **Exit animation**）を有効にできます。
アニメーション効果、長さ、遅延（オプション）を選択する必要があります。**Pre-visualize** をクリックしてアニメーションをプレビューします。
## 要素にカスタムデータを挿入する
ウィジェットでカスタムデータを使用すると、より良いパーソナライゼーションの機会を生み出せます。このオプションを使用すると、任意のテキストフィールドに動的な値を挿入できます。
テキストフィールドに動的な値を挿入するには:
1. テキスト要素を選択し、左パネルで **custom data** をクリックします。
2. データソース（すでに作成したカスタムデータ）を選択します。カスタムデータにデフォルト値を割り当てることができます。このデフォルト値は、カスタムデータの値が未定義またはnullの場合に表示されます。
3. **Validate** をクリックします。
その後、カスタムデータが本番環境でどのように表示されるかをシミュレートできます。