今日は、ご自身の紹介動画（YouTube)を、
アメブロに載せている方へのご案内です。
今は、アメブロの本文内に
表示されているものと仮定します。
たとえば、こんな感じ↓↓↓↓↓↓
これを左もしくは右の
「サイドバー」に
表示させてみましょう。
※その方によって、
サイドバーが、右だったり、
左だったり、両方だったり
すると思いますので、
まずは、どこに表示させたいか、
心に決めてから(笑)、
前準備に入りましょう。
-----まずは前準備------
動画を表示させる場所を作る
動画を表示させるためには、
まずは「フリースペース｣といわれる
場所を、サイドバーの中に設置します。
ブログ管理画面の「設定・管理」を
クリック
「サイドバーの設定」の中から、
「配置設定」をクリック
サイドバーの配置設定画面で、
左の「使用しない機能」の中に、
「フリースペース」がある場合、
右の緑色のエリアの
「使用する機能」
表示させたい箇所に、
ドラッグ＆ドロップで、
「フリースペース」を移動させます。
※一番下に入れなければいけないということはありません。サイドバーの一番上でもOKです。
「使用する機能｝（緑色のエリア）に、
「フリースペース」が移動できたら、
下の「保存」ボタンをクリックします。
----ここまでが前準備です----
YouTubeの動画のタグをコピーする
おそらく、自己紹介動画の前後には、
動画の説明文や、読者へのご案内文が
あると思いますが。
ひとまず。
そこは考えないでOKです。
（後から別な方法で入れます）
動画の部分だけ！
コピーします。
では、
どこが動画を表示させるタグなのか
説明します。
本文中に動画を差し込んでいる
過去記事をひとつ、開いてください。
以下は通常表示です。
「HTML表示」に切り替えます。
※私は、自己紹介動画がないので、
MONKEY MAJIK × 岡崎体育のクールな☆PVをお借りしました。
※動画を表示させるタグは、<iframe>からはじまって、</iframe>で終わっています。
動画の前後に書いてある、説明文は日本語で書いてありますよね。まずはそれを目印に画面をスクロール。
その前後、数行内にある <iframe> と </iframe> にはさまれた箇所が、動画を表示させるタグです。
読めないとピンとこないですよね。「アイフレーム」と読みます
見つけられましたか？
今はここだけ
コピーしてください。
（前後の案内文・説明文などは、今はコピーしません）
ここポイント！
上記のタグをコピーしたら、念のため
メモ帳などに貼り付けておきましょう。
（他の作業をしているうちに、コピーしたデータが
無くなってしまわないように…）
フリースペースに動画のタグを貼り付ける
前準備で、開いたブログ管理画面より、
「設定・管理」の「サイドバーの設定」
今度は、
「フリースペース編集」
を選択してください。
以下のような画面が表示されますので、
さきほどの動画部分のタグを貼り付けます。
動画部分のタグを貼り付けました。
ここ重大ポイント！
貼り付けただけでは、サイドバーから動画が
はみ出してしまうので、
動画の画面サイズを調整します。
フリースペース編集の画面を落ち着いてよく見てください。
width="416" (416ではなく、他の数字が入っていてもソコです）
height="234" (同上です）
を、
width="100%"
height="auto"
と、書き換えてください。
（半角で！）
「 " " 」 などをまちがって消さないように
気をつけましょう！
プレビューボタンをクリックして、
サイドバー内に、動画が表示されれば
OK！です。
動画の説明文・案内文を追加する
プレビュー画面は、
ブラウザで別のタブで表示
されていると思うので、
元のフリースペース編集の
画面に切り替えてください。
動画よりも前に、説明文をつけたいのであれば、
<iframe> よりも前に（上記の画像のように）
動画よりも後に、説明文をつけたければ、
</frame> よりも後ろに文章を
入力します。
面倒なHTMLタグは考えないで大丈夫です。
文章をすっぴんで(笑)
打ち込んでください。
エンターキーを押せばそのまま、
改行が反映されます。
さきほどのように、
「プレビュー」ボタンで確認しながら、
作業を進めます。
動画を囲み枠で目立たせる
以前の記事で、
アメブロの本文内で、
告知などをする際に、
使うと便利ですと、ご紹介した
「囲み枠」を利用すると、
サイドバー内の動画表示の
部分を目立たせることができます。
イメージこんな感じです。
今日も「囲み枠」を参考にさせていただいた
のは、
▼アメブロ集客実践マニュアルさん
https://sakurainorie.com/ameblo-waku/
です。いつもありがとうございます。
こちらには、ステキな「囲み枠」の
タグがたくさん紹介されています。
そちらから、
お好きな「囲み枠」をコピーさせて
いただきます。
ここから、最後の一仕事です！
動画および、その説明文を、「囲み枠」の中に
入れちゃいます！
動画のタグ、およびその前後に入力してくださった、
紹介文をすべてドラッグ（範囲選択）して、
切り取ります
注意：コピーではないです
切り取るってことは、一回見えなくなりますが。
落ち着いて落ち着いて…
切り取ったこのデータを、
囲み枠のタグの中にある、
「本文」
というところに、貼り付けます。
どうやるかというと。
「本文」
をドラッグして、貼り付け。
心配でしたら、
本文の「文」の後ろで一回、マウスをクリック
そこで 「貼り付け」
をしてから、「本文」の文字を削除でもOKです。
こんな感じです。
すでに、囲み枠を入れる前に、前後の説明文の
改行などは、調整されていると思うので、
このタイミングでは、改行を入れなおしたりする
必要はありません。
「プレビュー」で確認してみましょう。
イメージどおりになっているでしょうか。
設定を保存する
再度、「フリースペース編集」の画面に戻り、
「保存」ボタンをクリック
で完了です。