【HTMLエディター】ボタンを挿入・編集したい

【HTMLエディター】ボタンを挿入・編集したい

ボタンの追加

A. ボタンの挿入

下記手順でボタンを追加して下さい。
  1. 上側リボンにある追加ボタン[+]を押す。
  2. 右側メニューにある[ボタン]を挿入したい場所にドラッグする。
  3. ダブルクリックしてテキストを書き換える。
  4. [テキスト設定]や[装飾]から文字色などを変更できます。(詳細は記事下部のテキストの変更で解説しています。)

B. ボタンのリンク先設定

  1. 上部リボンにある歯車ボタンを押す。
  2. 遷移先URLを設定する。
    (タイトルは「null(空のまま)」、ターゲット属性は「New window」をオススメします。)




ボタンの編集

編集したいボタンをダブルクリックすることで、文字列を編集できます。
ボタンのサイズや色等を変更したい場合には、変更したいボタンを選択し、右上の「筆」にアイコンが合っていることを確認して右カラムから対応する箇所を編集して下さい。


  1. 属性
    1. Width：ボタン幅
    2. Height：ボタン高さ
    3. Margin：余白1(マージン)
    4. Padding：余白2(パディング)
  2. テキスト設定
    1. Font：フォントの種類
    2. Font size：フォントサイズ
    3. Weight：文字の太さ
    4. Letter spacing：字間
    5. Font color：文字色
    6. Line height：行間
    7. Text align：文字揃え(左右)
    8. Vertical align：文字揃え(上下)
  3. 装飾
    1. Background：背景色
    2. Border radius：ボタンの角丸
    3. Border：枠線関連
      1. Width：枠線太さ
      2. Style：枠線形
      3. Color：枠線色


    • Related Articles

    • 【HTMLエディター】テキストを挿入・編集したい

      テキストの追加 下記手順にテキストを追加して下さい。 上側リボンにある追加ボタン[+]を押す。 右側メニューにある[テキスト]を挿入したい場所にドラッグする。 ダブルクリックしてテキストを書き換える。 [テキスト設定]や[装飾]から文字色などを変更できます。(詳細は記事下部のテキストの変更で解説しています。) テキストの編集 編集したいテキストをダブルクリックすることで、文字列を編集できます。 ...

    • 【HTMLエディター】HTMLで作成したメールをHTMLエディターで編集したい

      方法1. HTML入稿（ソース）で入稿して切り替える 下記のようにHTML入稿を行っている場合、「入稿方法 > HTMLメールエディタ(β)」を選択して頂くことで、エディタに切り替わります。 方法2. HTMLメールエディタ(β)でインポートする はじめからHTMLメールエディタ(β)モードで開き、上部リボンの「インポート(↓)」ボタンを押下して頂くと、インポート用のモーダルウィンドウが表示されます。 ...

    • 【HTMLエディター】画像が縦伸びする

      HTMLエディターで画像を設定した際に、画像が縦に長くなってしまう(縦に伸びる・縦伸び)ような現象が発生してしまった場合の対応方法について説明していきます。 対応方法 変更したい画像をクリックし、「属性 > Height」のにある「×」を押す。 (or 数字を全て消す or 「auto」と入力する) 下図のように「Height」の部分が「auto」になっていればok。 発生している原因 スマートフォンの場合、画面幅が360~400px程度になります。 ...

    • 【HTMLエディター】画像・ボタンのサイズ・位置を変更したい

      画像・ボタンのサイズ調整 下記手順で画像・ボタンのサイズ調整を行ってください。 編集したい画像・ボタンをクリックして選択する。 右上のリボンから「筆」が選ばれていることを確認する。 [属性 > Width・Height]からサイズを変更できます。(画像の場合は選択時にドラッグで変更することも可能です。) 画像・ボタンの位置調整 下記手順で画像・ボタンの位置調整を行ってください。 編集したい画像・ボタンをクリックして選択し、出てくる四角形のうち「↑」(1つ外側の要素へ)を選択する。 Table ...

    • 【HTMLエディター】スマホで見たときにテキスト・文字が小さくなる

      HTMLエディターで作成したメールの文字が、スマホで見ると小さくなってしまう場合に解決するための方法を紹介していきます。 なぜこのような事象が発生するのか？ 画像がある場合にサイズ指定がなされていない場合に元のサイズのまま画像を表示しようとすることが原因で、相対的に文字が小さくなってしまいます。 スマホのGmailアプリやOutlookメールアプリで確認した際に、比較的発生しやすい現象です。 ...