`、``)。 | グローバルスタイリングや、他のセレクターとの組み合わせに使用します。 | **広い範囲:** 単独では多くの要素をターゲットにし、ページレイアウトを壊す可能性があります。 |
| **手動** | 自分で書いたカスタム CSS または JS セレクターを適用します。 | 他のタイプで処理できない複雑なロジックや特定のターゲティングが必要な場合に使用します。 | **ユーザーエラー:** CSS の知識が必要です。タイプミスやサイトの更新で実験が壊れる可能性があります。 |
## 既存要素を変更する
要素を選択すると、複数の変更ツールが使用できるようになります。
ツールには要素ツールバーと右側のパネルからアクセスできます。
### 要素ツールバー
要素ツールバーは選択した要素のすぐ上に表示され、複数の編集オプションに素早くアクセスできます。
* **Move**: 要素の位置を変更します。
* **Resize**: 要素のサイズを調整します。
* **Duplicate**: 選択した要素のコピーを作成します。
* **Delete**: ページから要素を削除します。
* **Edit content**: 要素内のテキストや画像を変更します。
### 右側のパネル
エディタの右側のパネルでは、カスタマイズのための詳細なオプションが提供されます。ここから、選択した要素に関する詳細設定にアクセスできます。
* **Content**: 要素内のテキスト、画像、その他のコンテンツを編集します。
* **Text**: テキストの配置、行の高さを調整し、テキストを大文字、全大文字、または小文字にします。
* **Background**: 要素の背景色または画像を変更します。
* **Opacity**: 要素の不透明度を変更します。
* **Border**: ボーダーを追加したり、その色、スタイル、幅を変更します。
* **Shadow**: 要素に奥行きを与える影の効果を適用します。
* **Padding and margin**: 要素の周囲や内部の余白を微調整します。
* **Device styling rules**: 要素がデバイス(デスクトップ、タブレット、モバイル)ごとにどのように表示されるかをカスタマイズします。
* **CSS and classes**: 高度なカスタマイズのためにカスタム CSS クラスやスタイルを追加します。
* **Attributes**: 要素の HTML 属性を編集します。
* **HTML content**: 必要に応じて HTML コンテンツを直接変更します。
## 新しい要素を追加する
Kameleoon の Graphic エディタでの新しい要素の追加は簡単で、デザインのニーズに合わせて広範なカスタマイズが可能です。
### Elements パネルを開く
左サイドバーで、**+ Add** をクリックして要素パネルを開きます。
### 追加する要素を選ぶ
Text、Heading、Image、Widgets、HTML など、いくつかのオプションがあります。追加したい要素のタイプをクリックします。
### 要素の位置を選択する
他の要素に対する新しい要素の位置を選択できます。オプションには **Inside the page** または **Above the page** があり、**Relative** または **Absolute** に設定できます。
選択した参照要素に対する正確な位置(たとえば、前、置換、後)を指定します。
#### 手動位置設定
正確な位置設定のために、手動位置オプションを有効にして、要素の上、右、左、下の値をピクセル単位で指定します。
### 参照要素を定義する
新しい要素を正確に配置するために、参照要素の CSS セレクターを定義できます。
プレビューゾーンで参照要素をクリックするか、CSS セレクターを手動で入力します。
### 表示設定を調整する
異なるデバイス(デスクトップ、タブレット、モバイル)の表示設定を選択します。必要に応じて、後で左パネルから要素の表示を変更できます。
### カラーピッカーを使用する
#### スポイト
スポイトツールを使用して、サイトのページ上の任意の色を選択し、別の要素に適用できます。
#### コントラスト比
同じカラーピッカーで、選択した色と白とのコントラスト比を確認できます。
#### サイトで使用されている色のプリセット
カラーピッカーの下部には、サイトで最も多く使用されている色があります。色をクリックして要素に適用します。
## 高度なアクション
### 状態(State)
状態機能を使用すると、要素のインタラクション状態に基づいて、外観と動作をカスタマイズできます。要素の状態を編集するには:
1. 編集したい要素をクリックします。要素ツールバーと右側のパネルが開きます。
2. 右パネルの **State** タブをクリックします。
3. 選択した要素に割り当てたい状態を選択します:**Hovered**、**Active**、**Focus**、または **Disabled**。
状態を選択すると、さまざまなカスタマイズオプションが表示されます。選択した状態のフォント、テキスト、行、スタイル、色、配置、行の高さ、ボーダー、シャドウ、パディング、マージンを変更できます。
たとえば、Disabled 状態を選択した場合、テキストの色を変更して要素が非アクティブであることを示すことができます。
### デバイススタイリングルール
右側のサイドバーで、デバイスごとに異なる可能性のある要素のスタイリングルールを定義できます。
デフォルトでは、1 つのデバイスで行った変更は、サイズ、回転、パディング、位置の設定を除いて、他のすべてのデバイスにミラーリングされます。**Kameleoon では、より信頼性の高い結果を得るため、A/B テストにはこの同期方法をお勧めします。**
場合によっては、**Customized per device** モードを選択できます。1 つのデバイスで行った変更は、そのデバイスにのみ適用されます。**Kameleoon では、信頼性の低い結果につながる可能性があるため、A/B テストにはデバイスごとのカスタマイズ設定をお勧めしません。**
#### マルチデバイス機能
Kameleoon Graphic エディタのマルチデバイス機能を使用して、さまざまなデバイスでデザインがどのように表示されるかをプレビューできます。
異なるデバイスでの Web サイトの外観を確認するには、エディタの上部にある電話、タブレット、デスクトップアイコンをクリックします。
デバイスを切り替えてレスポンシブ性をテストし、デバイス全体で最適な表示になるよう、デザイン要素の必要な調整を行います。
異なるスマートフォンの解像度でデザインをテストするには、デバイス選択ツールバー近くの三点メニューをクリックします。サブメニューには、さまざまなスマートフォンモデルとその画面解像度がリストされています。特定のモデルをクリックして、プレビューエリアの解像度を変更します。その後、特定のデバイスでデザインが機能することを確認するため、デザインを確認して調整できます。
#### 動的要素を有効にする
プロジェクト設定で [動的 Web サイトのサポート](../advanced-experiment-types/set-up-experiment-single-page-app#ネイティブセットアップ) を有効にして、Graphic エディタでスコープを **Selected elements** に設定した場合、変更された要素の横にある **三点メニュー** をクリックして **Enable dynamic elements** を選択することで、特定の要素を含めることができます。
## 非表示要素を編集する
クリックでトリガーされるメニューやカード上のホバーテキストを編集するには:
1. ヘッダーのアイコンをクリックしてナビゲーションモードに入ります。
2. トリガー要素にカーソルを合わせるかクリックします。
3. キーボードで CMD(Mac)または CTRL(PC)を押し続けます。
4. 要素をクリックします。
デザインモードにリダイレクトされます。
要素パネルには、検索、ソート、フィルタリングに役立つツールが用意されています。
* **検索バー** を使用すると、名前またはタグで要素を検索できます。たとえば、「div」と入力すると、検索結果にはすべての `