> For the complete documentation index, see [llms.txt](https://docs.vwo.gaprise.jp/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.vwo.gaprise.jp/testing/editor/5y8adwmjlh.md).

# エディター使用時のベストプラクティス

### **HTMLの編集または操作の編集** <a href="#kva886ax3vmt" id="kva886ax3vmt"></a>

* ウェブページで変更したい要素に対してHTMLまたはEdit HTMLの操作を行うと、エディターは特定の要素の内容（リッチフォーマットまたは生のHTML）を表示します。修正後、その要素の最終的な新しいHTMLコンテンツは、VWOによって保存されます。VWOはページ要素に変更を加えながら、その要素の元のHTMLをVWOエディターに保存されている新しい（変更された）HTMLに置き換えます。
* 商品画像/価格/説明、カート商品数、動的な見出しなどの[動的なコンテンツ](https://help.vwo.com/hc/en-us/articles/360020735334)に対して、Edit HTMLや Editの操作のために使用しないでください。
* EditやEdit HTMLの操作は、軽微な修正を必要とする特定の要素や、ウェブページ内の1つの要素を変更する場合に使用します。全ページのedit HTML操作の使用はお勧めしません。
* ページに新しいコンテンツを追加したい場合は、要素の**コピー**操作で要素のクローンを作成し、「Edit」または「Edit HTML」操作で編集してください。
* 可能な限り、移動、サイズ変更、テキスト変更などの他の操作を使用してください。どの要素もダイナミズムを邪魔しません。
* CSSやJavaScriptで要素を変更する場合は、JavaScript/CSSの追加操作の利用をお勧めします。
* 同じ要素の集合に対して、複数のEdit HTML操作を使用することは避けてください。1回のHTML操作で、必要な変更をすべて適用することができます。

### **エディター設定** <a href="#id-5hq5i710k0o4" id="id-5hq5i710k0o4"></a>

[VWOのビジュアルエディター](https://vwo.com/why-us/technology/visual-editor/)を使用して変更を適用し、テストを[プレビュー](https://help.vwo.com/hc/en-us/articles/360021310593)してもページに反映されない場合、VWOからの変更が発せられた後に、変更が適用された要素がページに読み込みされている可能性があります。このような場合は、[SPA/SSRエディターの設定](https://help.vwo.com/hc/en-us/articles/900000678806)を適切なものに変更してください。これは、変更が適用された要素を繰り返しチェックし、ページ上に読み込まれると同時に適用するものです。

### **JavaScriptの追加する** <a href="#g292zejlkp1a" id="g292zejlkp1a"></a>

JavaScriptの追加操作でJavaScript/jQueryを追加してWebページ要素を変更した場合、本番サイトでは変更が思うように表示されないことがあります。setInterval()関数で対象要素をチェックし、利用可能になり次第、以下のコードのように変更を適用します。

| // 複数のsetIntervalsの取得を回避する。                            |
| ------------------------------------------------------ |
| if (window\.vwoElInterval) {                           |
| clearInterval(window\.vwoElInterval);                  |
| }                                                      |
| window\.vwoElInterval = setInterval(function() {       |
| if (vwo\_$(CSS\_SELECTOR\_PATH\_OF\_ELEMENT).length) { |
| // Make changes that require the element to be present |
| clearInterval(window\.vwoElInterval);                  |
| }                                                      |
| }, 100);                                               |

view raw[setInterval.js](https://gist.github.com/VWO-maker/4e36259dc0c0e0ebbe1647c05720ea67#file-setinterval-js) [GitHub](https://github.com/)によって❤でホストされています。

コードエディターのJavaScript追加セクションからsetInterval()関数を追加し、適宜修正してください。

カスタムコードを使用してウェブページに変更を加えた場合のみ適用されます。VWOビジュアルエディターを使用して変更する場合は、「[SPA/SSRエディターの設定](https://help.vwo.com/hc/en-us/articles/900000678806)」を参照してください。

![](/files/5ioiP30UiHDtemm3CSjg)

**注：**&#x30D9;ストプラクティスとして、setIntervalのブロックを追加するたびに、変数に一意の名前を指定することを確認してください。上記の例では、変数名をwindow\.vwoElIntervalとしています。これは、window\.vwoBannerImage または他の意味のある名前に変更することもできます。

### **スタイル（CSS）を追加する** <a href="#d25mk4rszgtx" id="d25mk4rszgtx"></a>

コードエディターを使って\<style>タグ内にCSSプロパティを追加する場合、以前のCSSプロパティがすべて上書きされ、バリエーションの変更が実装されるように、各プロパティで必&#x305A;**!important**を使用してください。

**例題**

.class-name {

Attribute1 = value!important;

Attribute2 = value!important;

}

### **画像変更** <a href="#auacpdooh0jm" id="auacpdooh0jm"></a>

画像の変更操作でバリエーションに新しい画像を追加する際、画像サイズがコントロールの画像より大きい場合、バリエーション画像が読み込まれる前に一瞬だけ元の画像が表示されることがあります。このような場合にちらつきが発生しないようにするには、Edit HTML操作またはコードエディターを使用し、コントロール内の画像に対して非表示操作を使用します。

HtmlまたはJavaScriptの編集コード内に、display:block !importantという値のstyle属性を追加して、この操作が実行されるたびに、その可視性がtrueになるようにします。訪問者がウェブページにアクセスすると、非表示操作によってコントロール画像が隠され、Edit Html/JavaScriptコードによって画像がレンダリングされると、新しい画像が表示されるようになります。

![](/files/Mb3QBRs6tOpwP8AzrCTg)

画像のURLを自分のサーバーに入力すれば、さらに読み込み時間や全体のちらつきを抑えることができるかもしれません。

### **移動操作** <a href="#s8bzpyn01yiv" id="s8bzpyn01yiv"></a>

* 任意の要素に対して移動操作を行うと、現在の位置から指定したピクセル数だけ相対的に移動します。
* ある要素をページ内の他のセクションに大きく移動させることを想像してみてください。これで、その部分は画面サイズに応じて別の場所に表示させることができます（最近はメディアクエリを使うのが流行っています）。その場合、移動させた要素は、あなたが望んだ場所に表示されません。
* このような場合、カスタムCSSの変更を記述するのがより良い方法でしょう。また、メディアクエリを含めることで、画面幅に応じた変更を適用することができます。
* また、Webページ上に存在する2つの要素の**位置を入れ替える**ことを目的とする場合は、\[並べ替え]操作で要素を並べ替えることができます。