ラベルでリンク作成

さざんか教室

2210月資料

image001.png

1.新規作成します。

新規ページのアイコンをクリックします。

image002.png

2. 新規作成します。

表の挿入のアイコンをクリックして表を挿入します。

image003.png

3. 新規作成します。

表のダイアログが開きますので「行数」や「列数」を決定し「OK」をクリックします。

image004.png

4. 新規作成します。

表が入りました。

表の枠(セル)に歌手名 曲名を入力します。

 

名前を付けて保存します。保存先はホルダ(例:musicとかongaku)を作成してファイル名(例:music01)として保存します。

 

ここでビルダーから少し離れます。最小化して下さい。

image005.png

5.YouTubeの動画を取り込む

インターネットを起動して、YouTubeのアイコンをクリックしてYouTubeを開いて下さい。

又は、検索窓にYouTubeと入力して、YouTubeを開いて下さい。

image006.png

6. YouTubeの動画を取り込む

検索窓にYouTubeと入力して、YouTubeを開いて下さい。

 

ラベルでリンク作成

 

image007.png

7. YouTubeの動画を取り込む

 

YouTubeの検索窓にキーワードを入力して、「検索」をクリックして下さい。

image008.png

8. YouTubeの動画を取り込む

 

目的の歌手、曲目が表示されました。

この画面で動画を選択できます。右のメニューをクリックすると、再生できます。

image009.png

9. YouTubeの動画を取り込む

 

@<埋め込みコード>をクリックします。

左下にコードが表示されます。

A表示されたコードをコピーします。

 

  表示されたコードはすべて選択された状態なので、反転状態を維持してコピーしてください。

  反転状態が消えてしまった場合は、コード部分をクリックして反転状態にしてコピーして下さい。

image010.png

10. YouTubeの動画を取り込む

先ほど最小化したビルダーをクリックして、開きましょう。新規ページの作成アイコンをクリックして、新規ページを開きます。

 

 

 

 

image011.png

11. YouTubeの動画を取り込む

 

新しいページが開きましたら、「HTMLソース」タブをクリックして、ソース画面にします。

 

<BODY></BODY>のカーソルが点滅してます。右クリックで貼り付けをします。

image013.png

12. YouTubeの動画を取り込む

 

ソースが張り付きました。

image012.png

13. YouTubeの動画を取り込む

「ページ編集」タブをクリックします。

 

VISTAやWIN7等は左図のような警告が表示されますが、「エラーを全て修正」をクリックしてください。

image014.png

14. YouTubeの動画を取り込む

 

ページ編集画面では左図ように表示されます。

image015.png

15. YouTubeの動画を取り込む

次の画像を取り込みます。タイトルとして曲名、歌手名を入力します。

このタイトルをコピーしてください。

カーソルをタイトルの下に移動してください。

 

 

 

 

 

image016.png

16. YouTubeの動画を取り込む

ここで、YouTubeに戻りタイトルの動画を検索してご希望の動画の「コード」をコピーします。

ビルダーに戻り「HTMLソース」タブをクリックしてソース画面を開きます。

image017.png

17. YouTubeの動画を取り込む

 

右クリックで張り付けします。

image018.png

18. YouTubeの動画を取り込む

以上の作業を繰り返し行い、YouTubeの動画を取り込みます。名前を付けて保存をします。

保存先(例:musicとかongaku)はすでに作成して有りますので、ファイル名(例:music02)として保存します。。

image019.png

19. YouTubeの動画を取り込む

 

タイトルのに画像を付けましょう。

YouTubeを開いてご希望の歌手の動画を再生しましょう。

image020.png

20. YouTubeの動画を取り込む

 

サムネイル」画像なので、一目で解るタイミングで、プリントスクリーン(PrtSc)を実行します。

次にウェブアートデザイナーを起動して、貼り付け、画像を編集します。画像サイズを幅160にします。

 

 

image021.png

21. YouTubeの動画を取り込む

 

編集した画像を保存します。

image022.png

22. YouTubeの動画を取り込む

 

保存先は先ほど(18項目)作成したホルダに保存します。

image023.png

23. YouTubeの動画を取り込む

 

ファイル名を付けて保存します。

image024.png

24. YouTubeの動画を取り込む

 

160の画像が保存されました。

ビルダーに戻ります。

image025.png

25. YouTubeの動画を取り込む

 

ファイル名(例:music01)を開きます。

画像挿入アイコンをクリックします。

image026.png

26. YouTubeの動画を取り込む

 

目的の画像(ファイル名)を選択して「開く」をクリックします。

image027.png

27. YouTubeの動画を取り込む

 

画像が入りました。

image028.png

28. YouTubeの動画を取り込む

 

19項目〜26項目の作業を繰り返し行い、ページに画像を張付ます。

 

上書き保存をします。

image035.png

29. YouTubeの動画を取り込む

 

music01のページが完成しました。後日追加の歌手、曲が有りましたら、継続して作成します。

 

本題のラベルでリンク作成を行います。

 

 

image038.png

30. ラベルでリンク作成

 

ページ「music02」を開きます。

リンクする文字列をマウスで選択して、反転させます。

 

image037.png

31. ラベルでリンク作成

 

「リンクの挿入」のアイコンをクリックします。

 

image039.png

32. ラベルでリンク作成

 

リンクの属性ダイアログがひらきます。「ラベルを付ける」タグをクリックします。

ラベルを入力する画面が表示されました。

image040.png

33. ラベルでリンク作成

 

「ラベル(L)」のラベル名を入力します。

「例:otaru-sanjyou

入力したら「OK」をクリックします。

image041.png

34. ラベルでリンク作成

 

リンクを作成した文字列に「点線」によるアンダーラインが付いてラベルリンクが付きました。

上書き保存を実行します。

image036.png

35. ラベルでリンク作成

 

ページ「music01」を開きます。

リンクする文字列をマウスで選択して、反転させます。

 

image037.png

36. ラベルでリンク作成

 

「リンクの挿入」アイコンをクリックします。

image042.png

37. ラベルでリンク作成

 

リンクの属性ダイアログが開きます。今度は「ラベルへ」タグをクリックします。

 

image043.png

38. ラベルでリンク作成

 

A参照ボタンをクリックして、「music02」を開きます。

B▼をクリックして「otaru-sanjyou」を開きます。

Cターゲットに新しいウィンドウを指定します。

image045.png

39. ラベルでリンク作成

 

リンク文字色が変わり、アンダーラインが引かれました。

image046.png

40. ラベルでリンク作成

30.39.の作業を個別に実施してリンクを作成します。

 

リンクの作成を続けるとラベルが増えますので、同名のラベル名を付けないよう、注意が必要です。

 

 

image047.png

41.ラベルのリンク完成

 

完成したリンクをクリックして下さい。

お目当ての動画が最初に表示されます。