この記事では、HTMLタグによる文字装飾、画像や表の挿入、リンク設置などの方法について説明します。
・文字の色や大きさを変えて訴求ポイントを目立たせる
・画像を挿入して実際のイメージを掴んでもらいやすくする
・料金表のような表を挿入してわかりやすく見せる
※ 機能によって使えるタグと使えないタグがあります
文字の色を変える
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> 【実際の表示】 お申し込みにあたっては、以下の料金表をご確認ください。
※ この表はあくまでサンプルです。実際の画面では表示が異なる場合があります。
|
リンクを設置する(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> 【実際の表示】 ロカオプに興味を持って頂きありがとうございます。 お気軽にお問い合わせ下さい。お電話はこちらへ
|