Digital Link

HTMLでランディングページをカスタマイズする方法

HTMLを使って、デジタルリンクに区切り線やCTA(行動喚起)などを追加します

HTMLエディター を使えば、ランディングページを自由にカスタマイズできます。

ランディングページにHTMLエディターを1つ追加します。

HTML 1

その 3点メニュー をクリックし、</>アイコン をクリックしてHTML表示に切り替えます。

HTML 2

追加できる内容の例をいくつかご紹介します。

区切り線

コンテンツの間に線や区切りを追加できます。

次の文字列を追加します。

<style>.line {border-top: 3px solid #000000;width: 100%;margin: 0;}</style><div class="line"><br></div>

「border-top:」では、線の太さをピクセル単位で設定できます。

「solid #」では、線の色を16進数カラーコードで設定できます。

HTML 3

電話をかけるリンク

ユーザーがデバイスから直接電話をかけられるリンクを作成できます。

電話アプリを開くテキスト(お電話はこちら)に、発信先の電話番号を指定した「href」属性を追加します。例:

<a href="tel:+1234567890">お電話はこちら</a>

「+1234567890」を該当する電話番号に置き換えてください。「+」記号は国際電話の国番号を示します。

メールを送信するリンク

ユーザーがデバイスから特定のアドレスに直接メールを送信できるリンクを作成できます。

メールアプリを開くテキスト(メールを送る)に、宛先アドレスを指定した「href」属性を追加します。例:

<a href="mailto:abc@example.com">メールを送る</a>

abc@example.com」を該当するメールアドレスに置き換えてください。

WhatsAppにメッセージを送るリンク

ユーザーがデバイスから特定のWhatsApp番号に直接メッセージを送信できるリンクを作成できます。

WhatsAppアプリを開くテキスト(WhatsAppでお問い合わせ)に、宛先のWhatsApp番号を指定した「href」属性を追加します。必要に応じて、「?text=」の後に送信するメッセージ(これはメッセージです)を追加することもできます。例:

<a href="https://wa.me/+1234567890?text=これはメッセージです">WhatsAppでお問い合わせ</a>

「+1234567890」を該当するWhatsApp番号に置き換えてください。

特定の箇所へのリンク

ユーザーがランディングページ内の特定のセクションに直接移動できるリンクを作成できます。

  1. 移動先の要素(セクション1)に「id」属性を追加します。要素の名前はidと同じ(section1)にすることをおすすめします。例:
<a id="section1">セクション1</a>
  1. 移動先の要素へ移動するテキスト(セクション1へ移動)に、手順1で作成したid(#section1)を使った「href」属性を追加します。例:
<a href="#section1">セクション1へ移動</a>

動画を埋め込む

YouTube、Vimeoなどのオンライン動画プラットフォームの動画は、埋め込みオプション(「iframe」タグ)があればランディングページに表示できます。コピーしたら、ランディングページに移動して「iframe」タグを貼り付けます。例:

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO-URL" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Googleマップを埋め込む

Googleマップで住所を検索し、「共有」>「地図を埋め込む」をクリックして「iframe」タグをコピーすれば、複数のGoogleマップを表示できます。その後、ランディングページに移動して「iframe」タグを貼り付けます。例:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1589980.4936041927!2d-79.46503024375001!3d38.89126619999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b7b798ecb5b2c7%3A0xc7edf0c4a86f75af!2sSmithsonian%20National%20Museum%20of%20Natural%20History!5e0!3m2!1sen!2sar!4v1719328865609!5m2!1sen!2sar" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>