変更のタイプ

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

変更のタイプ

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

• スタイルの変更
• 属性の変更
• テキストの変更
• HTML の変更
• 並べ替えの変更
• スクリプトの変更

スタイルの変更

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

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

#target { color : red }

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

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

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

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

#target { color : red !important}

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

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

属性の変更

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

テキストの変更

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

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

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

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

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」オプションと組み合わせると、スクリプトを実行するタイミングを決定する前提条件に影響を与えます。詳しくは、後述の変更手順が適用されるタイミングをご覧ください。

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

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

複数のターゲット要素

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

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

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

自由に移動

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

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