変更のタイプ

オプティマイズのビジュアル エディタで変更を加えると、変更リストが自動的に作成されます。エディタ パレットの [要素を編集] をクリックすると、パターンを簡単に作成できます。パターンの作成後は、複数の変更タイプの中から選択します。

変更のタイプ

オプティマイズは、ビジュアル エディタで次の変更タイプをサポートしています。

スタイルの変更

要素のサイズと位置を含むスタイル属性の変更を実装するために使用します。

スタイルの変更により、CSS ルールを使用して手順を実装することができます。

#target { color : red }

または、ターゲット要素のスタイル属性を使用します。

<p id="target" style="color : red"> </p>

ビジュアル エディタは、CSS ルール手法に適切な、最も正しい構文に戻します。

ページに新しいルールを上書きする、より具体的な CSS ルールがある場合、ビジュアル エディタは「important」プロパティを使用します。たとえば次のとおりです。

#target { color : red !important}

上記のルールがページのより具体的なルールによって上書きされる場合は、要素のスタイルのみを使用します。

CSS ルール手法は、フリッカー（CSS の読み込み前にスタイルされていないコンテンツが短時間表示される場合に生じる）を最小限に抑えます。これとは対照的に、element.style を使用してスタイル プロパティを変更するには、要素はすでにページ上に存在している必要があります。これにより、変更前にユーザーに短期間表示される機会を増やすことになります。

エディタが選んだオプションを検討し、既存のスタイルの変更を編集することで、そのオプションを変更することができます。

詳細エディタ - [スタイルの編集] ダイアログのスクリーンショット

属性の変更

リンク先や画像のソースなどの要素属性の変更を実装するために使用します。CSS セレクタ、属性や値などのプロパティを検討し、修正することができます。

詳細エディタ - [属性の編集] のスクリーンショット

テキストの変更

エディタでインライン テキスト編集を行うときに使用します。子要素にインターリーブされたテキストを要素が含む場合、エディタは変更されたテキストの一部を示します。次の例では、「Some text」など一部だけ変更することができます。編集するには、各部分をクリックするか、Tab キーを押して次の部分に移動します。

<div>
Some text 
<b> a child element </b>
Some other text
</div>

次のモードがサポートされています。

  1. 置換: 既存のテキスト部分を置き換えます。
  2. 挿入: 新しいテキスト部分をターゲット要素内の先頭に挿入します。
  3. 末尾に追記: 新しいテキスト部分をターゲット要素内の末尾に挿入します。
  4. 前に挿入: 新しいテキスト部分をターゲット要素の前に挿入します。
  5. 後に挿入: 新しいテキスト部分をターゲット要素の後に挿入します。

詳細エディタ - [テキストを編集] のスクリーンショット

テキストの変更は、HTML の変更より安全で他への影響もあまりありません。テキストのみを変更する際におすすめです。テキストの変更はドキュメント構造（および CSS セレクタや他の要素）に対して副作用がないため、ターゲット要素に登録されている可能性のあるイベント ハンドラに影響を与えません。

HTML の変更

新しい HTML に置換する場合や、新しい HTML を挿入する場合に使用します。次のモードがサポートされています。

  • 置換: 既存の HTML コンテンツを置き換えます。
  • 挿入: 新しい HTML コンテンツをターゲット要素内の先頭に挿入します。
  • 要素内末尾に追記: 新しい HTML コンテンツをターゲット要素内の末尾に挿入します。
  • 次より前: 新しい HTML コンテンツをターゲット要素の前に挿入します。
  • 後に挿入: 新しい HTML コンテンツをターゲット要素の後に挿入します。

詳細エディタ - [テキストを先頭に挿入] のスクリーンショット

HTML を変更すると、すべての非インラインのイベント ハンドラが失われます。たとえば、次のボタンは HTML の変更（たとえば、「HTML を要素内先頭に挿入」）後に動作を停止します。
<button id=”button”> My button </button>
<script>
  document.getElementById("button")
    .addEventListener("click", function() {alert(‘hello’);});
</script>

初期の HTML コンテンツがブラウザによって解析された後に HTML の変更が発生するため、初期の HTML コンテンツに含まれるどのスクリプトもすでに実行済みになります。このため、編集用に HTML コンテンツを読み込む際は、ビジュアル エディタはスクリプトタグを削除します。新しい HTML コンテンツにスクリプトを含めることはできません。パターンの一部として新しいスクリプトを実行するには、スクリプトの変更（JavaScript を実行）を使用します。既存のスクリプトを変更することはできません。

並べ替えの変更

要素をページの別の位置にドラッグして移動するには、2 つの方法があります。デフォルトの手法は「並べ替えの変更」で、これにより DOM の要素の配置を変更します。要素は、新しい親要素や兄弟要素を持つことになります。この手法では、通常、要素は新しい領域の要素のスタイルを採用します。

メニュー項目などの要素を並べ替える際に、並べ替えの変更を使用します。

並べ替えの変更は、関連するダイアログから変更することができるソースとターゲットの CSS セレクタ、また移動モードで行います。次のモードがサポートされています。

  • 先頭: ソース要素をターゲット要素の最初の子にします。
  • 要素内末尾に移動: ソース要素をターゲット要素の最後の子にします。
  • 前に移動: ソース要素をターゲット要素の前の兄弟にします。
  • 後に移動: ソース要素をターゲット要素の次の兄弟にします。

スクリプトの変更

スクリプトの変更により、オプティマイズは、CSS セレクタに一致するすべての要素上で任意の JavaScript を実行することができます。この変更方法では、オプティマイズは、要素をパラメータとして取得する関数の body として JavaScript を実行することができます。

CSS セレクタの「head」や「body」を使用し、一度だけ JavaScript を実行する（ページにはそのような要素は 1 つしかないので）こともできます。使用するセレクタは、「run at」オプションと組み合わせると、スクリプトを実行するタイミングを決定する前提条件に影響を与えます。詳しくは、後述の変更手順が適用されるタイミングをご覧ください。

CSS セレクタが複数の要素と一致する場合、提供されたスクリプトは、要素ごとに一回、複数回実行されます。各呼び出しでは、要素は関数の 1 つの引数として渡されます。

各呼び出しは、選択したオプションに基づいてできるだけ早い時期に実行されます。オプションは次のとおりです。

  • After opening tag: 一致したエレメントの開始タグだけが解析され、スクリプトが実行するためにページで使用されます。
  • After closing tag: 一致したエレメントのすべてのコンテンツと終了タグが解析されて、スクリプトが実行するためにページで使用されます。

例:

  • セレクタ「head」で「After opening tag」オプションを使用すると、スクリプトの変更はオプティマイズ スニペットが <HEAD> で初めて実行（同期ブロック化実行）される際に実行されます。
  • セレクタ「body」で「After closing tag」オプションを使用すると、スクリプトの変更は document ready（DOMContentLoaded）イベント後に実行されます。

詳細エディタ - [JavaScript を実行] のスクリーンショット

複数のターゲット要素

他の変更タイプと同様、並べ替えの変更によりソースとターゲットの CSS セレクタを変更して、複数の要素を一致させることができます。たとえば、複数のソース要素を選択することにより、メニューのすべての項目を別のメニューに移動することができます。

並べ替えの変更は、複数の要素に一致するターゲット セレクタもサポートしています。この変更方法を使って、ページのテーブルの 2 つの列や他のテーブル構造の順序を変更することができます。

  • ターゲット要素がソース要素よりも多い場合、追加のターゲット要素は無視されます。
  • ソース要素がターゲット要素よりも多い場合、追加のソース要素は最後のターゲット要素に追加されます。

自由に移動

「自由に移動」は、要素を別の位置に移動するもう 1 つの手法です。この手法を使うには、[移動の設定] で、[自由に移動] オプションを有効にします。

オプティマイズ エディタ – [自由に移動] スイッチ

この手法を使用すると、位置関連のスタイル（左、上、位置など）が変更されます。要素は DOM の同じ位置に残りますが、新しい位置に移動しているように見えます。通常、そのスタイルは影響を受けず、ページの残りの部分は変更されません。

グローバル ボタンや領域（ログイン領域など）の位置とすでに位置の決まっている要素を変更する際に、「自由に移動」を使用します。

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