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

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

追加できる内容の例をいくつかご紹介します。
区切り線
コンテンツの間に線や区切りを追加できます。
次の文字列を追加します。
<style>.line {border-top: 3px solid #000000;width: 100%;margin: 0;}</style><div class="line"><br></div>
「border-top:」では、線の太さをピクセル単位で設定できます。
「solid #」では、線の色を16進数カラーコードで設定できます。

電話をかけるリンク
ユーザーがデバイスから直接電話をかけられるリンクを作成できます。
電話アプリを開くテキスト(お電話はこちら)に、発信先の電話番号を指定した「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)に「id」属性を追加します。要素の名前はidと同じ(section1)にすることをおすすめします。例:
<a id="section1">セクション1</a>
- 移動先の要素へ移動するテキスト(セクション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>
