DiviのウェブサイトにYouTubeのショートムービーを埋め込む方法
ホーム ブログ DiviのウェブサイトにYouTubeのショートムービーを埋め込む方法

DiviのウェブサイトにYouTubeのショートムービーを埋め込む方法

DiviのウェブサイトにYouTubeのショートムービーを埋め込む方法

DiviのウェブサイトにYouTubeのショートムービーを簡単に埋め込む方法をお探しですか?

YouTubeのショートムービーを表示すれば、ウェブサイト訪問者の興味を短編動画コンテンツで簡単に引きつけることができる。

しかし、YouTubeのコンテンツを手動で埋め込む場合、多くの埋め込みコードを扱う必要がある。

YouTubeのショートフィルムを簡単に埋め込む方法があります。

その前に、YouTubeのショートフィルムがDiviのウェブサイトに役立つさまざまな方法を見てみよう。

または、ここをクリックしてチュートリアルに直接飛ぶこともできる

なぜWordPress DiviサイトにYouTube Shortsを埋め込むのか?

ユーザーフレンドリーなウェブサイトビルダーであるDiviは、魅力的なウェブサイトを求める人々に人気のあるオプションです。

diviワードプレステーマ

Divi WordPressのウェブサイトをさらに魅力的なものにしたいなら、YouTubeのショートムービーを表示するのが簡単な方法です。

YouTubeのショートムービーは一口サイズのコンテンツで、すぐに見ることができるため、人々はそれをチェックする可能性が高い。

そのため、ウェブサイト訪問者にビデオを見るよう説得し、さらにサイトに留まらせることができる。

ユーチューブのショートフィルム例

それに加えて、YouTubeのショートフィルムを埋め込むことも有効だ:

  • 商品の好意的なレビューや体験談を共有し、売上を向上させましょう
  • YouTubeショートムービーを表示し、訪問者をYouTube登録者に変える
  • 迅速なビデオで製品のデモや特徴を強調し、顧客の信頼を築く
  • その他にも...

YouTubeのショートムービーを埋め込むことがあなたのビジネスにどのように役立つかがお分かりいただけたと思いますので、その最も簡単な方法を見てみましょう。

DiviのウェブサイトにYouTubeのショートムービーを埋め込む最も簡単な方法

手作業でYouTubeのショートムービーをウェブサイトに追加するのは大変です。

結局のところ、あなたは複雑なHTMLコードやYouTubeのショートパンツの埋め込みコードジェネレータを扱う必要があります。

手動で埋め込みコードをコピーする

さらに、YouTubeのショートムービーがあなたのサイトでどのように見えるかをカスタマイズするには、手作業でコードを編集するか、デザイナーを雇う必要がある。 

そのため、ブランディングにマッチしたYouTubeのショートフィルムを表示するのは難しいかもしれない。

良いニュースは?

数回クリックするだけで、YouTubeのコンテンツをウェブサイトに追加できます。

必要なのは、Divi WordPressサイトのYouTubeフィードプラグインだけだ。最高の選択肢はYouTube Feed Proです。

youtubeフィードプロプラグインスマッシュバルーン

市場で最高のYouTubeフィードプラグインであるYouTube Feed Proは、わずか数分でビデオフィードを作成、カスタマイズ、埋め込むことができます。 

さらに、Diviと完全に互換性があるので、サイトに動画を追加するのがさらに簡単になります。

YouTubeのショートフィルムに加え、YouTubeの動画、プレイリスト、チャンネルなどを埋め込むこともできる。

youtubeフィードレビューの例

プラグインのガイドフローに従うだけで、YouTubeフィードを作成し、ウェブサイトに追加する前にパーソナライズすることができます。

さらに、あらかじめレイアウトがデザインされたテンプレートをインポートできるので、訪問者を惹きつける美しいYouTubeフィードをこれまで以上に簡単に作成できます。

ビジュアルカスタマイザーもあり、HTMLやカスタムCSS、どんなコードも必要なく、簡単なクリックでYouTubeフィードを自由にパーソナライズできる。

ライブ・フィード

このプラグインのもう一つの素晴らしい点は、WordPressの専門家による献身的なサポートチームです。質問や助けが必要な場合は、いつでも彼らに連絡することができます。

その上、YouTube Feed ProはDiviのウェブサイトにYouTubeのショートムービーを追加するのに最適なプラグインです。

YouTubeのショートフィルムを埋め込む準備はできましたか?YouTube Feed Proはこちらから入手できます

それでは、Diviサイトでこのプラグインを使い、YouTubeのショートムービーを表示する方法を見てみよう。

YouTubeのショートフィルムをDiviのウェブサイトに埋め込む方法 

以下のステップバイステップのガイドに従うだけで、DiviのウェブサイトにYouTubeのショートムービーをフィードできるようになります。

始めよう!

ステップ 1: YouTube Feed Pro プラグインをインストールする

始める準備はできましたか?まず、YouTube Feed Proをあなたのウェブサイトにインストールする前に、こちらからYouTube Feed Proを入手してください。

WordPressにプラグインをインストールする方法については、初心者向けガイドをご覧ください。

プラグインがインストールされ、有効化されたら、ステップ2を開始できます。

ステップ2:YouTubeショートのフィードを作成する

このプラグインを使えば、YouTubeのショートフィルムを表示するための新しいフィードを作成することができます。

ダッシュボードエリアから、YouTubeフィード " すべてのフィードメニューに移動し、新規追加 ボタンをクリックします。

新しいフィードを追加してYoutubeプレイリストを埋め込む

その後、YouTubeフィードのタイプを選択することができます。今のところ、YouTubeのショートフィルムの場所によって、チャンネルかプレイリストを選ぶだけです。

オプションを選択したら、「Next」をクリックします。

この例では、プレイリストフィードタイプを使い、選択したプレイリストからYouTubeのショートフィルムを表示します。

ステップ3では、このフィードをYouTubeアカウントに接続します。

ステップ3:YouTubeアカウントに接続する

YouTubeアカウントに接続すると、Divi WordPressのウェブサイトにショートムービーが表示されるようになります。

そして、アカウントを接続する最も簡単な方法は、YouTube APIキーを追加することです。

まだキーをお持ちでないですか?YouTubeのAPIキーを作成する方法については、こちらのガイドをご覧ください。

YouTube APIキーの準備ができたら、ウェブサイトに戻り、Addをクリックする前にポップアップに貼り付けます

youtubeにapiキーを追加

このように、新しいフィードがYouTubeに接続される。

YouTubeのショートフィルムのソースを選択できるようになりました。まずはウェブブラウザでプレイリストを開いてみてください。

これで、自分のサイトに戻る前に、動画のURLの最後にあるコードをコピー できる。

プレイリストをコピーする

戻ったら、コピーしたコードをここの プレイリストIDフィールドにペーストしてください。

最後に、下の「次へ」ボタンをクリックして次に進みます。

ここまでで、あなたはフィードを作成し、YouTubeのショートフィルムをソースとして追加しました。

YouTubeのショートムービーは、Diviサイトのデザインを自動的にコピーして、すぐに美しく見せることができます。

ステップ4では、YouTubeのショートムービーをDiviでどのように表示するかをカスタマイズできます。

ステップ4:YouTubeショートをカスタマイズする

このプラグインは、8つの異なるデザインのテンプレートから選ぶことができます:

  • デフォルト
  • カルーセル
  • カード
  • リスト
  • ギャラリー
  • 最新ビデオ
  • ショーケース・カルーセル
  • ウィジェット

使用したいデザインのテンプレートを選択し、「次へ」をクリックします。

フィードテンプレートを選ぶ youtubeフィードプロ

そうすると、YouTube Feed Proはプラグインのビジュアルカスタマイザーにリダイレクトします。

ここから、レイアウト、カラースキーム、ヘッダースタイル、ロードモアボタンなどを編集して、簡単にYouTubeショートフィルムをパーソナライズすることができます。

ライブ・フィード・エディター

カスタマイザーの右側には、動画のリアルタイムプレビューがあります。これにより、すべての変更を簡単に追跡することができます。

カスタマイズを開始するには、左側のフィードレイアウトオプションをクリックします。

フィードレイアウトオプション

YouTubeフィードへの動画の表示方法をコントロールするために、4つのレイアウトから選択できます:

  • グリッド:一度にたくさんのYouTubeショートムービーを異なる行や列で表示する。
  • ギャラリー:特定のYouTubeショートムービーをハイライトし、他のショートムービーを小さなサムネイルで表示します。
  • リストYouTubeのショートムービーがはっきりと見えるように、動画コンテンツを一列に表示します。
  • カルーセル:YouTubeカルーセルスライダーでウェブサイトをよりインタラクティブに
Youtubeショートフィードレイアウトを選択

フィードのレイアウトに満足したら、「保存」をクリックして変更を保持します。

その後、カスタマイズ ボタンをクリックして、YouTubeビデオのパーソナライズを続けます。

Youtubeフィードをカスタマイズする

レイアウトをカスタマイズした後、ビジュアルカスタマイザーから色を選択できます。

そのためには、ここで配色 オプションをクリックします。

配色オプション ユーチューブ ショートパンツ

次に、新しいYouTubeフィードの配色を4つの中から選ぶことができる:

  • テーマから継承する: Diviテーマの色をコピーする
  • 明るい:明るい背景と暗い文字色を選択
  • Dark:暗い背景を明るいフォントで表示する。
  • カスタム:すべての色を手動で選ぶ
ショートパンツの色を選ぶ

色に満足したら、Saveをクリックするのをお忘れなく。

残りのオプションを使って、ヘッダーデザイン、フィルター、ロードモアボタン、ビデオエレメントなどを設定することができます。

最後に保存ボタンをクリックして、新しいデザインを確定します。これだけで、以下の最終ステップに進むことができます。

ステップ5:YouTubeショートムービーをDiviウェブサイトに埋め込む

YouTubeのショートムービーをカスタマイズしたら、このステップでサイトに埋め込むことができます。

ビジュアルカスタマイザーから、 埋め込みボタンをクリックして開始します。

ワードプレスにYoutubeのショートフィルムを埋め込む

YouTubeショートムービーの埋め込みオプションが表示されます。ページに埋め込むことも、ウィジェットとして追加することも、ショートコードを手動でコピーすることもできます。

今度は、「コピー」をクリックして続けることができる。

youtubeフィードのショートコードをコピーする

そうしたら、WordPressのダッシュボードに移動し、ページ " 新規追加 メニューに移動します。

WordPressのエディタでページを開いたら、上部にある「Use The Divi Builder 」ボタンをクリックして次に進む。

diviに新しいページを追加する

YouTubeのショートフィルムにWordPressの投稿を使いたい?

そのためには、ダッシュボードから投稿 " 新規追加 メニューを開き、WordPressエディターで投稿を開きます。

先ほどと同様に、「Use The Divi Builder」ボタンをクリックします。

diviに新しい投稿を追加する

Diviのページや投稿のデザインを始めるには、3つの方法があります:

  • ビルド開始空白のテンプレートから始める
  • レイアウトを見る: 構築済みのデザインを編集する
  • ページを選択します:既存のページをコピーする

お好きなオプションを選択してください。

diviビルダーオプションを選択する

Start Buildingオプションでは、すぐに編集を開始できる空白のページが表示されます。

Diviエディタで構築開始

レイアウトを参照オプションを選択しましたか?Diviエディタでは、さまざまなレイアウトを選択できます。

続行するには、お好みのレイアウトをクリックしてください。

ライブラリdiviからレイアウトパックを読み込む

すると、このレイアウトの詳細が表示されます。

Diviのページや投稿にこのレイアウトをインポートするには、「このレイアウトを使用」ボタンをクリックします。

Divi用インポート・レイアウト

Choose Page オプションを使用した場合、Diviは以前にデザインしたレイアウトのリストを表示します。

そこから、再利用したいレイアウトをクリックします。

ライブラリからDiviテーマを読み込む

Diviエディターで、まず緑色のプラスアイコン(+)をクリックして新しい行を追加する。

次に、追加したい行のタイプを選択します。

divi ウェブサイトに行を挿入する

これで行が追加されたので、YouTubeの短編フィードを挿入することができます。

そのためには、プラス(+)アイコンをクリックし、「code」 モジュールを検索する。

最後に、下の検索結果からCode モジュールをクリックする。

diviテーマ用コードモジュール

すると、左側のパネルにコード・モジュールのオプションが表示されます。

左側のコードフィールドを探し、ショートコードを貼り付ける

ウェブサイトにYoutubeフィードを埋め込む

新しいモジュールを確認するには、下部にある緑色のチェックアイコンを クリックします。

このように、YouTubeのショートムービーをDiviのウェブサイトに埋め込むことができます。このウェブページや投稿を開くだけで、YouTubeの動画がどのように見えるかをプレビューできます。

divi youtubeショートフィルム出力例

これで完成だ!

このように、適切なツールがあれば、YouTubeのショートフィルムをDiviのウェブサイトに埋め込むのはとても簡単だ。

YouTube Feed Proを使えば、WordPressにYouTubeのショートムービーを埋め込むことができます。

YouTubeのショートフィルムをDiviに埋め込みたいですか?今すぐYouTube Feed Proを入手しましょう!

YouTubeアカウントを収益化する簡単な方法をお探しですか?YouTubeでお金を稼ぐ方法をご紹介します。

ソーシャルメディア・マーケティングのヒントやコツをもっと知りたい方は、ツイッターや フェイスブックでのフォローをお忘れなく。

著者アバター
サジャン・シャルマ シニアライター
WordPress、ソーシャルメディアマーケティング、オンラインビジネスについて10年以上執筆。専門分野はインフルエンサーマーケティング、コンテンツキュレーション、デジタルマーケティング戦略など多岐にわたる。

コメントを追加する

コメントをお寄せいただきありがとうございます。すべてのコメントはプライバシーポリシーに従って管理され、すべてのリンクはnofollowであることにご留意ください。名前欄にはキーワードを使用しないでください。個人的で有意義な会話をしましょう。