フォームの説明文を読みやすくしたい！（水平線で区切る、リスト表示、サイズ・色の調整）

2021年3月8日2021年11月6日

登録フォームの説明文を、読みやすく整理してみましょう。
オレンジフォームのヘッダ＆フッダ編集から、かんたんなHTMLで装飾できます。

説明文を水平線で区切るには？

hrタグを使用します

1. フォーム設定＞[登録ページ （ヘッダ＆フッタ編集）]をクリックして開きます。

今回はヘッダーに、説明文を追記し、見やすいように上下を水平線で区切ります。

<center>
<h1 id='default'>%%title%%</h1>
<hr>
<br>
必要事項をご記入の上、%%btnname%%ボタンをクリックしてください。<br>
<br>
<hr>
<br>
</center>


<hr>を、改行を表す<br>と説明文の上下に追記しています。

編集が完了したら、「更新」ボタンを押して保存します。

2. 「登録ページを更新しました。」（①）と表示されるのを確認します。

3. 「フォーム表示」（②）をクリックして、登録フォームを表示し確認します。

登録フォームのヘッダーにある説明文の上下に、水平線が表示されます。

説明文を箇条書きで追加するには？

ul要素, li要素を使用します

1. ヘッダーの説明文に、リストを作成します。

<center>
<h1 id='default'>%%title%%</h1>
<hr>
<br>
必要事項をご記入の上、%%btnname%%ボタンをクリックしてください。<br>
</center>
<br>
<ul style="width: 50%; margin: 0 auto; text-align: left;">
<li>ご注意１２３</li>
<li>ご注意１２３４５</li>
<li>ご注意１２３４５６７８９０</li>
</ul>
<br>
<hr>
<br>


• <ul></ul>で囲って、リスト全体を作成します。
  幅は、width を指定して、最大幅の50％くらいにしています。
  margin: 0 auto;で、リスト全体を中寄せしています。
• text-align: left;で、箇条書きになる「ご注意」のテキストを左寄せしています。right なら右寄せになります。
  テキストを左右どちらかに寄せたい場合、まずはリスト全体のソースコードを、<center>のタグの囲みから外しましょう。
• <li></li>のタグでひとつひとつのリストを囲みます。

編集が完了したら、「更新」ボタンを押して保存します。

2. 「登録ページを更新しました。」（①）と表示されるのを確認します。

3. 「フォーム表示」（②）をクリックして、登録フォームを表示し確認します。

登録フォームのヘッダーにある説明文の下に、リストでの注意書きが表示されます。

注意書きの文字サイズを変えるには？

font-sizeを使用します

1. 注意書きのテキストを、pタグで囲みます。

今回は、フォーム設定＞[登録ページ （ヘッダ＆フッタ編集）]の「フッター」に注意書きを追記し、pタグで囲みます。

<p style="font-size: 16px;">
すぐに登録完了メールが届きます。<br>
万が一、3分以内にメールが届かない場合は、<br>
メールアドレスの入力ミスが考えられますので、<br>
大変お手数ですが、再度入力をお願いします。<br>
</p>


• pタグで囲みます。
• pタグの最初のpの後に、<p style="font-size: 16px;">のように記載します。
  font-size:　文字サイズを変更できるプロパティ
  16px;　文字サイズの数値（ピクセル）を指定します。表示を確認して変更してください。
  
• 文字サイズの数値の単位は他に「em」「%」などがあります。

編集が完了したら、「更新」ボタンを押して保存します。

注意書きの文字の太さを変えるには？

font-weightを使用します

1. 注意書きのテキストの周りのpタグに、CSSのプロパティfont-weightを指定します。

<p style="font-size: 16px; font-weight: bold;">
すぐに登録完了メールが届きます。<br>
万が一、3分以内にメールが届かない場合は、<br>
メールアドレスの入力ミスが考えられますので、<br>
大変お手数ですが、再度入力をお願いします。<br>
</p>


• pタグで囲みます。
• pタグの最初のpの後に、<p style="font-size: 16px; font-weight: bold;"> のように記載します。
  font-weight:　文字の太さを変更できるプロパティ
  bold;　太めを指定します
  
• 文字の太さは他に「normal」「100、200、300、400、500、600、700、800、900」などの数値での指定ができます。フォントの種類によってはあまり変わらない場合があります。

編集が完了したら、「更新」ボタンを押して保存します。

2. 「登録ページを更新しました。」（①）と表示されるのを確認します。

3. 「フォーム表示」（②）をクリックして、登録フォームを表示し確認します。

注意書きの文字サイズ・太さが変更されます。

[変更前]

[変更後]

注意書きの文字の色を変えるには？

colorを使用します

1. 注意書きのテキストの周りのpタグに、CSSのプロパティcolorを指定します。

<p style="font-size: 16px; font-weight: bold; color: #ff0000;">
すぐに登録完了メールが届きます。<br>
万が一、3分以内にメールが届かない場合は、<br>
メールアドレスの入力ミスが考えられますので、<br>
大変お手数ですが、再度入力をお願いします。<br>
</p>


• pタグで囲みます。
• pタグの最初のpの後に、<p style="（省略）color: #ff0000;"> のように記載します。
  color:　文字色を変更できるプロパティ
  #ff0000;　6桁の16進数で赤を表すカラーコード
  
• 文字色のうち「red」「pink」「blue」など簡単な英語で指定して、ウェブページに表現できる場合があります。

編集が完了したら、「更新」ボタンを押して保存します。

2. 「登録ページを更新しました。」（①）と表示されるのを確認します。

3. 「フォーム表示」（②）をクリックして、登録フォームを表示し確認します。

注意書きの文字色が変更されます。

[変更後]

文字を枠で囲み背景色を変えるには？

border、backgroundを使用します

1. 注意書きのテキストの周りのpタグに、CSSのプロパティを下記のように指定します。

<p style="font-size: 16px; font-weight: bold; color: #ff0000; border: 3px solid #ff6600;
background: #ffcccc; padding: 1em; width: 60%;">
すぐに登録完了メールが届きます。<br>
万が一、3分以内にメールが届かない場合は、<br>
メールアドレスの入力ミスが考えられますので、<br>
大変お手数ですが、再度入力をお願いします。<br>
</p>


• border:　枠線を指定します。太さ、線の種類、色の順番で、半角スペースで区切って記載します。
  
• background:　背景色を、6桁の16進数で赤を表すカラーコードで指定します。
• padding:　枠内の、文字の上下左右の余白を指定します。1emは1文字分です。
  　　　　上下左右を個別に指定するときは、半角スペースで区切って「padding: 1em 2em 3em 2em」（上 右 下 左の順）のように指定します。
• width:　枠を最大幅のどのくらいにするかを％で指定しています。300pxのように数値でも指定できます。

編集が完了したら、「更新」ボタンを押して保存します。

2. 「登録ページを更新しました。」（①）と表示されるのを確認します。

3. 「フォーム表示」（②）をクリックして、登録フォームを表示し確認します。

注意書きの文字の枠が最大の横幅（フォーム）の約60%で表示され、枠の色と背景色が変更されます。

[変更後]

【まとめ】

公開済の画像アドレスを取得し、登録フォームのヘッダーにHTMLタグを使って表示する方法をご説明しました。
サービスやメルマガを覚えてもらいやすくなりますね。