アメブロにYouTube動画を埋め込む方法

2012年12月18日


ども、ピアノ教室管理人です。


アメーバブログ(アメブロ)YouTube動画をはりつける、
というか埋め込む方法をご紹介します。


YouTubeはつい先日(2012年12月頃)
レイアウトが変更になりましたので戸惑う人もいるかもしれませんが、
基本は従来と同じです。



では順を追って説明していきます。




アメブロに使いたい動画を表示しておく


アメブロにYouTube動画を埋め込む1

検索するなどして、使いたい動画を探して表示しておきます。


って、ここまでは何の問題もないですよね。^^





「共有」をクリックして共有アイコンを表示する


アメブロにYouTube動画を埋め込む2

動画の少し右下にある「共有」という部分をクリックします。


アメブロにYouTube動画を埋め込む3
↑ここですね。



すると・・・

アメブロにYouTube動画を埋め込む4

下にFacebookやTwitter、Google+などの共有アイコンが表示されます。





アメブロのアイコンを表示させる


アメブロにYouTube動画を埋め込む5

Google+の右横にある三角形をクリックします。


アメブロにYouTube動画を埋め込む6
↑ここですね。



すると・・・

アメブロにYouTube動画を埋め込む7

アメブロのアイコンが表示されます。





アメブロアイコンをクリックする


アメブロにYouTube動画を埋め込む8

アメブロのアイコンをクリックします。


アメブロにYouTube動画を埋め込む9
↑ここをクリック。



すると・・・

アメブロにYouTube動画を埋め込む10

別のウィンドウでアメブロの編集画面が表示されます。





記事を編集します


アメブロにYouTube動画を埋め込む11

編集画面にはYouTube動画のコードが挿入された状態です。


このままここで記事を編集して、
いつもと同じ手順で公開してもOKです。




もし、すでに別の記事を編集中で、
そちらにこのYouTube動画を埋め込みたい場合は・・・

アメブロにYouTube動画を埋め込む12

YouTube動画のコードをマウスで選択してコピーしておき、
編集中の記事へペーストすればOKです。

コピー方法:
「Ctrl」+「C」もしくは、マウス右クリックで「コピー」を選択

ペースト方法:
「Ctrl」+「V」もしくは、マウス右クリックで「貼り付け」を選択






記事編集中の動画の確認


アメブロにYouTube動画を埋め込む13

記事の編集中に動画を確認するには
「プレビュー」ボタンをクリックしてください。


すると・・・

アメブロにYouTube動画を埋め込む14

プレビューに表示されます。
もちろん再生もできます。




ただし

アメブロにYouTube動画を埋め込む15

編集画面の下の方にある「表示を確認する」では
動画の確認はできませんので、あしからず。^^;





動画のサイズの調整


埋め込んだYouTube動画のサイズ、特に横幅が、
ブログの横サイズに対して大きすぎたり変更したい場合は、
こちらの記事が参考になるとか思います。

ちょっと直しでブログのYouTube動画サイズを変更する方法




でわ ^^)/~

ランキング参加中!応援ポチお願いします。ヾ(*´∀`*)ノ♪

にほんブログ村 デザインブログ Webデザインへ 人気ブログランキングへ
このブログの目次
 
この記事へのコメント
コメントを書く
お名前: [必須入力]

URL(任意):

コメント: [必須入力]

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。