Word Pressブログに『YouTube動画』『Twitterツイート』『Instagramの写真』『Googleマップ』を埋め込む方法を紹介!!初心者ブロガー必須の知識を詳しく解説!!

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

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

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

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

クラシックエディターでの埋め込み方法です。ブロックエディターではURLを入力すれば埋め込めます。

\ 支持率No1オススメWordPressテーマ /

目次

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でテキストモードで貼り付けます

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

これで作業は完了になります。

ビジュアルモードで確認してみましょう!

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

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

\ 支持率No1オススメWordPressテーマ /

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ではこんなにも簡単に埋め込みができますので良ければ活用してみて下さい。

以上!!

\ 支持率No1オススメWordPressテーマ /

この記事をシェアする

コメント

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次