月影

日々の雑感

ブログ執筆のためのHTML完全ガイド：その８【リッチコンテンツ編】記事を豊かにする - 動画やSNSの埋め込み

ブログ改良

第7章：記事を豊かにする - 動画やSNSの埋め込み

テキストと画像だけの記事も良いですが、時には「動画」で使い方を実演したり、専門家の「ツイート」を引用して信頼性を高めたりしたい場面がありますよね。

外部サイトのコンテンツを自分の記事の中に表示させることを「埋め込み（embed）」と言います。これは、あなたの記事をよりダイナミックで、説得力のあるものに変える魔法のテクニックです。今回は、YouTubeとX（旧Twitter）の埋め込み方法をマスターしましょう。

www.namuamidabu.com

YouTube動画を埋め込む (<iframe>)

記事の中に動画を埋め込むと、読者はあなたのブログを離れることなくコンテンツを楽しめ、滞在時間もぐっと長くなります。

これは、あなたのブログページにYouTubeを映し出す「窓」を設置するようなイメージです。その窓の役割を果たすのが <iframe> というHTMLタグです。

でも、ご安心ください。この <iframe> タグを自分で一から書く必要は全くありません。YouTubeが、コピー＆ペーストするだけの「埋め込みコード」を自動で生成してくれます。

埋め込みコードの取得方法 (YouTube)

  1. 埋め込みたいYouTube動画のページを開きます。
  2. 動画の下にある「共有」ボタンをクリックします。
  3. 表示された選択肢の中から「＜＞埋め込む」をクリックします。
  4. 右側にHTMLコードが表示されます。このコードを「コピー」して、あなたのブログのHTML編集画面に貼り付ければ完了です！

🎬 ▼コピーするコードの例

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

X（旧Twitter）の投稿を記事に表示する

リアルタイムの情報や、公式アカウントの発言などを記事に載せたい場合、Xの埋め込み機能が非常に役立ちます。スクリーンショットを貼るのと違い、埋め込みを使えば「いいね」や「リポスト」の数がリアルタイムで反映され、投稿が本物である証明にもなります。

こちらもYouTubeと手順はほぼ同じです。

埋め込みコードの取得方法 (X)

  1. 埋め込みたい投稿（ツイート）を表示します。
  2. 投稿の右上にある「…」（もっと見る）をクリックします。
  3. メニューの中から「＜＞ポストを埋め込む」を選択します。
  4. 表示されたコードをコピーして、ブログのHTML編集画面に貼り付ければ完了です。

🐦 ▼コピーするコードの例

<blockquote class="twitter-tweet">
  <p lang="ja" dir="ltr">ここにツイートの本文が入ります。</p>
  &mdash; ユーザー名 (@UserID) <a href="ツイートのURL">日付</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Xのコードは少し複雑に見えますが、何も変更せず、表示されたコードを丸ごとコピー＆ペーストすれば大丈夫です。

埋め込みの際の注意点 ⚠️

埋め込みは非常に便利ですが、いくつか知っておくべき注意点があります。

  1. ページの表示速度が少し遅くなる

    外部サイトから情報を読み込むため、動画やツイートを1つの記事に何十個も埋め込むと、ページの表示が遅くなる原因になります。埋め込むコンテンツは、本当に必要なものだけに厳選しましょう。

  2. 元のコンテンツが削除されると表示されなくなる

    あなたが埋め込んだ動画やツイートが、元の投稿者によって削除されたり非公開にされたりすると、あなたのブログ上ではエラー表示になってしまいます。引用元は信頼できるアカウントのものを選ぶのが安心です。

これらの点に気をつければ、埋め込み機能はあなたのブログ表現の幅を大きく広げてくれる強力な味方になります。