新しい画像をバリエーションに追加する方法
バリエーションに新しい画像を追加するには、次の3つの方法があります。
ビジュアルエディタでコピー＆ペーストを行う
ビジュアルエディタで親要素を選択して、HTMLを編集する
コードエディタでカスタムJSコードを書く
ビジュアルエディタでコピー＆ペーストを行う
ビジュアルエディタで、ページ上にあるいずれかの画像を選び、コピー を選択します。
新しく画像を追加したい位置を選択して、ペースト をクリックします。この要素の直前 か この要素の後 を選び、画像をペーストします。
ペーストされた画像を選択して、画像変更 をクリックします。
画像変更の方法は3つあります。詳細はこちらをご参照ください。
ローカルより画像をアップロードする。
画像のURLを入力する。
すでにアップロードされた画像を使用する。
画像を選ぶ際、画像のタイトルや代替テキスト、画像サイズを指定することができます。
ビジュアルエディタで親要素を選択して、HTMLを編集する
ビジュアルエディタで、ページ上にあるいずれかの画像を選び、コピー を選択します。
新しく画像を追加したい位置を選択して、ペースト をクリックします。この要素の直前 か この要素の後を選び、画像をペーストします。
ペーストされた画像を選択して、親要素を選択する をクリックし、表示されるリストから編集する親要素を選択します。
HTMLの編集 を選択して、親要素のHTMLを編集します。
下記例では、同じABテストの画像をコピーして要素の後にペーストしました。ペーストした画像の情報を、新しい画像の情報に書き換えることで、新しい画像を追加することができます。
コードエディタでカスタムJSコードを書く
コードエディタを開いて、画像を追加する旨のJavaScriptコードを書くことも可能です。
例：images/img1.jpg を 要素の後に追加する
if (window.timerX) clearInterval(window.timerX);
window.timerX = setInterval(function() {
if (vwo_$('要素のCSSパス').length) {
vwo_$("要素のCSSパス").after("<img src='images/img1.jpg' />");
clearInterval(window.timerX);
}
}, 100);