ビジュアル エディタ – 使用方法

コードエディタを使用して、ページに CSS または JavaScript のグローバル コードを追加します。

ユーザー インターフェース

オプティマイズのビジュアル エディタは、アプリバーとエディタ パレットの 2 つのビジュアル コンポーネントで構成され、修正するウェブページ(エディタページ)上に表示されます。

アプリバー

ページ上部に表示されるアプリバーには、ウェブサイト エクスペリエンスの名前とステータス、パターン名、変更回数、診断ツール、ヘルプなど、ウェブサイト エクスペリエンスの識別に役立つ情報が表示されます。アプリバーの詳細については、ビジュアル エディタ – 概要をご覧ください。

上段

アプリバー(暗いグレー)の上段には、ウェブサイト エクスペリエンス名(およびステータス)、パターン名、デバイス プリセット メニュー、変更ボタン、診断ツールが含まれています。これらについては次のヘルプセンターのページでご説明しています。

上段の詳細:

下段

アプリバーの下段(薄いグレー)には、次の機能が表示されます。詳しくは下記の説明をご覧ください。

  • 要素セレクタ
  • パンくずリスト
  • コードエディタ
  • インタラクティブ モード
  • 移動の設定

 

要素セレクタと複数選択

要素セレクタ [要素セレクタのアイコン] を使用すると、ウェブページで複数の要素を選択し、そのすべてに対して同じ変更を適用して時間を節約できます。たとえば、上部のナビゲーション バーにあるすべてのボタンのフォントサイズを同じだけ拡大できます。

まず、ウェブページで要素をクリックし、アプリバーの要素セレクタボタン [要素セレクタのアイコン] をクリックすると、要素セレクタが表示されます。

ヒント: 複数の要素を編集するには、Shift キーを押しながら編集する要素を選択します。

要素セレクタ フィールドには、現在選択されている要素(例: #header>a>img)および選択された要素の合計数(例: 1)が表示されます。これは、ウェブページで要素を選択すると動的に更新されます。また、要素セレクタ フィールドに直接入力すると(例:#login)、要素をすばやく見つけて選択できます。

[要素 ID を使用] と [要素クラスを使用] のチェックボックスはデフォルトでオンになっているため、ページ内の要素をクリックすると、ビジュアル エディタが適切な要素 ID とクラスを選択します。要素の属性が静的であることがわかっている場合は、[要素 ID を使用] と [要素クラスを使用] をオンのままにします。

要素 ID や要素クラスが動的に生成される場合(例: 動的ウェブサイトやコンテンツ管理システム)は、ビジュアル エディタで検出されないようにする必要があります。セレクタを構築する際、場合に応じて次のようにチェックボックスをオフにすると、より細かい調整が可能になります。

  • [要素 ID を使用] - 要素 ID が動的である場合はオフにします。
  • [要素クラスを使用] - 要素 ID が動的である場合はオフにします。

詳しくは、以下の CSS セレクタの構築をご覧ください。

パンくずリスト

ウェブページをクリックすると、クリックされた領域で最下層の要素が選択されます。アプリバー中央のパンくずリストに、ページ構造内で選択した箇所のパスが表示されます。

パンくずリストの要素をクリックして、祖先要素(同じ領域を占有している要素や、背景の画像や色など、その領域の可視プロパティに影響を及ぼしている要素など)を選択します。パンくずリストの祖先要素にカーソルを合わせると、各要素が占める領域を確認できます。要素をクリックして選択し、エディタのパレットを使用すると、選択した要素が影響を与えるプロパティを確認できます。

詳細エディタ – CSS セレクタのスクリーンショット

上級者向けのヒント:
注: 要素の横の山かっこ(「>」)をクリックして、祖先要素のいずれかを選択します。

ビジュアル エディタで要素を選択すると、変更が適用される CSS セレクタが決まります。このセレクタの値は、ユーザーがウェブサイトを訪れる際のエクスペリエンスで使用されるため、極めて重要です。

エディタがセレクタを構築するために使用するアルゴリズムは、次のとおりです。

  • 次により、一意に識別できるまで DOM の祖先を走査します。
    • その ID 属性
    • ページのその要素によってのみ使用されるクラス
    • ドキュメントの <BODY>
  • 選択した要素まで下向きに戻り、次を行います。
    • そのタグを持つ子要素が 1 つだけある場合、タグ名を使用します。
    • ない場合、:nth-of-type セレクタを使用します。
CSS セレクタのヒント
  • ID や一意のクラスのある要素、または ID や一意のクラスのある近い祖先をターゲティングすることをおすすめします。これにより、ページ構造に小さな変更がある場合にパターンの管理が容易になります。
  • クラスを一意の識別子として使用している場合、代表ページ(たとえば、商品が 1 つだけある商品結果ページではなく)をエディタページとして使用してください。
  • いつでも、変更の CSS セレクタを変更したり、独自のセレクタに入力したりすることができます。エディタは、新たに一致した要素をハイライト表示します。
  • ID や固有のクラスを使用するオプションを無効にして、セレクタの階層をトリミングすることができます。こうすることで、異なる属性が CMS やデータベースの識別子を使用する場合に役立ちます。

コードエディタ

ビジュアル エディタに変更を加えるほかにも、オプティマイズのコードエディタを使用して、CSS と JavaScript のグローバル コードをウェブページに直接追加することもできます。

CSS または JavaScript のグローバル コードをページに追加するには、アプリバーのコードエディタ ボタン 埋め込み をクリックします。

アプリバーの [コードエディタ] ボタン。

CSS コードを追加する

CSS コードをページに直接追加するには:

[CSS] をクリックします。

コードエディタ メニューで [CSS] が選択されています

CSS コードエディタが開きます。

CSS コードエディタのスクリーンショット

テキスト フィールドに CSS コードを入力するか貼り付けて、[保存] をクリックします。

注: テキスト、HTML などの非 CSS スタイルの変更(要素スタイルなど)は表示されず、CSS の編集の影響を受けません。

HTML に変換

パターンの CSS を編集する必要がある場合(例: ブラウザのベンダー接頭辞、CSS コメント、キーフレーム アニメーション、CSS ハックなどのサポートされていないスタイルを追加)は、[HTML に変換] を使用してください。オプティマイズでは、パターンの CSS を編集して検証不要で使用できます。

オプティマイズの CSS コードエディタを使用すると、UI で生成された CSS を表示してコピーし、独自のカスタム CSS を入力してオプティマイズでのスタイル変更に変換できます。オプティマイズのパーサーで認識されないカスタム CSS を入力するには、次の 2 通りの方法があります。

  1. 未解析の CSS コードを削除するには、[CSS をクリーンにする] をクリックします。
  2. [保存]、[HTML に変換] の順にクリックし、解析されていない CSS コードを保持して HTML でラップします。

CSS を HTML ダイアログに変換します。

[HTML に変換] をクリックすると、解析されていない CSS が HTML の <STYLE> タグに挿入され、ウェブサイトのコードの <HEAD> タグに追加されます。こうすることで、オプティマイズ エディタは個々のスタイルの変更時に CSS を検証および表示しないようになります。

[HTML に変換] の例

この機能を使用して、サポートされていない CSS コード(太字)を HTML に変換する例を次に示します。

ブラウザのベンダー接頭辞
div.nav > ul > li:nth-of-type(4) > a > span {
  color : rgb(247, 148, 151);
  -moz-font-smoothing: antialiased;
}
CSS コメント
div.nav > ul > li:nth-of-type(2) > a > span {
  color : rgb(247, 148, 151); /* この RGB 値はピンク色です。*/
}
キーフレーム アニメーション
@keyframes slideIn {
  from {
    margin-left: 100%;
    width: 300%;
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}
CSS ハック
div.nav > ul > li:nth-of-type(2) > a > span {
  *color : rgb(247, 148, 151); /* Targeting IE <= 7 browsers. */
}

制限事項

[HTML に変換] を使用する場合、オプティマイズのビジュアル エディタで個々のスタイル変更による影響(スタイル変更の数、影響を受ける要素、対象の要素があるかどうかなど)をプレビューすることはできません。オプティマイズでは、HTML に変換された CSS のエラーの検証と表示は行われませんが、Chrome DevTools を使用するといつでもコードをデバッグできます。

条件式のサポート

CSS コードエディタは、メディアクエリのような条件式をサポートしており、レスポンシブなページのパターンを簡単に実装できます。たとえば、次の CSS コードを追加すると、500 ピクセル未満の画面のフォントサイズを 14 ピクセルに減らすことができます。

@media(max-width: 500px) {
  body {
     font-size: 14px;
  }
}

高度な CSS コードエディタ

CSS に慣れている場合は、CSS コードエディタでパターン全体を実装できます。ここに追加された CSS は個々のスタイルの変更に変換され、変更リストに表示されます。同様に、CSS コードエディタからコードをコピーし、本番環境のウェブサイトに展開すると、最も効果的だったパターンを実装できます。

JavaScript グローバル コードを追加する

動的なウェブサイトでは、オプティマイズのコンテナを読み込む際、シグナルを探してもその多くが存在しない可能性があるため、テストおよびカスタマイズを行う際に固有の課題があります。オプティマイズで変更が適用されても、動的なウェブサイトでページ要素の変更や移動が行われた場合は、再度オプティマイズで変更を適用する必要があります。

シングルページ アプリケーション(SPA)では、ユーザーが操作することで URL が変更されたり再読み込みが行われたりしないため、同様の問題が発生することがあります。ページレベルで JavaScript のグローバル コードを追加すると、コードは 1 つの要素に関連付けられるのではなく、ページ上の任意の要素に対して適用できるようになります。

上級者向けのヒント: アクティベーション イベントを使用すると、JavaScript のグローバル コードをトリガーして、何回でも変更を再適用できます。

ページに JavaScript のグローバル コードを追加する

JavaScript のグローバル コードをページに追加するには、アプリバーのコードエディタ ボタン 埋め込み をクリックします。

アプリバーの [コードエディタ] ボタン。

[グローバル JavaScript] をクリックします。

コードエディタ メニューで [グローバル JavaScript] が選択されています

グローバル JavaScript のエディタが表示されます。

グローバル JavaScript エディタのスクリーンショット

このエクスペリエンスを有効化する際に呼び出される、ページレベルの JavaScript 関数を入力するか貼り付けて、[適用] をクリックします。

グローバル JavaScript の例

// 有効化は、ユーザーが e コマースの検索結果を絞り込むたびに行われます。
// その場合、最新のオファーを表示するためのリンクが追加されます。
// ただし、結果が 3 件未満の場合に限ります。

var eCommerceContainer = document.getByElementId('ecommerce-container');

if (eCommerceContainer.childNodes.length < 3) {
var offers = document.createElement('a');
offers.href = "/offers";
offers.innerText = '最新のオファーをご覧ください'
eCommerceContainer.appendChild(offers);
}
上級者向けのヒント: アクティベーション イベントを使用すると、JavaScript のグローバル コードをトリガーして、何回でも変更を再適用できます。

インタラクティブ モード

インタラクティブ モード [インタラクティブ モードのアイコン] は、スクロール、インタラクティブ メニュー、ログインパネルなど、ユーザー操作を有効化する必要があるインタラクティブ要素を含むページから、パターンを作成する際に使用します。

キーボード ショートカット

インタラクティブ モードを有効または無効にするには、Shift+Return/Enter キーを押します。

注: 選択内容が表示されていなくても、要素はインタラクティブ モードで選択されたままになっているため、ビジュアル エディタに切り替えて新しい選択を変更できます。

アプリバーのボタン [インタラクティブ モードのアイコン] をクリックして [インタラクティブ モード] を有効にします。これにより、エディタのパレットが非表示になり、アプリバーが次のようなシンプルな黒いバーになります。インタラクティブ モードのバナー

インタラクティブ モードで、編集する要素を表示または操作し、黒いバーの [終了] をクリックすると、ビジュアル エディタに戻り必要な変更を加えることができます。

移動の設定

アプリバーの設定 [設定] をクリックすると、[自由に移動] オプションでウェブページの要素を自由に移動できます。

[自由に移動] 設定メニュー

自由に移動

[自由に移動] を使用すると、ウェブページ上の要素の位置(左、上、下など)に応じてスタイル変更が作成されます。要素は DOM の同じ位置に残りますが、ユーザーには新しい位置に移動しているように見えます。通常、そのスタイルは影響を受けず、ページの残りの部分は変更されません。

グローバル ボタン、領域、固定位置要素(ログイン領域など)の位置を変更する際に、[自由に移動] を使用します。

並べ替え用に自動選択

これをオンにすると、ビジュアル エディタ内を移動する際に、正しいソース要素とターゲット要素を簡単に選択できます。ビジュアル エディタをクリックすると、自動的に正しい要素(例: それに含まれる画像項目 <img> ではなくリスト項目 <li>)が選択され、コンテナ内にある要素(例: リスト要素 <ul>)だけを並び替えます。

ターゲット要素外で並べ替え

注: これを有効にするには、[並べ替え用に自動選択] をオフにします。

[並べ替え用に自動選択] をオンにすると、[自由に移動] が有効になります。オフにすると、DOM で要素を並び替えることができなくなり、デフォルトの移動モードは「前 / 後」から「先頭 / 末尾」に変わります。

この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。