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

登録フォームの説明文を、読みやすく整理してみましょう。
オレンジフォームのヘッダ&フッダ編集から、かんたんな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>ご注意123</li>
<li>ご注意12345</li>
<li>ご注意1234567890</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. 「フォーム表示」(②)をクリックして、登録フォームを表示し確認します。

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

[変更後]

 

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

borderbackgroundを使用します

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タグを使って表示する方法をご説明しました。
サービスやメルマガを覚えてもらいやすくなりますね。


お問い合わせは、お問い合わせフォームよりお願いいたします。

記事はいかがだったでしょうか?
ご意見・ご感想をお聞かせください




Powered by このフォームは『オレンジフォーム』で作成しています