要素を選択する
Graphic エディタは要素の選択を簡単にします。エディタ内で Web ページの一部にカーソルを合わせると、Kameleoon は各要素をハイライトします。要素をダブルクリックして選択します。
要素の詳細
選択時に、タグなど要素の詳細が表示されます。要素の詳細を見ることで、操作しているコンテンツのタイプを理解しやすくなります。ハイライト
歯車アイコン をクリックすると、Highlight in preview オプションにアクセスできます。これらのスイッチを使用すると、プレビュー内の要素を異なる色で直接ハイライトできます。- Added Elements: 新しく追加された要素を 1 つの色でハイライトします。
- Changed Elements: 変更した要素を別の色でハイライトします。
検索、ソート、フィルター
- 検索バー を使用すると、名前またはタグで要素を検索できます。たとえば、「div」と入力すると、検索結果にはすべての
<div>要素と、名前に「div」を含む要素が表示されます。 - ソートオプション は、長い要素リストを移動するのに役立ちます。
- Newest on top: 要素を作成日または最初の変更日でソートし、最近作成または変更された要素が一番上に表示されます。このソート方法は、元の作成日または最初の変更日を尊重します。将来の編集に関係なく、最も古い要素が引き続き最初に表示されます。
- Oldest on top: 要素を作成日または最初の変更日でソートし、最も古い要素が一番上に表示されます。この方法は、Newest on top と同様に、元の作成日または変更日を尊重します。
- 要素パネルでは、特定の条件に基づいてアイテムを フィルター でき、現在のタスクに関連する要素にリストを絞り込むことができます。
別の関連要素を選択する
Select another relative 機能を使用すると、Web ページ要素の階層構造をナビゲートできます。直接アクセスできない関連要素を選択する必要がある場合にこの機能を使用します。 たとえば、バナー内の見出しを選択し、バナー全体を選択したい場合は、Select another relative をクリックして、親要素に移動します。CSS セレクターを編集する
CSS セレクターを使用して、変更が影響を与える要素を指定します。既存のセレクターを絞り込んだり、AI で新しいセレクターを生成したり、カスタムコードを手動で入力したりできます。 要素をターゲットにするには、標準のセレクタータイプ(階層、タグ、クラス、コンテンツなど)を使用するか、CSS 構文に詳しくない場合は AI 生成セレクター を使用できます。 正確なターゲティングのために 手動入力 も利用可能で、要素が深くネストされていたり、他の要素と複数のクラスを共有している場合に便利です。利用可能なセレクタータイプ
次の表は、利用可能なセレクタータイプ、それらをいつ使用するか、潜在的なリスクを説明します。| セレクタータイプ | 説明 | 推奨される使用 | リスク |
|---|---|---|---|
| AI 生成/自動 | 複数の属性をフィンガープリントに結合してセレクターを自動生成します。 | 出発点として、または CSS に詳しくない場合に使用します。 | 複雑さ: セレクターが長くなり、失敗した場合にデバッグが困難になることがあります。 |
| 階層 | DOM 内の正確な位置に基づいて要素を識別します(たとえば、body > div#main > section > ul > li:first-child)。 | 要素に一意の ID やクラスがなく、位置が静的な場合に使用します。 | 脆弱性: 小さなレイアウトやコンテナの変更でセレクターが壊れやすくなります。 |
| クラス | CSS クラス名(たとえば、.btn-primary や .promo-banner)で要素をターゲットにします。 | 同じデザインの要素グループをターゲットにする場合、または一意のクラスが存在する場合に使用します。 | 過剰ターゲティング: 変更がクラスを共有する他の要素に意図せず影響を与える可能性があります。 |
| 属性 | 特定の HTML 属性(たとえば、[data-testid="submit-button"])をターゲットにします。 | 特にテストデータ属性が利用可能な場合の正確なターゲティングに使用します。 | 動的な値: 属性に変化する動的な値(セッション ID など)が含まれている場合、セレクターは壊れます。 |
| コンテンツ | 表示テキストコンテンツに基づいて要素を選択します(たとえば、:contains("Sign Up"))。 | コード構造が頻繁に変更されるが、テキストが一定に保たれる場合に使用します。 | ローカライゼーション: テキストの更新や言語翻訳によりセレクターが失敗します。 |
| タグ | HTML タグ名のみで要素をターゲットにします(たとえば、<h1>、<a>、<div>)。 | グローバルスタイリングや、他のセレクターとの組み合わせに使用します。 | 広い範囲: 単独では多くの要素をターゲットにし、ページレイアウトを壊す可能性があります。 |
| 手動 | 自分で書いたカスタム 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 パネルを開く
追加する要素を選ぶ
Text、Heading、Image、Widgets、HTML など、いくつかのオプションがあります。追加したい要素のタイプをクリックします。要素の位置を選択する
他の要素に対する新しい要素の位置を選択できます。オプションには Inside the page または Above the page があり、Relative または Absolute に設定できます。 選択した参照要素に対する正確な位置(たとえば、前、置換、後)を指定します。手動位置設定
正確な位置設定のために、手動位置オプションを有効にして、要素の上、右、左、下の値をピクセル単位で指定します。参照要素を定義する
新しい要素を正確に配置するために、参照要素の CSS セレクターを定義できます。 プレビューゾーンで参照要素をクリックするか、CSS セレクターを手動で入力します。表示設定を調整する
異なるデバイス(デスクトップ、タブレット、モバイル)の表示設定を選択します。必要に応じて、後で左パネルから要素の表示を変更できます。カラーピッカーを使用する
スポイト
スポイトツールを使用して、サイトのページ上の任意の色を選択し、別の要素に適用できます。コントラスト比
同じカラーピッカーで、選択した色と白とのコントラスト比を確認できます。サイトで使用されている色のプリセット
カラーピッカーの下部には、サイトで最も多く使用されている色があります。色をクリックして要素に適用します。高度なアクション
状態(State)
状態機能を使用すると、要素のインタラクション状態に基づいて、外観と動作をカスタマイズできます。要素の状態を編集するには:- 編集したい要素をクリックします。要素ツールバーと右側のパネルが開きます。
- 右パネルの State タブをクリックします。
- 選択した要素に割り当てたい状態を選択します:Hovered、Active、Focus、または Disabled。
デバイススタイリングルール
右側のサイドバーで、デバイスごとに異なる可能性のある要素のスタイリングルールを定義できます。
マルチデバイス機能
Kameleoon Graphic エディタのマルチデバイス機能を使用して、さまざまなデバイスでデザインがどのように表示されるかをプレビューできます。 異なるデバイスでの Web サイトの外観を確認するには、エディタの上部にある電話、タブレット、デスクトップアイコンをクリックします。
動的要素を有効にする
プロジェクト設定で 動的 Web サイトのサポート を有効にして、Graphic エディタでスコープを Selected elements に設定した場合、変更された要素の横にある 三点メニュー をクリックして Enable dynamic elements を選択することで、特定の要素を含めることができます。
非表示要素を編集する
クリックでトリガーされるメニューやカード上のホバーテキストを編集するには:- ヘッダーのアイコンをクリックしてナビゲーションモードに入ります。
- トリガー要素にカーソルを合わせるかクリックします。
- キーボードで CMD(Mac)または CTRL(PC)を押し続けます。
- 要素をクリックします。