スライドと動画の埋め込み

1. 無料ブログサイトを
使った自習支援教材の作り方
©itochiri2020
その３ ブログサイトにスライドや動画を
埋め込んで公開する

2. 「その１」で立ち上げた無料ブログ
サイトに「その２」で作ったスライドや
動画を埋め込みます。
ボタンに触れると
スライドが進む
YouTube動画
を埋め込む

3. まず、「その１」で作った
ブログサイトを開きましょう
Seesaa ブログ 検索

4. ログインしたら「記事一覧」を開いて
続きを書くか「記事を書く」で新規の
スペースを作ります

5. ここでは「その１」で書いたテスト
ページを使って説明します

6. （１）Slide Shareで公開した
スライドを埋め込む

7. 「その２」で作ったSlide Share
の自分のアカウントにログインします

8. ログインできていればトップページの
“Upload”ボタンの横に自分の顔アイコン
が出ますのでそれをクリックしてマイ
ページに行きます

9. 埋め込みをしたいスライドを選択し、
左下のリンクを開いてスライドの設定画面を
表示します。

10. “Share”ボタンをクリックして
共有設定ページを開きます。

11. “Embed”(埋め込み用コード）を範囲指定
してコピーします。
1クリックする

12. 埋め込み画面サイズ
は小さいほうがよい
（後で調整可能）
全範囲が選択されて
いることを確認して
コピー

13. ※コピーしたアドレスは、いきなりブログサイト
に貼り付けることもできますが、他の作業をし
ているうちにわからなくなってしまうので、
一旦「メモ帳」等に貼っておくと
よいかと思います

14. Seesaa ブログのブログ設定画面に
戻ります。
この下にスライドを
埋め込んでみます

15. 本文の表示形式を
“リッチテキスト”から
“通常エディタ”に切り替えます。

16. 一番最後の行に
先ほどコピーした埋め込みコードを
貼り付けます
すべてを選択して
コピーし、貼り付ける

17. “PCプレビュー”
“スマホプレビュー”を開いて
埋め込みスライドの大きさを確認します。

18. 埋め込みスライドの大きさを変えたいと
きは、コードの中の幅と高さを変えます。
この数字が
スライドの横幅
この数字が
スライドの縦の長さ

19. “保存する”をクリックして
公開するスライドを確認します。

20. （２）動画の埋め込みや
動画サイトへのリンクをする

21. スライドと同じ要領でYouTubeの動画を
ブログに読み込むことができます。
まず、YouTubeで埋め込みたい動画を開きます。

22. 次に、“共有”ボタンをクリックし、
埋め込みコードを表示させます。
「埋め込む」
を選択します。

23. コードの
すべてを範囲
指定して
コピーします

24. Seesaaブログの編集画面に戻り、
スライドの埋め込みと同じ要領で
「通常エディタ」上で埋め込みコードを
貼り付けます。
YouTubeの
埋め込みコード
が挿入された。

25. スライドと動画が埋め込まれました

26. 動画もスライド同様に、「通常エディタ」
上で大きさを調整します。
横幅 縦の
長さ
スライドの大きさに
揃えてみましょう

27. スライドと
埋め込み動画の大きさを
そろえてみました。

28. NHK高校講座やNHK for Schoolなど、
埋め込みができない動画は、画像など
を置いた上で画像からサイトへリンク
を貼ります。
まず、動画を示すフリーアイコンや
フリーイラストなどを用意します。

29. アイコンの画像をSeesaa ブログの画像
ストックにアップします。

30. ファイルがアップロードされたことを
確認し、チェックマークを外します。
２つのチェック
を外す

31. ブログの編集画面を“通常エディタ”
から“リッチテキスト”に切り替えます。

32. アイコンを入れる場所を決めて
画像ファイルをクリックします
このアイコンを
入れたい
この箇所に

33. アイコンが入ったら選択して
大きさなどを調整します。

34. 大きさを調整したら改めて画像を選択し
“リンクの挿入”ボタンをクリックします。
リンクの挿入

35. “リンク”ウインドウが出ますので
リンク先など必要なことを記入してOKを
クリックします。 URLを貼り付ける
タイトル
を入れる
新規ウインドウ
にする

36. 「PCプレビュー」あるいは
「保存する」をクリックして
ページ上でリンクできるか確認します。

37. タイトルなど、文章を添えます。
文章そのものに改めてリンクを
貼ることもできます。
第3回 ここまで