ブログ記事にTwitter投稿やYou Tube動画を挿入する方法

記事に、画像を入れたいときに著作権のことが気にかかりますよね。

有名人の画像やリアルな声や情報を伝えたいときに便利なのが、SNS投稿を記事内に挿入する方法です。

また、You Tube動画にも同じように埋め込みコードがあり、文章よりもより伝わる資料として利用することもできます。

今回は、SNSやYou Tubeをブログ記事に挿入する方法を解説していきます。

ブログ記事にTwitterを挿入する方法

Twitterには、サイト埋め込み用のHTMLコードが用意されているのでカンタンに記事への貼り付けることができるんです。

そもそもTwitterは拡散が目的なので、そういった埋め込みコードがあるのでしょうね。

それでは挿入方法を解説していきます。

まずはツイートを表示させて、右上にある『∨』ボタンを押します。

ツイートへのメニュー画面が表示されるので、その中から「ツイートを埋め込む」をクリックします。

埋め込み編集画面が開き、埋め込みをするツイートが表示されます。

「set customization options.」というところをクリックすると、詳細設定ができます。

※今回は詳細設定についても解説しますが、必要なければ省略しても構いません。

詳細設定では、表示する際の

• 背景色
• 表示言語
• ツイートへのコメントを非表示にするか

が設定できます。

詳細設定が終わったら、「Update（変更）」を押してください。

元の埋め込み編集画面に戻るので、「Code Copy（コードをコピー）」をクリックして記事への貼り付けコードをコピーします。

あとは、ブログ記事編集画面をテキストモードにして、貼り付ければOKです!!

ブログ記事にYou Tubeを挿入する方法

記事内に動画を挿入することで、ユーザーさんの利便性アップに繋がります。

しかも、記事内で動画を再生してくれたらページへの滞在時間も長くなるので、サイトの評価が上がることも期待できますね。

ただし、それを狙って記事の内容に全然関係のない動画を挿入するのはNG！（当然ですね）

必要に応じて挿入するようにしましょう！

それではYou Tubeの動画挿入方法です。

まずは、記事に挿入したい動画のページに移動し、動画が表示された画面上で右クリックしましょう。

すると、メニューが表示されるので「埋め込みコードをコピー」をクリック。

後は、ブログ記事編集画面をテキストモードにして、コードを貼り付ければ挿入完了です。

レスポンシブ表示するには

You Tubeの埋め込みコードは、コピーする際に動画を表示していたデバイスのサイズに設定されています。

そのため、スマホで表示した際に動画がはみ出して見切れてしまうこともあるんですね。

なので、これをどのデバイスでも最適化＝レスポンシブに表示されるように変更していきましょう。

CSSでコードを追加することでも調整はできますが、一番手っ取り早くて分かりやすいのはコード内の幅（width）の値を変更することです。

width＝”数値”の部分を”100％”にするだけ！

とってもカンタンですよね！

これで、スマホから記事を見ても動画が見切れずに表示されるようになります。

まとめ

今回は、ブログにTwitter投稿やYou Tube動画を挿入する方法を解説しました。

画像や動画は、ときには文章よりも伝えられる情報が多くなるとても便利なものです。

ただ、著作権にも触れやすいモノを取り扱っているので、引用の際に注意や敬意を払うことを忘れないようにしましょうね。