アメブロのサイドバーにYoutube動画を埋め込む方法

ウェブ関連
スポンサーリンク

僕のブログのアクセス解析(アナリティクス)の検索ワードで、『アメブロ、サイドバーにYoutube』と言う検索が来てるので、その方法に関しても詳しく、スクショを含めながら、解説していきます。

 

 

アメブロのサイドバーに、YouTube動画を埋め込む場合、サイドバーのサイズ(カラム数)も解らないといけないので、それについては、別記事を参照してください。

アメブロのサイドバー、カラム別のサイズは何px?
アメブロサイドバーに関しても、いくつかの記事を更新していますが、写真を埋め込むにしても、YouTube動画を埋め込むにしても、サイズをいくつに設定したらいいのか解らない…っと言う状況を僕も、経験したことがあります。 ...

 

 

スポンサーリンク

 

 

アメブロのサイドバーにYoutube動画を埋め込む方法の手順!

 

  1. 埋め込む動画のURLを取得する(You Tube上の作業)
  2. アメブロのサイドバーへの埋め込み方法と手順(アメブロ上の作業)

アメブロのサイドバーにYou Tube動画を埋め込む方法は、先にYou Tube上で、埋め込みたい動画のURLを取得。

 

You Tube上での作業が終わったら、アメブロの管理画面で、サイドバーの編集に移ります。
それでは、更に詳しく解説していきますね!!

 

 

YouTubeから埋め込みコードを取得する方法

 

YouTubeを開き、埋め込みたい動画ページを開きます。

そして、赤枠で囲ってある、『共有』をクリック。

ようつべ1

 

 

すると次の画面に切り替わるので、赤枠の『埋め込みコード』をクリックします。

ようつべ2

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

ようつべ3

上記コードでもOKですが、サイドバーのサイズを手入力しなくてはいけないので、赤枠を『もっと見る』をクリックすると、幅を入力すれば縦サイズは自動に検出してくれます。

ようつべ5

(幅の数値が小さすぎると適切なサイズが検出されない場合があります。)

スポンサーリンク

 

 

アメブロカラム数が、2カラムの場合

アメブロが、2カラムの場合サイドバーのサイズは、300です。
横幅の部分に、300と入力して、『Enter』を押せば、OK!
縦幅が、225と出るはずです。

 

アメブロカラム数が、3カラムの場合

アメブロが3カラムの場合、サイドバーのサイズが180です。
横幅の部分に180と入力して、『Enter』を押せば、OK!
縦幅が、135と出るはずです。

 

 

 

 

数値が出たら、プレビュー画像の上部コード、赤下線の width=”420と height=”315の数字部分をそれぞれ、カラム数に応じて、変更します。

下記の様なコードが出来るはずです。

<iframe width=”300” height=”225” src=”https://www.youtube.com/embed/QIMrw-p2eoo” frameborder=”0″ allowfullscreen></iframe>

このコードをコピーしておきます。

 

 

アメブロのサイドバーへの埋め込み方法と手順

 

 

マイページから、右上歯車の隣(右側)のメニューバーをクリック。

赤枠内サイドバーのフリースペース編集をクリックします。

アメブロ1

 

 

フリースペース編集画面に移ります。

 

そこに、先ほど、YouTubeで作った、コードを貼り付けて下さい。

アメブロ

コードを貼り付けたら、保存をクリック

確認したい場合は、プレビューをクリック。
プレビューした場合は、このフリースペース編集画面に戻って、保存を最後に押さないと、反映されないので注意。

 

 

 

【関連記事】

ブログで一般人が収入を得る?月1万円稼ぐやり方を教えます♫
一般人が、ブログで収入を得る? そんな事できるの? ブログで副業ができるって、聞いたけど、どうやるの? 月一万円でもお小遣いが入ったらいいのに… 子どもがいるから、働きに行けない…けど、少しでも自宅ででき...
ブログを始める注意点!初心者が続かなくなる理由
ブログを始めよう!! って思った時に、初心者がやってしまうことがあります。 それが、目的をはっきりさせずに、ブログを始めてしまうことです。 ただ、何となくブログを始めてみようかな?? と思って、ブログを開設し...

 

ブックマークお願いします!
ヒロ兄を応援する!
このエントリーをはてなブックマークに追加
スポンサーリンク

コメント

タイトルとURLをコピーしました