【使い方】Word PressサイトにYouTube動画やTwitterツイートを埋め込む方法を紹介!!インスタグラムやGoogleマップも埋め込めるよ!!【ブログ】

2020年2月21日

Word Press 埋め込み YouTube Twitter インスタ Googleマップ

今回はWord Pressサイトで記事を書く時により見やすく情報を届けられるようにTwitterのツイートやYouTubeの動画を埋め込む方法を解説します!!

また、インスタグラムの投稿やGoogleマップも埋め込む事ができるので一緒に紹介して行きたいと思います!!

 

自分の投稿はもちろん公式サイトの宣伝などもできるので活用している方も多いです!!

良ければ参考にしてみてください!!

 

\おすすめWPテーマ/

アフィンガーの機能を見る

5,000円の有料プラグインが無料でついてる!

iFrameコードで埋め込む

Word Press 埋め込み YouTube Twitter インスタ Googleマップ

WordPressでは「iFrameコード」を取得すれば簡単に埋め込む事ができます。

このコードは簡単にいうと「埋め込み用のコード」だと理解しておけば大丈夫です!

 

他にも埋め込みの仕方はありますが、インターネット上でコンテンツを作成する際はこのiFrameを利用した方がいい理由が2つあります。

著作権の問題

自身が作成していないコンテンツをシェアする際は著作権の問題がでてきます。

原則としてiFrameを使用してのコンテンツの埋め込みは著作権侵害とはみなされません。

 

重いファイルのシェアに適している

iFrameを使用するとWord Pressメディアライブラリに保存する事なくサイトに表示する事ができます。

この為サイト自体のスピードを低下させるのを防ぐ事ができます!!

 

このようにiFrameを使用することによってメリットがあります。

デメリットはというとそもそも埋め込み自体ができないものも存在しますので、そういったものはデメリットに含まれる。

他には動画などはサイト自体のスピードには影響しないものの、貼り付けたページには読み込み負荷がかかるので重くなるという事があります。

Twitterのツイートを埋め込む

方法はとても簡単です。

基本的に「HTMLコード」を取得してコピペで貼り付けるだけです。

 

Twitterのwebページにアクセスします(アプリではなくサイトからアクセスして下さい。)

Word Press 埋め込み YouTube Twitter インスタ Googleマップ

ツイートをクリックして表示させます!!

Word Press 埋め込み YouTube Twitter インスタ Googleマップ

赤い三角マークを押します。

Word Press 埋め込み YouTube Twitter インスタ Googleマップ

ツイートを埋め込むを押します。

Word Press 埋め込み YouTube Twitter インスタ Googleマップ

この画面の青いボタンを押します。

Word Press 埋め込み YouTube Twitter インスタ Googleマップ

これが出ればOK!

Word Press 埋め込み YouTube Twitter インスタ Googleマップ

Word Pressでテキストモードで貼り付けます。

青い部分が貼り付けたコードになります。

 

これで完了になります。ビジュアルモードで確認してみましょう!

実際に貼り付けてみました!

プレビューで確認した際にしっかり表示されていれば問題ありません!!

YouTubeの動画を埋め込む

YouTube動画の埋め込み方法です!!

今回はサンプルとしてファイナルファンタジー7リメイクのオープニングトレーラーを埋め込んでみます。

 

YouTubeのwebサイトにアクセスして埋め込みコードを取得します。

Word Press 埋め込み YouTube Twitter インスタ Googleマップ

YouTubeのサイトの動画の下の共有を押します。

Word Press 埋め込み YouTube Twitter インスタ Googleマップ

次に、埋め込むを押します

Word Press 埋め込み YouTube Twitter インスタ Googleマップ

コードが出ますのでコピーします。

Word Press 埋め込み YouTube Twitter インスタ Googleマップ

埋め込む箇所にカーソルを合わせ挿入を押します。

Twitterとは違いビジュアルモードのままです。

Word Press 埋め込み YouTube Twitter インスタ Googleマップ

中の項目のメディアを押します。

Word Press 埋め込み YouTube Twitter インスタ Googleマップ

埋め込むの欄に行き先程のコードをペーストします。

Word Press 埋め込み YouTube Twitter インスタ Googleマップ

これで完了です。

実際に埋め込んでみました。

 

YouTubeの動画でもTwitterのようにテキストモードに変更して貼り付けても同じように表示されます。

どちらでも変わりはありませんので好きな方法で埋め込んで大丈夫です!!

Googleマップを埋め込む

こちらも簡単に埋め込む事ができます!!

同じように公式のwebページにいきましょう!!

 

今回は東京駅で埋め込みしてみたいと思います。

最初に埋め込みたい位置を検索しましょう!!

Word Press 埋め込み YouTube Twitter インスタ Googleマップ

その後に共有ボタンを押します!!

Word Press 埋め込み YouTube Twitter インスタ Googleマップ

地図を埋め込むにタブを変えて「HTMLをコピー」を押してコピーすれば準備完了です!!

その後、Word Pressのテキストモードでコードを貼り付ければ同じように埋め込む事ができます。

実際にはこんな感じ!

めちゃくちゃ簡単です!!

インスタグラムを埋め込む

手順は同じです。

まずは公式のwebサイトから埋め込みたい投稿を選びます!!

今回は僕自身の投稿を埋め込んでみます!!

右上の赤枠のボタンをクリック。

Word Press 埋め込み YouTube Twitter インスタ Googleマップ

すると窓が出てきて中に「埋め込み」があるのでここをクリックします!!

Word Press 埋め込み YouTube Twitter インスタ Googleマップ

すると「埋め込みコードをコピー」と出てくるのでコピーしましょう!!

これで準備は完了です。

Word Press 埋め込み YouTube Twitter インスタ Googleマップ

ここからの手順は同じで、Word Pressのテキストモードで貼り付けましょう。

これでインスタの投稿を貼り付ける事ができます!!

実際に貼り付けてみます。

まとめ

Word Press 埋め込み YouTube Twitter インスタ Googleマップ

いかがでしたでしょうか??

今回は「YouTube」「Twitter」「Instagram」「Googleマップ」を埋め込んでみました!!

 

他のメディアを共有できるのはとても便利ですね!!

特にSNSは様々な情報が飛び交っています。

これらの大きな情報を活用しない手は無いと思います。

 

Word Pressではこんなにも簡単に埋め込みができますので良ければ活用してみて下さい。

以上!!

\おすすめWPテーマ/

アフィンガーの機能を見る

5,000円の有料プラグインが無料でついてる!

スポンサーリンク
スポンサーリンク

-WordPress
-, , , , ,

© 2020 日曜日のOneRoom