【簡単】WordPressにInstagram・Twitter・YouTubeを埋め込む方法

 

 

こんにちは、Rina(@Rina_wooooo)です。

 

前回「【簡単】初心者でもGoogleアドセンスに合格する7つのポイント」という記事を投稿しましたが、その中でインスタグラムの埋め込みについて少し触れました。

 

そこで今回は、インスタグラム、ツイッター、ユーチューブの3大SNSの埋め込み方法について解説します。

 

私はこれを学んでブログの書き方の幅が広がり、「他の人にもぜひ知ってほしい!」という思いで情報を共有しようと思いました。

 

もっと色々な表示のされ方をするにはプラグインを使うといいのですが、あまりプラグインを使いすぎると重たくなります。

 

”プラグインは使いたくない”
”シンプルで十分”

 

という方はこの記事をご覧ください。一発で理解できます。

 

ブログやネットが初心者の方にも分かりやすいように、画像をたくさん載せながら丁寧に解説しています。

 

SNSの埋め込みは、ブログを運営していくうえで知っていると何かと有利になる技です。

 

この記事を読んでSNSの埋め込みをマスターしましょう。

 

SNSの埋め込みとは?

SNSにはツイートや写真、動画などありとあらゆる情報が詰まっています。

 

そのようなSNSのリンクをブログの記事に貼ることができ、それを「埋め込む」と言います

 

他人のSNSのリンクを貼って平気なの?と思うかもしれませんが、SNSの投稿画面には〈埋め込みタグ〉があります。

 

この機能を利用して引用することは著作権の侵害にはなりません
※ただし、投稿者が”引用禁止”などの注意書きをしている場合は引用しないようにしましょう。

 

”写真や動画を挿入して記事をわかりやすいものにしたい”
”色々な人のつぶやきを挿入して世間の評判を説明したい”

 

ブログを書いているとこんな状況になりますよね。

 

とある風景、人、イラストなど、記事を見やすくするだけの目的に必要な場合はフリー素材を使うといいでしょう。

 

おすすめのフリー素材はこちら↓

いらすとや

ODAN(オーダン)

GIRLY DROP(ガーリードロップ)

 

何か紹介したい特定の場所や物の写真が必要な場合はフリー素材だとほとんど見つかりません。かと言ってその全てを自分で写真を撮るというのもなかなか難しいですよね。

 

そんな時に便利なのが「インスタグラムの埋め込み」です。

 

以下で埋め込みの詳しいやり方を解説していきます。

 

Instagramの埋め込み

①記事に埋め込みたいインスタグラムの写真を選び、その投稿の右上の「…」をクリック

 

 

「埋め込み」をクリック

 

 

③「キャプションを追加」のチェックをはずし、「埋め込みコードをコピー」をクリック
(キャプションを追加にすると、その投稿のコメントやハッシュタグ部分も一緒に表示されます。)

 

 

④自分の記事の投稿画面に戻ります。
ワードプレスの場合だとビジュアルエディタとテキストエディタがありますが、一番右上の「テキスト」の方を選び、貼り付けます(ctrl+v)。

ちなみに、「インスタグラムでもっと見る」「いいね!~件」などの部分が文字数に含まれてしまいます。

 

 

 

この投稿をInstagramで見る

 

🌀Giappone 100% Japan 🌀(@giapponizzati)がシェアした投稿 -

①~④の手順でやっていくとこのように表示されます。
※「テキスト」で張り付けて「ビジュアル」で確認すると、写真が表示されてなくてあれ?と思いますが「プレビュー」で見れば写真まで全て表示されます。

 

 

 

この投稿をInstagramで見る

 

Miyakojima-shi, Okinawa, Japan • 👺Follow @giapponizzati ❕🗾 ▪ ▪ ▪ •••••••••••••••••••••••••••• 🏆 Photography by @saki_papepooh •••••••••••••••••••••••••••• ⛩️Tag your best photos with @giapponizzati and follow us to be featured •••••••••••••••••••••••••••• ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ #最強コンディションの海 #宮古島 #前浜ビーチ #与那覇前浜ビーチ #けしからん風景 #沖縄 #沖縄好きな人と繋がりたい #沖縄冒険野郎 #giapponizzati たい海 #広がり同盟 #miyakojima #okinawa #loves_okinawa #loves_miyako #ig_skyline #visitokinawa #kf_gallery #japan_of_insta #triponparadise #beautiful___travel #divermag #discovery_okinawa #lr_light #my_eos_photo #canon #flyjal #amazingaugust

 

 

🌀Giappone 100% Japan 🌀(@giapponizzati)がシェアした投稿 -

「キャプションを追加」にするとこのようになります。

 

 

ここから少し応用編です。

 

<center></center>でコードを挟むとページの中央に表示されるようになります。

「メディアを追加」で画像を挿入するときは大抵の場合配置を「中央」にすると思いますが、埋め込みしたものも中央に表示されると見た目がきれいになります。

 

 

⑥大きさを変える

デフォルトだと「max-width:  540px;  」になっていますが、この部分の数字を変えると表示される大きさが変わります。

下で表示されているものは「max-width:  300px;  」で、<center></center>で中央に表示されるようにしています。

 

 

 

 

この投稿をInstagramで見る

 

🌀Giappone 100% Japan 🌀(@giapponizzati)がシェアした投稿 -

 

Twitterの埋め込み

ここまでできたら他のSNSも手順はだいたい同じですが、一つずつ確認していきましょう。

 

①記事に埋め込みたいツイートを選び、右上の「∨」をクリック

 

 

「ツイートを埋め込む」をクリック

 

 

③別のページに移動するので、真ん中あたりにある「Copy Code」をクリック

 

 

 

 

④インスタグラムのときと同じように「テキスト」から貼り付ける(<center></center>でコードを挟んで中央に表示)とこのように表示されます。

 

 

YouTubeの埋め込み

①埋め込みたい動画を選び、右下の「共有」をクリック(「…」じゃないので注意!)

 

 

「埋め込む」をクリック

 

 

右下の「コピー」をクリック
(このときに「開始位置」にチェックを入れると好きな時間から開始するように設定できます)

 

 


④インスタグラムのときと同じように「テキスト」から貼り付ける(<center></center>でコードを挟んで中央に表示)とこのように表示されます。

 

まとめ

SNSを埋め込むときの手順まとめ

 

  1. 埋め込みたい投稿の右端でそれっぽいものをクリック
  2. 「埋め込む」をクリック
  3. コードをコピー
  4. 「テキスト」の方に貼り付け
  5. 貼り付けるときは<center></center>でコードを挟んで中央に表示

 

いかがでしたか?

 

一度やり方を知ってしまえば簡単にできます。

 

SNSの埋め込みをして、より豊かなブログライフを送りましょう。

 

 

 

最後まで読んでいただきありがとうございました!
下のボタンからシェア、Twitterのフォロー、コメントしてもらえたら嬉しいです☺

 

 

 

I'm happy if you share with your friends !

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です