記事に、画像を入れたいときに著作権のことが気にかかりますよね。
有名人の画像やリアルな声や情報を伝えたいときに便利なのが、SNS投稿を記事内に挿入する方法です。
また、You Tube動画にも同じように埋め込みコードがあり、文章よりもより伝わる資料として利用することもできます。
今回は、SNSやYou Tubeをブログ記事に挿入する方法を解説していきます。
ブログ記事にTwitterを挿入する方法
Twitterには、サイト埋め込み用のHTMLコードが用意されているのでカンタンに記事への貼り付けることができるんです。
そもそもTwitterは拡散が目的なので、そういった埋め込みコードがあるのでしょうね。
それでは挿入方法を解説していきます。
まずはツイートを表示させて、右上にある『∨』ボタンを押します。

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

埋め込み編集画面が開き、埋め込みをするツイートが表示されます。
「set customization options.」というところをクリックすると、詳細設定ができます。
※今回は詳細設定についても解説しますが、必要なければ省略しても構いません。

詳細設定では、表示する際の
- 背景色
- 表示言語
- ツイートへのコメントを非表示にするか
が設定できます。

白(Light)か黒(Dark)を選ぶことが出来ます。
基本的は「Automatic(自動)」で構いません。
表示言語を変更するときというのは、たとえば英語で書かれたツイートを翻訳したいときなどです。
そのときには「Japanese(日本語)」を選択するといいでしょう。
ツイートへのコメントを表示したいときは、チェックする必要はありません。
もし、ツイートされた本文のみを表示したいときには、「hide conversations」にチェックを入れてくださいね。
詳細設定が終わったら、「Update(変更)」を押してください。
元の埋め込み編集画面に戻るので、「Code Copy(コードをコピー)」をクリックして記事への貼り付けコードをコピーします。

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

ブログ記事にYou Tubeを挿入する方法
記事内に動画を挿入することで、ユーザーさんの利便性アップに繋がります。
しかも、記事内で動画を再生してくれたらページへの滞在時間も長くなるので、サイトの評価が上がることも期待できますね。
ただし、それを狙って記事の内容に全然関係のない動画を挿入するのはNG!(当然ですね)
必要に応じて挿入するようにしましょう!
それではYou Tubeの動画挿入方法です。
まずは、記事に挿入したい動画のページに移動し、動画が表示された画面上で右クリックしましょう。

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

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

レスポンシブ表示するには
You Tubeの埋め込みコードは、コピーする際に動画を表示していたデバイスのサイズに設定されています。
そのため、スマホで表示した際に動画がはみ出して見切れてしまうこともあるんですね。

なので、これをどのデバイスでも最適化=レスポンシブに表示されるように変更していきましょう。
CSSでコードを追加することでも調整はできますが、一番手っ取り早くて分かりやすいのはコード内の幅(width)の値を変更することです。
width=”数値”の部分を”100%”にするだけ!
<iframe width=”〇〇〇(数値)” height=”〇〇○″ src=”https://www.youtube.com/embed/○○○” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
↓
<iframe width=”100%” height=”〇〇○″ src=”https://www.youtube.com/embed/○○○” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
とってもカンタンですよね!
これで、スマホから記事を見ても動画が見切れずに表示されるようになります。
まとめ
今回は、ブログにTwitter投稿やYou Tube動画を挿入する方法を解説しました。
画像や動画は、ときには文章よりも伝えられる情報が多くなるとても便利なものです。
ただ、著作権にも触れやすいモノを取り扱っているので、引用の際に注意や敬意を払うことを忘れないようにしましょうね。
今でこそ家族も自分も好きなことも大切にできるあたしですが
昔は
- 人見知りしないのにコミュ障な子ども時代
- 先のことなんか考えないてきとーな学生ライフ
- 子どもを産めないかもしれない危機に直面
- 器用貧乏がたたって仕事が増え続ける会社員
- うつ病で療養したら会社に居場所がなくなった
と、まぁ割とすったもんだありました。
でも、「しょうがない」とか「こんなもんだろ」とか諦めなくても
選択肢は自分で作り出せるし、気持ちに素直に生きられるんです。
「でも、どうやって?」
ということをLINEの無料メルマガ講座でお伝えしているので、
まずは”知る”を始めてもらえたら嬉しいです。
- 今すぐ、誰でもできる即効マネタイズ術
- 月収10万円達成までのポイントと考え方
などの限定特典もプレゼントしているので、ぜひゲットしてみてくださいね♫