HTMLコードを使用した埋め込み
埋め込みコードとは？
埋め込みコード（embedコード）とは、YouTubeやGoogleフォームなど外部サービスのコンテンツを、自分のホームページ内に表示させるためのHTMLコードのことです。
たとえば、YouTube動画の埋め込みコードを貼り付けると、サイト内に動画が直接表示され、訪問者がその場で再生できます。
HTMLカスタムブロックでの使用方法
YouTubeやVimeo、外部で設定した埋め込みコードを使用して、投稿内表示させたい！
そんなときは《カスタムHTML》というブロックを使って、コードをコピペするだけでOK◎
１.投稿編集画面で＋をクリックし。ブロック検索で「HTML」と入力。
すると、《カスタムHTML》というブロックがあるのでそれをクリックし、ページ内に挿入。
表示されたHTMLブロック内に、表示させたい「埋め込みコード」をペースト
コードが貼り付けられたら、右上の「保存（更新）」をクリック
ページを確認すると、動画やフォームなどが以下のように、そのままページ内で表示されます！
こちらを使用すれば動画だけではなく、マップや購入ボタン、外部で作成した問い合わせフォームなど、表示することができます。
埋め込みコードはどこから取得するの？
YouTube動画や外部フォーム、Googleマップ、音楽プレイヤーなどをページ内に表示したいときは、各サービスが提供している「埋め込みコード（embedコード）」を使います。
この埋め込みコードを、サイト内の《カスタムHTML》ブロックに貼り付けることで、動画の再生・フォームの入力・マップの表示などを、外部リンクなしでページ内に実装できます。
今回は例として「YouTube動画」を使い、埋め込みコードの取得方法と貼り付け方をご紹介します。
- 動画ページを開く
表示したい動画のページを開きます（限定公開でもOK） - 「共有」ボタンをクリック
動画の下にある「共有」ボタン（🔗）をクリックします
- 「埋め込む（< >）」を選択
共有方法の一覧から《埋め込む》アイコンをクリックします。
- 表示されたコードをコピー
<iframe>タグで表示されたコードをそのままコピーします
このようにして取得した埋め込みコードは、Googleフォームや地図、音楽プレイヤーなど他のサービスでも、基本的な操作は同じです。
それぞれのサービスで「共有」や「埋め込み」メニューを探すことで、同様にコードを取得できます。
コメント