Skip to main content
この記事では、次の方法を学びます。
  • HTML要素を追加する
  • HTMLコードを編集する
  • HTML要素を配置する

​
Add an HTML element

  1. 左サイドバーの Add element をクリックします。
    • Design メニューを選択している場合は + アイコンをクリックします。
  2. Media > HTML をクリックします。
Typography と Media のグループを表示する Add element パネル。Html 要素が強調表示されている

​
HTMLコードを編集する

Add element のツールチップが + アイコン上に表示された Widget Studio。Content タブと、Popup および Background 要素を含む Screen1 が表示されている
  1. HTML Content セクションにHTMLコードを追加します。
  2. コードエディタの右上隅にある拡大アイコンをクリックして、エディタを全画面で開きます。
Custom CSS ファイルが開いた Widget Studio の Custom code ビュー。CSS のコメント例と、Custom JS、Html、Recommendations の項目が表示されている
Custom Code セクションにカスタムCSSまたはJSを追加している場合は、このコードをHTMLコードに追加できます。 たとえば、Custom Code セクションに次のカスタムCSSコードを追加できます。
次に、このクラスをHTMLコードの要素に適用します（ここでは <h1> タグ）。 <h1 class="demo">My title</h1> 右側のプレビューエリアに変更が反映されます。

​
Position your HTML element

HTMLコードはデフォルトではウィジェット内に配置されていません。ただし、マージンやパディングなどのCSSプロパティを使用して、好きな場所に配置できます。 Enable wrapper container をチェックすると、他の要素と同様に右のプレビューエリアでHTMLブロックを配置できます。
Html1 要素の設定。Html Content のコードエディターが開いており、タイトル、画像、Button を含むプロモボックスのキャンバスプレビューが並んでいる