HTMLタグを活用した文字装飾・画像挿入・リンク設置」の手順を解説します。
文字の色やサイズ変更、イメージ画像の挿入、料金表の作成、電話発信リンクの設置など、標準のテキストだけでは伝えきれない情報を分かりやすくデザインし、予約完了率を高めるためのクリエイティブガイドです。
|
💡こんなことができるようになります ・文字の色や大きさを変えて訴求ポイントを目立たせる ・画像を挿入して実際のイメージを掴んでもらいやすくする ・料金表のような表を挿入してわかりやすく見せる ※ 機能によって使えるタグと使えないタグがあります
|
文字の色・大きさ・背景色を変える(spanタグ)
spanタグを使うと、文字の色や大きさを変えたり、背景色を設定したりできます。
タグの中のstyleの箇所で設定をします。
文字の色を変える
style="color: ○○" のように記述します。〇〇の部分は色名やカラーコードを記載します。
【記入例】
<span style="color: red">赤色</span>と<span style="color: blue">青色</span>を混ぜると<span style="color: #956DAF">紫色</span>になります。
【実際の表示】
赤色と青色を混ぜると紫色になります。
文字の大きさを変える
style="font-size: ○○px" のように記述します。〇〇の部分は数値を記載します。
【記入例】
<span style="font-size: 25px">25px</span>と<span style="font-size: 40px">40px</span>ではこんなに文字の大きさが違います。
【実際の表示】
25pxと40pxではこんなに文字の大きさが違います。
文字に背景色を設定する
style="background-color: ○○" のように記述します。〇〇の部分は色名やカラーコードを記載します。
【記入例】
<span style="background-color: red">赤色</span>と<span style="background-color: blue">青色</span>を混ぜると<span style="background-color: #956DAF">紫色</span>になります。
【実際の表示】
赤色と青色を混ぜると紫色になります。
文字装飾を組み合わせる
「;(セミコロン)」でつなげて文字装飾を組み合わせて使うことができます。
style="color: ○○; font-size: ○○px; background-color: ○○" のように記述します。
【記入例】
<span style="color: red; font-size: 25px; background-color: yellow">背景黄色で文字赤25px</span>と<span style="color: white; font-size: 40px; background-color: blue">背景青色で文字白40px</span>を見比べるとこんな感じです。
【実際の表示】
背景黄色で文字赤25pxと背景青色で文字白40pxを見比べるとこんな感じです。
画像を挿入する(imgタグ)
imgタグを使うと、画像を挿入することができます。
タグの中のsrcの箇所で設定をします。
<img src="○○" > のように記述します。○○には挿入したい画像のURLを記載します。
※ HP等にアップロード済みの画像が使用できます。PC上の画像は使用できません。
【記入例】
スマホからでも簡単に予約ができます。
<img src="https://storage.googleapis.com/studio-design-asset-files/projects/BRO3L281qD/s-102x160_40694172-daa2-45f8-86e5-89c34a8b829c.svg" >
また、アンケート機能でご来店頂いたお客様の生の声を集めることができます。
【実際の表示】
スマホからでも簡単に予約ができます。
また、アンケート機能でご来店頂いたお客様の生の声を集めることができます。
表を作成する(table/tr/th/tdタグ)
table, tr, th, tdタグを使うと、表を作成することができます。
tableタグで表の大枠を作成し、その中にtrタグで行を作成します。
trタグで作成した行の中にthタグで見出しを作ったり、tdタグでデータを格納します。
【記入例】
お申し込みにあたっては、以下の料金表をご確認ください。
<table>
<tr><th>対象の学年</th><th>価格 (月額・税込み)</th></tr>
<tr><td>小学校低学年コース</td><td>3,000円</td></tr>
<tr><td>小学校高学年コース</td><td>5,000円</td></tr>
<tr><td>中学生コース</td><td>7,000円</td></tr>
</table>
【実際の表示】
お申し込みにあたっては、以下の料金表をご確認ください。
| 対象の学年 | 価格 (月額・税込み) |
|---|---|
| 小学校低学年コース | 3,000円 |
| 小学校高学年コース | 5,000円 |
| 中学生コース | 7,000円 |
※ この表はあくまでサンプルです。実際の画面では表示が異なる場合があります。
リンクを設置する(aタグ)
aタグを使うと、画像を挿入することができます。
hrefの箇所でリンク先を設定し、タグとタグの間に表示させたい文字列を記載します。
【記入例】
ロカオプに興味を持って頂きありがとうございます。
詳しい情報は<a href="https://locaop.jp/about" target="_blank"/;>こちらのリンク</a>から確認ください。
【実際の表示】
ロカオプに興味を持って頂きありがとうございます。
詳しい情報はこちらのリンクから確認ください。
電話できるリンクを設置する(a href="tel:03xxxxxxxx"タグ)
a href="tel:03xxxxxxxx"タグを使うと、電話できるリンクを挿入することができます。
リンク先に設定したい電話番号を「"tel:」をつけて記載します。
【記入例】
ロカオプに興味を持って頂きありがとうございます。
お気軽にお問い合わせ下さい。<a href="tel:0312345678">お電話はこちらへ</a>
【実際の表示】
ロカオプに興味を持って頂きありがとうございます。
お気軽にお問い合わせ下さい。お電話はこちらへ