> 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/nwffd7a8at5c.md).

# ビジュアルエディターで要素を追加する方法

### 概要 <a href="#id-1" id="id-1"></a>

ビジュアルエディターで\[LIBRARY] > \[VWO Gallery] > \[Basic elements]オプションを使用すると、簡単に要素を追加できます。<br>

<figure><img src="/files/mjEKoD6fE6VtEvfg2piV" alt=""><figcaption></figcaption></figure>

これらのUI要素は大きく3つのカテゴリに分類されます：

* **Basic（基本要素）：**&#x30DA;ージにリストアイテム、箇条書きリスト、コンテンツブロック、ボタン、番号付きリスト、および画像を追加できます。
* **Typography（タイポグラフィ）：**&#x30DA;ージに段落、見出し、引用、およびリンクを追加できます。
* **Form（フォーム）：**&#x30DA;ージにラベル、入力フィールド、テキストエリア、およびフォームボタンを追加できます。

### ページに画像を追加する <a href="#id-2" id="id-2"></a>

**手順**

1. \[Basic elements]から\[Image]をクリック

<figure><img src="/files/brsJXvTA6uI6CVP9MGfK" alt=""><figcaption></figcaption></figure>

2. ページ上にマウスを移動して、要素の位置を選択します。<br>

<figure><img src="/files/D2IRVS9mBAy4LQPRFS5L" alt=""><figcaption></figcaption></figure>

3. 位置を選択すると、画像が挿入され\[画像変更]メニューが表示されますので、画像アップロードや保存されている画像から選択してください。<br>

   <figure><img src="/files/UQCX79fv2VOyxTlzlWnk" alt=""><figcaption></figcaption></figure>

4. 追加した画像を再度クリックすると、編集メニューが開きますので、配置を移動したりサイズ変更したりすることができます。<br>

   <figure><img src="/files/3FM6n8AoWpaqag7Iip50" alt=""><figcaption></figcaption></figure>

   設定を適用したら、「完了」をクリックして 変更を保存します。

   <figure><img src="/files/xOWSwuqGu5YQYR8rjHEk" alt=""><figcaption></figcaption></figure>

### ページに動画を追加する <a href="#id-3" id="id-3"></a>

**手順**

1. \[Basic elements]から\[Video]をクリック

<figure><img src="/files/zbEZGIP1sSlU7U4d0cQq" alt=""><figcaption></figcaption></figure>

2. 配置すると、 \[Add Video]ダイアログで利用可能な設定を使用して要素のプロパティと属性を変更できます 。

<figure><img src="/files/IpWqCJ1kZfPTYvhmLvgZ" alt=""><figcaption></figcaption></figure>

**ビデオソース**

* **URL** - ビデオソースを変更するために使用します。
* **さまざまな互換性のある形式のURL** - さまざまな形式のビデオ ソースを指定します。ブラウザに対応したものが自動で表示されます。これはブラウザの互換性に問題がある場合に便利です。

**環境設定**&#x20;

* **ページの読み込み時に自動再生**- ページの読み込み時に動画が自動的に再生されるようにするには、これを有効にします。&#x20;
* **コントロールを削除**- 動画からすべてのコントロールを非表示にしたい場合は、これを有効にします。
* **無限ループ**- 動画を継続的に再生したい場合は、これを有効にします。
* **音声をミュート**- ページの読み込み時に音声なしで動画を再生する場合は、これを有効にします。

**ポスター**

* **ポスターを表示しない**- 動画の読み込み中に最初のフレームを表示する場合は、これを選択します。
* **画像ソースURLを使用**- 読み込み中に特定のURLからの画像をポスターとして表示する場合は、これを選択します。
* **アップロードまたはアップロードされた画像から選択**- ビデオの読み込み中に、すでにアップロードされた画像を表示するか、新しい画像をポスターとしてアップロードする場合は、これを選択します。

{% hint style="danger" %}
ポスター画像はビデオと同じアスペクト比である必要があります。
{% endhint %}

3. 設定を適用したら、「完了」をクリックして 変更を保存します。

{% hint style="danger" %}
Video要素は、YouTube および Vimeo URL の埋め込みをサポートしていません。これらの URLは、 \[VWO Gallery]>\[Widgets]セクション にある**YouTube**および**Vimeo**ウィジェットを使用して埋め込むことができます。※\[Widgets]はオプション追加、またはEnterpriseプランで利用可能です。
{% endhint %}

※本ページは[\[原文：Adding Elements on your Webpage Using VWO Editor\]](https://help.vwo.com/hc/en-us/articles/360035250274-Adding-Elements-on-your-Webpage-Using-VWO-Editor)を翻訳・加筆修正しています。