Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

003open

936 views

Published on

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

Published in: Education
  • Be the first to comment

  • Be the first to like this

003open

  1. 1. 無料ブログサイトを 使った自習支援教材の作り方 ©itochiri2020 その3 ブログサイトにスライドや動画を 埋め込んで公開する
  2. 2. 「その1」で立ち上げた無料ブログ サイトに「その2」で作ったスライドや 動画を埋め込みます。 ボタンに触れると スライドが進む YouTube動画 を埋め込む
  3. 3. まず、「その1」で作った ブログサイトを開きましょう Seesaa ブログ 検索
  4. 4. ログインしたら「記事一覧」を開いて 続きを書くか「記事を書く」で新規の スペースを作ります
  5. 5. ここでは「その1」で書いたテスト ページを使って説明します
  6. 6. (1)Slide Shareで公開した スライドを埋め込む
  7. 7. 「その2」で作ったSlide Share の自分のアカウントにログインします
  8. 8. ログインできていればトップページの “Upload”ボタンの横に自分の顔アイコン が出ますのでそれをクリックしてマイ ページに行きます
  9. 9. 埋め込みをしたいスライドを選択し、 左下のリンクを開いてスライドの設定画面を 表示します。
  10. 10. “Share”ボタンをクリックして 共有設定ページを開きます。
  11. 11. “Embed”(埋め込み用コード)を範囲指定 してコピーします。 1クリックする
  12. 12. 埋め込み画面サイズ は小さいほうがよい (後で調整可能) 全範囲が選択されて いることを確認して コピー
  13. 13. ※コピーしたアドレスは、いきなりブログサイト に貼り付けることもできますが、他の作業をし ているうちにわからなくなってしまうので、 一旦「メモ帳」等に貼っておくと よいかと思います
  14. 14. Seesaa ブログのブログ設定画面に 戻ります。 この下にスライドを 埋め込んでみます
  15. 15. 本文の表示形式を “リッチテキスト”から “通常エディタ”に切り替えます。
  16. 16. 一番最後の行に 先ほどコピーした埋め込みコードを 貼り付けます すべてを選択して コピーし、貼り付ける
  17. 17. “PCプレビュー” “スマホプレビュー”を開いて 埋め込みスライドの大きさを確認します。
  18. 18. 埋め込みスライドの大きさを変えたいと きは、コードの中の幅と高さを変えます。 この数字が スライドの横幅 この数字が スライドの縦の長さ
  19. 19. “保存する”をクリックして 公開するスライドを確認します。
  20. 20. (2)動画の埋め込みや 動画サイトへのリンクをする
  21. 21. スライドと同じ要領でYouTubeの動画を ブログに読み込むことができます。 まず、YouTubeで埋め込みたい動画を開きます。
  22. 22. 次に、“共有”ボタンをクリックし、 埋め込みコードを表示させます。 「埋め込む」 を選択します。
  23. 23. コードの すべてを範囲 指定して コピーします
  24. 24. Seesaaブログの編集画面に戻り、 スライドの埋め込みと同じ要領で 「通常エディタ」上で埋め込みコードを 貼り付けます。 YouTubeの 埋め込みコード が挿入された。
  25. 25. スライドと動画が埋め込まれました
  26. 26. 動画もスライド同様に、「通常エディタ」 上で大きさを調整します。 横幅 縦の 長さ スライドの大きさに 揃えてみましょう
  27. 27. スライドと 埋め込み動画の大きさを そろえてみました。
  28. 28. NHK高校講座やNHK for Schoolなど、 埋め込みができない動画は、画像など を置いた上で画像からサイトへリンク を貼ります。 まず、動画を示すフリーアイコンや フリーイラストなどを用意します。
  29. 29. アイコンの画像をSeesaa ブログの画像 ストックにアップします。
  30. 30. ファイルがアップロードされたことを 確認し、チェックマークを外します。 2つのチェック を外す
  31. 31. ブログの編集画面を“通常エディタ” から“リッチテキスト”に切り替えます。
  32. 32. アイコンを入れる場所を決めて 画像ファイルをクリックします このアイコンを 入れたい この箇所に
  33. 33. アイコンが入ったら選択して 大きさなどを調整します。
  34. 34. 大きさを調整したら改めて画像を選択し “リンクの挿入”ボタンをクリックします。 リンクの挿入
  35. 35. “リンク”ウインドウが出ますので リンク先など必要なことを記入してOKを クリックします。 URLを貼り付ける タイトル を入れる 新規ウインドウ にする
  36. 36. 「PCプレビュー」あるいは 「保存する」をクリックして ページ上でリンクできるか確認します。
  37. 37. タイトルなど、文章を添えます。 文章そのものに改めてリンクを 貼ることもできます。 第3回 ここまで

×