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

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

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

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

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

iFrameコードで埋め込む

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

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

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

著作権の問題

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

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

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

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

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

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

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

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

Twitterのツイートを埋め込む

方法はとても簡単です。

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

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

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

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

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

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

これが出ればOK！

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

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

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

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

【iOS】iPhoneやiPadでブラウザ内でCSVが文字化けした時の対処法【もしもアフィリエイト】 – 幸福な人生とはなんだろう。 https://t.co/jlbK2KqChL

— 桐嶋　秋 (@Aki4108gl) February 19, 2020

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

YouTubeの動画を埋め込む

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

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

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

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

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

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

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

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

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

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

これで完了です。

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

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

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

Googleマップを埋め込む

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

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

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

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

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

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

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

実際にはこんな感じ！

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

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

手順は同じです。

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

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

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

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

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

これで準備は完了です。

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

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

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

 

この投稿をInstagramで見る

 

画像や写真を『ドット絵ナニカ』を使ってマイデザインにする方法　#ブログ #ブログ更新しました #ブログ初心者 #ブログはプロフィールから #あつまれどうぶつの森 #あつまれどうぶつの森マイデザイン #あつまれどうぶつの森好きな人と繋がりたい #あつ森 #あつ森マイデザイン

アキ＠ブロガー(@aki4108gl)がシェアした投稿 - 2020年 6月月24日午前3時33分PDT

まとめ

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

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

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

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

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

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

以上！！