フォームの説明文を読みやすくしたい！（水平線で区切る、リスト表示、サイズ・色の調整）
登録フォームの説明文を、読みやすく整理してみましょう。
オレンジフォームのヘッダ＆フッダ編集から、かんたんな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タグを使って表示する方法をご説明しました。
サービスやメルマガを覚えてもらいやすくなりますね。
お問い合わせは、お問い合わせフォームよりお願いいたします。