html部 (2)

　

奮戦記　（html･ﾎｰﾑﾍﾟｰｼﾞ･ｿﾌﾄｳｪｱ･その他）


16. ﾎｰﾑﾍﾟｰｼﾞを自動転送させる 　17. ｽｸﾛｰﾙﾊﾞｰの幅変更はﾊﾟｿｺﾝで 　18. 背面色を変える 　19. ﾎﾞﾀﾝを押し、写真を差し替える 　20. 動画を圧縮（WMV変換)する 　21. ﾎｰﾑﾍﾟｰｼﾞに動画を配置する 　22. ﾎｰﾑﾍﾟｰｼﾞで音楽(BGM)を流す 　23. ﾎｰﾑﾍﾟｰｼﾞでｽﾗｲﾄﾞｼｮｰを観る　(その1) 　24. ﾎｰﾑﾍﾟｰｼﾞの角（ｶﾄﾞ）を丸める 　25. 画像ｸﾘｯｸで画像を入れ替える

26. ﾊﾟｽﾜｰﾄﾞを入力して、ﾘﾝｸ先に飛ぶ 　27. ﾘﾝｸ先文字の下線を消す 　28. ﾎｰﾑﾍﾟｰｼﾞの文字をｸﾘｯｸし、色を変える 　29. ﾎｰﾑﾍﾟｰｼﾞでｽﾗｲﾄﾞｼｮｰを観る　(その2)


◎ html･soft部(1)へJump　　⇒

16. ﾎｰﾑﾍﾟｰｼﾞを自動転送させる

　ﾎｰﾑﾍﾟｰｼﾞを自動転送するためのHtmlｺｰﾄﾞの記事へJump　 　 ⇒

　Jump先のｻﾝﾌﾟﾙｺｰﾄﾞをHtml文に貼り付け、｢何秒後の自動転送」「転送先のｱﾄﾞﾚｽ」 を決め、ﾌﾞﾗｳｻﾞを走らせることで自動転送が確認できます。('12.9.22 Up)



　※ｺｰﾄﾞ例　＜meta http-equiv="refresh" content="3;url=http://www.abcdef.sakura.ne.jp/"＞
　　・「content="3;」は、ﾌﾞﾗｳｻﾞが3秒後に転送することを意味します。
　　・3秒後、ｱﾄﾞﾚｽ(abcdef.sakura.ne.jp)へ自動的に転送します。

17. ｽｸﾛｰﾙﾊﾞｰの幅変更はﾊﾟｿｺﾝで

　ｽｸﾛｰﾙﾊﾞｰ･ｻｲｽﾞを変更する記事へJump　　⇒



　ｽｸﾛｰﾙﾊﾞｰ･ｻｲｽﾞ変更方法（OS：Windows7）
　　�@ﾃﾞｨｽｸﾄｯﾌﾟ画面を右ｸﾘｯｸし、「個人設定」を開きます。
　　�A「ｳｨﾝﾄﾞｳの色　そら（ｳｨﾝﾄﾞｳの色　ﾃﾞｻﾞｲﾝ）」をｸﾘｯｸします。
　　�B「ﾃﾞｻﾞｲﾝの詳細設定...」をｸﾘｯｸします。
　　�C「指定する部分(I）」ﾎﾞｯｸｽで「ｽｸﾛｰﾙﾊﾞｰ」を指定し、好みの数字　（「勝ちゃんの ﾎｰﾑﾍﾟｰｼﾞ」information列は、"15"設定で、横ｽｸﾛｰﾙﾊﾞｰが消えます。）　を選択します。

　　　　（以上のように、大変簡単です。'13.6.3　Up）

　※ｲﾝﾀｰﾈｯﾄｴｸｽﾌﾛｰﾗのﾊﾞｰｼﾞｮﾝｱｯﾌﾟ（Ver9⇒Ver10）奮戦記は、freeArea部No.21へ 　⇒

18. 背面色を変える

　ﾎｰﾑﾍﾟｰｼﾞ作成から1年半、初めて、背景の森をｲﾒｰｼﾞしたﾃﾞｻﾞｲﾝから、より薄目のcolor(このｼｰﾄの色。 #e6ffe9)にし、夏の清涼感を出しました。ついでにｽｸﾛｰﾙの色や罫線の変更、Welcome写真の入れ替えも。 作業は、CSSｼｰﾄを少し書き換えるだけで、すごく簡単です。（'13.6.11Up）

　CSSｼｰﾄの修正は、
　　　�@Body { background_color　:　前ccffcc　⇒　新"e6ffe9" }へ
　 　 �Atd　{　background : 前ccffcc　 ⇒　新"e6ffe9"へ
　　　�B　　　　scrollbar-face : 前ccffcc ⇒　新"008000"へ　　}
　※1 ｽｸﾛｰﾙﾊﾞｰ、背景色の色･･･左から、#008000、#ccffcc、#e6ffe9。


　　　　 　　　　　 　　　　　



　※2 背景色変更の記事へJump　 　⇒

　※3 16進数とRGBの変換記事へJump　 ⇒

　※4 16進数と10進数の変換記事へJump　 ⇒

19. ﾎﾞﾀﾝを押し、写真を差し替える

　ﾎﾞﾀﾝを押すことにより、写真を 差し替えることができます。ﾀｸﾞ記述は、次のとおりです。　('13.6.11 Up)



　(1)inputﾀｸﾞで、画像を表示するためのﾎﾞﾀﾝを指定します。

　　　＜input type="button" value="xxx" onClick= "yyy"　src="zzz"＞

　(2)imgﾀｸﾞで、ﾎﾞﾀﾝが押されたとき、表示する画像を指定します。

　　　＜img src="　 " id=" " width=" " height=" " alt="yyy" /＞


　　　�@inputﾀｸﾞで、　type="button"　を指定する。
　　　�Axxxに、　ボタンに表示する名称　を指定する
　　　�Byyyに、imgﾀｸﾞの　name="yyy"　と同じ名称　を指定し、お互い(ﾎﾞﾀﾝと画像)を関係付ける。
　　　�Czzzに、表示したい画像のファイル名　を指定する。

　(3)全体のﾀｸﾞ： divﾀｸﾞでscriptﾀｸﾞ／input･imgﾀｸﾞを囲みます。


　　　　　＜div class="samplearea"＞

　　　　　　　＜script type="text/javascript"＞
　　　　　　　　　　＜!--function Change　Image(imgid , newimg ) {document.getElement 　ById(imgid).src = newimg;}/ --＞
　　　　　　　＜/script＞

　　　　　　　　【imgﾀｸﾞ／inputﾀｸﾞ････inputﾀｸﾞ････inputﾀｸﾞ････inputﾀｸﾞ（写真枚数分）】

　　　　　＜/div＞




　【　表示例　】

20. 動画を圧縮（WMV変換)する

　「WMV変換って？！」（以下、ｲﾝﾀｰﾈｯﾄ記事より。2013.6.28 )


　WMV形式(.wmv)とはMicrosoft社が開発した映像圧縮方式のひとつで、Windows Media Videoの それぞれ頭文字をとったものです。圧縮率が高いため、ｲﾝﾀｰﾈｯﾄ上へのｱｯﾌﾟﾛｰﾄﾞ･再生に適した ﾌｧｲﾙと言えます。 ﾌｧｲﾙｻｲｽﾞはMPEG-4のおよそ半分程度です。Windows標準のﾒﾃﾞｨｱﾌﾟﾚｰﾔｰである 「Windows Media Player」が標準でｻﾎﾟｰﾄしている形式の一つです。

　WMV変換には、「動画･音楽変換6！ﾌﾟﾛ(Win版）」と云うｿﾌﾄを使用します。

　＜WMV変換手順（ ﾎｰﾑﾍﾟｰｼﾞ上に動画を配置する前の準備）＞


　※手順1(撮影)　ﾃﾞｼﾞﾀﾙｶﾒﾗで撮影(.MOVﾃﾞｰﾀ）し、PCへ転送する
　※手順2(圧縮)　WMVｿﾌﾄ（「動画･音楽変換6！ﾌﾟﾛ(Win版）」等)で圧縮
　　　(注意)無料の体験版では、ｿﾌﾄ･ｲﾝｽﾄｰﾙ後に、PCが正常な動きをしなくなった。｢圧縮･
　　　　　変換｣と云うｷｰﾜｰﾄﾞで次の記事を読むこと。（無料ｿﾌﾄ体験版記事へ）
　※手順3(変換)　WMVｿﾌﾄにより、MOVﾃﾞｰﾀ(例:79.6MB)をWMV変換して、mp4ﾃﾞｰﾀ
　　　　　　　　　(例:25.3MB)へ変換する

21. ﾎｰﾑﾍﾟｰｼﾞに動画を配置する

　動画を配信する方法として、２通りの方法があります。(ｲﾝﾀｰﾈｯﾄ記事へJump ⇒ 2022.6.5 修正Up)


　＜動画配信方式種別（Webｻｰﾊﾞｰとｽﾄﾘｰﾐﾝｸﾞｻｰﾊﾞｰ）＞
　　　�@Webｻｰﾊﾞｰ･･ 端末に動画ﾃﾞｰﾀをﾀﾞｳﾝﾛｰﾄﾞし、WindowsMediaPlayer等で再生する。
　　　　　　　　　　※ﾌﾟﾛｸﾞﾚｯｼﾌﾞ･ﾀﾞｳﾝﾛｰﾄﾞ･･ﾀﾞｳﾝﾛｰﾄﾞ途中も再生可能（WindowsMediaPlayer採用）
　　　�Aｽﾄﾘｰﾐﾝｸﾞ･･･動画ﾃﾞｰﾀを受信しながら逐次再生する。(Youtube等)転送速度等選択可能で視聴できる。
　　　　　　　　　 ※動画ﾃﾞｰﾀは修正等できない。
　＜�@Webｻｰﾊﾞｰの検証＞
　　(ｽﾀｰﾄﾎﾞﾀﾝを押すと、見帰りの滝（唐津市相知町）の大きな音が出ます。 先ず、ﾎﾞﾘｭｰﾑを絞ってください。)
　　　　※videoﾀｸﾞ記述（＜video src="****.mp4" widt="300" heigh="150" controls＞＜/video＞）
　　　　　で操作ﾊﾟﾈﾙを表示する。
　　　　※IE v.11( Windows7 ﾌﾞﾗｳｻﾞ）では表示できません。(Windows10) Edgeへ移行し、視聴ください。
　　　　※ﾊﾟｿｺﾝの音量調整方法：ｺﾝﾄﾛｰﾙﾊﾟﾈﾙ⇒ﾊｰﾄﾞｳｪｱとｻｳﾝﾄﾞ⇒ｻｳﾝﾄﾞ⇒ｼｽﾃﾑ音量の調整⇒音量ﾐｷｻｰ･ｽﾋﾟｰｶｰ ⇒
　　　　　ｱﾌﾟﾘｹｰｼｮﾝの音量ﾂﾏﾐを調節する
　　　　　　
　　　　　　/////////////////// 2022.7.14 mobile phone Up(.mp4 file) ///////////////////
　　　　　　
　　　　　　/////////////////// 2022.7.14 mobile phone Up(.mp4 file) ///////////////////

　＜�Aｽﾄﾘｰﾐﾝｸﾞの検証＞
　　(手順) Youtubeで好きな動画のﾍﾟｰｼﾞを開く ⇒ 「共有」を選択する ⇒ ﾊﾟﾈﾙ中の「埋め込む」を選択する
　　　　　⇒ (｢開始位置｣にﾚ点を入れ) 右枠のｺｰﾄﾞをｺﾋﾟｰし ⇒ htmlに貼り付ける
　　　　　　

　　　　　　
　　　　　　
　　　　　　
　　　　　　


22. ﾎｰﾑﾍﾟｰｼﾞで音楽(BGM)を流す　2014.6.13修正 / 2022.5.23再修正

　・＜object〜＞ﾀｸﾞや＜embed〜＞ﾀｸﾞのどちらを使っても、音楽の配信ができます。('13.7.1 Up)
　・Html5から＜audio〜＞ﾀｸﾞで音声の配信ができる様になりました。('22.5.25 追記Up)

　(1)＜object〜＞ﾀｸﾞ


　　　＜TBODY＞
　　　＜OBJECT id="MediaPlayer" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
　　　　width="280" height="45" autostart="false" loop="true"＞
　　　＜PARAM name="FileName" value="music/01abcdef0123456.wma"＞
　　　　注："musi〜.wma"は、BGM-urlです。
　　　＜PARAM name="AutoStart" value="false"＞
　　　＜PARAM name="Loop" value="true"＞
　　　＜PARAM name="ShowControls" value="true"＞
　　　＜/OBJECT＞＜/TBODY＞

　(2)-1 ＜object 〜, http://･･･ ＞ﾀｸﾞによる操作ﾊﾟﾈﾙ　（曲は、「ﾍﾞﾆｽの愛」.wma ）
　　　※Windows Edge(ﾌﾞﾗｳｻﾞ)では表示できません。Windows IE V.11へ移行し、視聴ください。



　(2)-2 ＜object〜 , ﾎﾙﾀﾞｰ･ﾌｧｲﾙ指定 ＞ﾀｸﾞによる操作ﾊﾟﾈﾙ　（曲は、「鉄道員のﾃｰﾏ」.wma ）
　　　※Windows Edge(ﾌﾞﾗｳｻﾞ)では表示できません。Windows IE V.11へ移行し、視聴ください。　　　



　(3)＜embed〜＞ﾀｸﾞ


　　＜embed src="****************.mp3" width="128" height="64" autostart="false"＞
　　　※1　"***********.mp3"は、BGM-urlです。
　　　※2　操作ﾊﾞﾈﾙを隠すときは、hidden="true"。
　　　※3　操作ﾊﾞﾈﾙの縦･横幅は、width(height)" "のpx数字で指定する。
　　　※4　自動的に再生(autostart･true)し、繰り返す(loop･true）か、操作ﾊﾟﾈﾙのｽﾀｰﾄ･ﾎﾞﾀﾝを
　　　　　 押さないと再生しないし、繰り返さない(false）か。

　(4) audioﾀｸﾞ（＜audio controls＞ ＜source src="******.mp3"＞＜/audio＞）による操作ﾊﾟﾈﾙ。
　　　曲は、｢故郷｣.mp3 ）
　　　※Windows IEでは表示できません。Windows Edgeへ移行し、視聴ください。





　(5)BGM配信･････「musicﾎｰﾙ」へJump　　⇒　（2013.7.15追加 2014.6.13変更 2022.5.23変更)


23. ﾎｰﾑﾍﾟｰｼﾞでｽﾗｲﾄﾞｼｮｰを観る(その1)

　一定秒数毎に表示画像が切り替わる「ｲﾝﾀｰﾈｯﾄ･ｽﾗｲﾄﾞｼｮｰ」の動作確認ができました。('13.7.1 Up)

　＜htmlﾀｸﾞ示例＞

　　　　「　javaScriptで自動的に替わるｽﾗｲﾄﾞｼｮｰ　」　記事へJump　⇒

　＜表示例＞

　　　　(1)「開始」ﾎﾞﾀﾝ、「停止」ﾎﾞﾀﾝは写真の下にあります。

　　　　(2)表紙を入れ、6枚。表示間隔：3秒。写真ｻｲｽﾞ：800×600px。

　　　　　　　※ BGMﾌﾟﾚｰﾔｰ（Top画面のﾌﾟﾚｲﾔｰ（曲：「太陽がいっぱい」Trumpet：ﾆﾆ･ﾛｯｿ） か前記ﾌﾟﾚｰﾔｰ）の"ON"で、ﾐｭｰｼﾞｯｸ付きのｽﾗｲﾄﾞｼｮｰが楽しめます。

　　　　　　　※ 「ﾍﾞﾀ貼り写真館」 (19)、 (20) に紫陽花のｽﾗｲﾄﾞｼｮｰを 載せています。('13.7.15追記）









24. ﾎｰﾑﾍﾟｰｼﾞの角（ｶﾄﾞ）を丸める（'13.7.8 Up)

　「枠線の角を丸める」記事へJump　⇒

　ｻﾝﾌﾟﾙ･ｿｰｽを「.css」ｼｰﾄと「.html」ｼｰﾄに貼り付け･修正し、www(IE)上で「四つの丸角」が 確認出来ました。

　＜.cssｼｰﾄ記述例＞


　　【　div.kadomaru { /* ▼CSS3 */
　　　　border-top-left-radius: 20px; /* 左上 */ border-top-right-radius: 20px; /* 右上 */>/* ▼Saf ari,Chrome */

　　-webkit-border-top-left-radius: 20px; /* 左上 */-webkit-border-top-right-radius: 20px; /* 右上 */ /* ▼Firefox */Br>
　 -moz-border-radius-topleft: 20px; /* 左上 */ -moz-border-radius-topright: 20px; /* 右上 */

　　/* ▼共通装飾 */
　　border: 3px green solid; /* 枠線の装飾 */ background-color: #ccffcc; /* 背景色 */}　】

　　(備考)下部の角を変更したい場合は、topを「bottom」に変更したﾀｸﾞ文を追加する。('13.9.7 修正)



　＜htmlﾀｸﾞ示例＞



　　　＜div class="kadomaru"＞＜p＞（例）隅を丸くする・・・・・＜/p＞



　＜表示例＞


　 　本ﾎｰﾑﾍﾟｰｼﾞ上部左右の角を丸に変更(on) ： ('13.7.10 追記）







25. 画像ｸﾘｯｸで画像を入れ替える

　「画像ｸﾘｯｸで画像を入れ替える」記事へJump　⇒

　ｻﾝﾌﾟﾙ･ｿｰｽを「.html」ｼｰﾄに貼り付け･修正し、www(IE)上で「写真入れ替え」が確認出来ました。

　＜表示例＞



　※1 下の写真(200×150px)･･･全部で15枚。

　※2 画像をクリックすると、画像が入れ替わります。('13.7.20 Up)




26. ﾊﾟｽﾜｰﾄﾞを入力して、ﾘﾝｸ先に飛ぶ　 ( 2014.6.13 一部修正)

　「ﾘﾝｸ先に飛ぶ際の、ﾊﾟｽﾜｰﾄﾞ設定(ｱｸｾｽ制限)について」記事へJump 　⇒

　「ﾊﾟｽﾜｰﾄﾞ認証(ｱｸｾｽ制限)」の確認がとれました。('13.8.26 Up)

　＜ﾊﾟｽﾜｰﾄﾞ設定html＞

　　　�@htmlﾀｸﾞ

　　　　＜script type="text/javascript"＞＜!--function checkpw(){ var pswd = prompt("パスワードを入力して下さい:,"p/w(6桁の英数小文字)を入力して下さい。");
　　　　　location.href = pswd + ".html";} //--＞＜/script＞

　　　　＜form＞＜input type="button" value="(普通)通信" onClick="checkpw();"＞＜/form＞

　　　�A事前準備：ﾊﾟｽﾜｰﾄﾞ認証用のﾌｧｲﾙ（事例では、「a12345.html」ﾌｧｲﾙ）を作成しておく


　＜表示例＞　（下のﾎﾞﾀﾝ･ｸﾘｯｸで、「ﾊﾟｽﾜｰﾄﾞ投入」ｳｨｻﾞｰﾄﾞが開きます。ﾊﾟｽﾜｰﾄﾞは、a12345です。）



27. ﾘﾝｸ先文字の下線を消す

　・「ﾘﾝｸ下線を消すには」記事へJump　⇒

　・ﾘﾝｸ･ﾀｸﾞ文（　＜a　href="http:･･･････/"＞　）に「style="text-decoration:none"」を 追加するだけで、ﾘﾝｸ下線を消すことが出来ます。

　

　　＜表示例　（'13.9.23 Up)＞

　　　「下線」有り 　⇒　「下線」無し



28. ﾎｰﾑﾍﾟｰｼﾞの文字をｸﾘｯｸし、色を変える

　・「ﾏｳｽでｸﾘｯｸで変化&応用編」記事へJump　 ⇒

　・fontﾀｸﾞ（　＜font color="#最初の色"＞　）に「onclic="this.color=#ｸﾘｯｸ後の色"」 を追加するだけで、ｸﾘｯｸ後の文字色を変えることが出来ます。

　※下の事例　　最初の色：midiumblue、ｸﾘｯｸ後の色No.：#dc143c

　＜表示例　（'13.9.23 Up)＞

　　Web上の文字　（ｶﾞｲﾄﾞ部1(近郊)）をｸﾘｯｸすると色が代わります。

　　　ｶﾞｲﾄﾞ部1(近郊)



29. ﾎｰﾑﾍﾟｰｼﾞでｽﾗｲﾄﾞｼｮｰを観る(その2)

　一定秒数毎に表示画像が「ふわっ」と切り替わる「ｲﾝﾀｰﾈｯﾄ･ｽﾗｲﾄﾞｼｮｰ」の動作確認ができました。('13.10. 4 Up)

　＜htmlﾀｸﾞ示例＞

　　　　「　javaScriptで自動的に「ふわっと」切り替わるｽﾗｲﾄﾞｼｮｰ　」　記事へJump　⇒

　＜表示例＞

　　　　※1 表紙を入れ、10枚。表示間隔：3秒。写真ｻｲｽﾞ：800×600px。(画像が止まっている場合は、 上部のﾂｰﾙﾊﾞｰ「更新」ﾎﾞﾀﾝを押して下さい。)

　　　　※2 BGMﾌﾟﾚｰﾔｰ（Top画面のﾒﾃﾞｨｱ･ﾌﾟﾚｲﾔｰ（曲：「太陽がいっぱい」Trumpet：ﾆﾆ･ﾛｯｿ） の"start"で、ﾐｭｰｼﾞｯｸ付きのｽﾗｲﾄﾞｼｮｰが楽しめます。

　　　　※3 「ﾍﾞﾀ貼り写真館」 (21)、 に紫陽花が「ふわっと」切り替わるｽﾗｲﾄﾞｼｮｰを載せています。