[再配置する]の操作方法

選択した要素を直接ドラッグして、以下のいずれかの要素の間に再配置できます。
※「A/Bテスト」と「FLPO」で使用できます。

[兄弟要素の間]:
同じ親要素の中にある「兄弟要素」の間で再配置できます。
※再配置用に、選択が上位の要素に自動で切り替わることがあります。

[ページ上のすべての要素の間]:
「ページ上のすべての要素」の間で再配置できます。

「位置・サイズを編集する」の位置の編集とは異なり、
選択した要素を再配置先のHTML構造の規則に合わせて配置できます。

ページのHTML構造によっては、再配置するとレイアウトが崩れることがあります。

1.再配置したい要素を選択する

① プレビューにテストパターンを表示した状態で、編集したい要素を選択します。

②「選択中の要素の編集」メニューの[再配置する]をクリックします。

離れた位置に要素を再配置するときは、プレビューに表示するページの表示サイズの倍率を下げると、要素を目的の位置までドラッグする距離が短くなります。

[一つ下位の要素を選択]ボタンボタンをクリックすると、最初に選択した要素を起点に「下位」の要素を自動で選択できます。[一つ上位の要素を選択]ボタンをクリックすると、最初に選択した要素を起点に「上位」の要素を自動で選択できます。

2. 再配置する要素間を選択する

再配置したい要素間のラジオボタンを[オン]にします。

[兄弟間の要素の間]は、複数の要素がまとまったコンテンツの配置を入れ替えるのに適しています。
[ページ上のすべての要素の間]は、単体の要素をページ上のあらゆる要素の間に配置するのに適しています。

3. 再配置する位置まで要素をドラッグする

選択中の要素を、目的の再配置先の要素の間まで直接ドラッグします。 再配置先の対象になる要素の「辺」の内側に「黄色のマーカー」が表示されると、その「辺」の「外側の間」に選択中の要素を再配置できます。
※[兄弟要素の間]のラジオボタンが[オン]になっているときは、再配置できる範囲にグレーの点線が表示されます。

選択中の要素をドラッグしながらマウスのスクロールホイールを操作してページをスクロールできます。

4. 選択中の要素を「仮置き」する

再配置先の対象になる要素の「辺」が「黄色の線」に変化した状態で、ドラッグ中の選択中の要素を「ドロップ」または「ドラッグしたまま一定時間静止」すると、「黄色の線」に変化した「辺」の「外側の間」に選択中の要素が「仮置き」されます。

「仮置き」の状態でも[適用する]ボタンをクリックするまでは、引き続き要素をドラッグできます。

「仮置き」した状態で背景の格子模様の領域をクリックすると「仮置き」がキャンセルされて選択中の要素は元の位置に戻ります。

5. 再配置を適用する

[適用する]ボタンをクリックします。

【「再配置する」パネルの詳細】

ボタン 説明
①[_] 「選択中の要素の編集」メニューの表示を最小化します。
最小化した状態で[💳]ボタンをクリックすると、「選択中の要素の編集」メニューを再度表示します。
②[×] 編集パネルを消して、要素の選択を解除します ※プレビュー領域をクリックすると、編集パネルを消して要素の選択を解除します。
③[兄弟要素の間] ラジオボタンを[オン]にすると、選択した要素を同じ親要素内にある「兄弟要素」の間で再配置できます。
※再配置用に、選択が上位の要素に自動で切り替わることがあります。
④[ページ上のすべての要素の間] ラジオボタンを[オン]にすると、選択した要素を「ページ上のすべての要素」の間で再配置できます。
⑤[適用する] 編集した内容を保存します。
保存が完了すると、編集パネルを消して要素の選択を解除します※内容を変更後[適用する]ボタンをクリックせずに編集パネルを消して要素の選択を解除すると、編集した内容は反映されません。
⑥[キャンセル] 要素を選択したまま「選択中の要素の編集」メニューに戻ります。

A/Bテスト・多変量テスト・FLPO -よくあるご質問