株式会社火燵(こたつ)は、成果や売上にこだわる方のための動画マーケティング会社です。動画コンサルティング・動画制作・WEBマーケティング・動画制作内製化支援ならお任せください。

WordPressでYouTube動画などを埋め込む方法【初心者向け/WordPressの使い方】

その他

みなさまこんにちは。弊社でもウェブサイト制作によく使用しているCMS、WordPressの使い方を何回かに分けてお伝えしております。

今回は、YouTubeやTwitterなどのSNSや外部サービスを埋め込む方法をお伝えいたします。

YouTube動画を埋め込む

YouTubeブロックアイコン

YouTube動画の掲載方法を説明いたします。

YouTubeブロックの挿入方法(アニメーション)
  1. 空白ブロックのプラスボタンをクリックします。
  2. YouTube」を検索してクリックします。
  3. URLの入力エリアが表示されました。
  4. 埋め込みたい動画のURLをコピーペーストし、「埋め込み」をクリックします。
    うまく行かない時は「再試行」をクリックしたり、URLをコピーペーストし直しましょう。
  5. 挿入されました。
画面右上のプラスボタンからYouTubeブロックを挿入(アニメーション)
画面左上のプラスボタンからでも可能です。
YouTubeブロックの設定
  • 右メニューバー「メディア設定」の「より小さな端末用にリサイズ」は、特別な理由がない限り、チェックは入れたままで構いません。
  • 画像と同じく、動画の下に説明文を記述できます。
  • ペンのマーク(動画URLを編集)をクリックすれば、掲載動画のURLを書き換えられます。
  • 左、右寄せの配置変更もできます。動画の場合は小さくなると見づらくなるため、基本的に中央寄せで良いでしょう。

実は、URLを貼るだけでも動画は埋め込めます。

YouTube動画をURLのコピーペーストだけで挿入する(アニメーション)
  1. YouTube動画のURLをコピーします。
  2. 空白の新しいブロックにペーストします。
  3. 動画が挿入されました。

これでうまくいかない場合は、YouTubeブロックを作る方法でよいです。

埋め込みブロックで外部サービスを埋め込む

埋め込みブロックアイコン

WordPressでは、URLをペーストするだけで、YouTube動画やブログカードを貼り付けられます。

ここでは「ブログカード」の挿入についてご紹介します。

「ブログカード」で記事のリンクを挿入すれば、テキストにリンクを貼った状態よりも、タイトルやサムネイルなどが表示されて目立つため、おすすめです。

埋め込みブロックでブログカードを挿入する方法(アニメーション)
  1. 記事のURLをコピーしておきます。
  2. ブロックを追加、「埋め込み」にします。
  3. コピーしておいたURLをペーストし「埋め込み」をクリックします。
  4. 掲載できました。
画面右上のプラスボタンから埋め込みブロックを挿入(アニメーション)
画面左上のプラスボタンからでも可能です。

挿入されるブログカードには、記事のタイトルやサムネイル、概要などが表示されます。

ブログカードの表示内容と元の記事の比較
ブログカードの表示と元記事の情報
埋め込みブロックの編集
  • 画像や動画と同じく、説明文をブログカードの下に記述できます。
  • ペンのマークをクリックすれば、掲載URLを書き換えられます。
  • 左、右寄せの配置変更もできます。

実はこの「埋め込み」ブロックは、先程紹介したYouTube動画の掲載でも使えます。

埋め込みブロックでYouTube動画を埋め込む(アニメーション)
「埋め込み」ブロックでYouTube動画を埋め込む様子

埋め込めるものを確認する

埋め込みできるものは限られています。
何を埋め込めるかは、ブロック挿入画面から確認できます。

埋め込み可能なブロックを確認(アニメーション)
  1. 左上の「プラス」ボタンをクリックします。
  2. メニューバーに表示されているブロック一覧で、下の方にある「埋め込み」をご覧ください。
    「埋め込み」と検索しても良いです。
埋め込み可能サービス一覧

ここにあるのが、URLなどを記入するだけで埋め込めるものです(2021年8月現在)。
馴染みのないものが多い中、TwitterやSpotify、TikTokなどもあります。

埋め込みブロックでURL入力で埋め込めない場合(アニメーション)

もし埋め込めるかすぐに判断できないときは、「埋め込み」ブロックにURLを入れてみましょう。

その他外部サービスのを埋め込みたい

カスタムHTMLブロックアイコン

会場案内や店の紹介で、Googleマップを埋め込みたいときがあるでしょう。

しかし、先程ご紹介した「埋め込み」ブロックでは、URLを入れてもエラーで挿入できません。

この場合は「カスタムHTML」ブロックで挿入しましょう。

プラスボタンから「カスタムHTML」ブロック選択
エディタ画面の「ブロックを追加」から「カスタムHTML」ブロック選択
左上のプラスボタンからメニューを開いて「カスタムHTML」ブロックを選択
画面左上プラスボタンからメニューを開き「カスタムHTML」ブロック選択

GoogleMapの埋め込み方

  1. Googleマップで埋め込みたい場所を検索します。
    Googleマップで検索する
  2. 共有」をクリックします。
    Googleマップの共有ボタン
  3. 地図を埋め込む」をクリックします。
    Googleマップの共有ウィンドウで「地図を埋め込む」をクリック
  4. 」と書かれたプルダウンメニューから、埋め込む地図のサイズを選択できます。
    「中」から地図の埋め込みサイズを選択「HTMLをコピー」でコードをコピーする
    サイズを調整したら「HTMLをコピー」しましょう
GoogleマップからHTMLをコピー(アニメーション)
GoogleマップからHTMLをコピーするまでの流れ
  1. WordPressに戻って「カスタムHTML」ブロックにペーストします。
    カスタムHTMLブロック
  2. 埋め込みできました。
    カスタムHTMLにペースト
カスタムHTMLにペースト(アニメーション)
カスタムHTMLにペースト

ブロックツールで「プレビュー」もできるので、ページのプレビューをしなくてもすぐに確認できます。

カスタムHTMLのプレビュー
カスタムHTMLをプレビューする(アニメーション)

「カスタムHTML」ブロックは、HTMLコードを自由に挿入してページに反映できるため、いろいろと使えます。

Facebookの投稿を埋め込む

例えば、Facebookの投稿を埋め込みもできます。

  1. Facebookで埋め込みたい投稿の右上にある「・・・」メニューから「埋め込み」をクリックします。
    Facebook投稿の右上にあるメニューから「埋め込み」をクリック
  2. コードをコピー」をクリックします。
    Facebook投稿のコードをコピーする
  3. 先程と同様に「カスタムHTML」ブロックに貼り付けます。
    カスタムHTMLブロック
  4. 埋め込みできました。
    カスタムHTMLにFacebook投稿のコードをペースト
Facebookの投稿をWordPressに埋め込み(アニメーション)
Facebookの投稿をWordPressに埋め込み

「カスタムHTML」ブロックの特徴

汎用性が高いブロックであり、HTMLタグが取得できるサービスであれば埋め込みできます。ただ、エディタ画面で見ると、何のコードが入っているかすぐにわからないのが欠点です。

カスタムHTMLにペースト
Googleマップのコード
カスタムHTMLにFacebook投稿のコードをペースト
Facebook投稿のコード

以上、GutenbergでYouTube動画などを埋め込む方法を解説しました。

次回は、記事を公開する方法を解説いたします。

WordPressレクチャーシリーズ一覧

「その他」の関連記事


新着記事