第11回ホームページ勉強会 第69日目2023年07月27日 　今回の勉強は、勉強会に参加の方から過去に質問がありました、5月25日の全画面スライドショー１と6月22日の全画面スライドショー2に、戻るなどのリンクボタンやBGMボタンを画像の上に乗せて付加する方法を、勉強してみましょう。 １：事前準備 ２：作成結果 ３：設定の詳細説明 ４：ボタン風白抜き文字 １：事前準備 　『全画面スライドショー1(64日目：5/24)のFade In Out形』と『全画面スライドショー2(66日目：6/22)の画面が切り替わるスライドショー』が未完成の方は、完成させておいて下さい。 　戻るボタンやBGM音源（mp3)も準備しておいて下さい。 ２：作成結果 　下図の様な表示になり、下記画像をクリックすると実施例が起動します。 　全画面スライドショー1 　 　全画面スライドショー2 　 ３：詳細説明 　表示画像上に表示させる手法は、全画面スライドショー1のポーズアイコンと再生アイコンの表示からヒントを得ました。 　全画面表示の状態で、表示した画像の上の指定した割合(%)の場所に表示させることができる様です。 　①まず、<style>と</style>間の｢-->｣の直前に、戻るアイコンやコメントを表示する場所を『label1』という名前で記載します。htmlとcssを独立させている場合は『style.css』を変更します。  　記　載　文  　内容：表示場所を指定 label1{ position:absolute;left:77%;bottom:3%; }  label1の表示場所：左から77%、下から3%  (左からの割合は各自状況に応じて調整) 　②</body>の直前に、下記の3行の『label1』の表示内容記載欄を追記します。 <label1> AAA </label1> 　③ページ編集でAAAの1つ目のAと２つ目のAの間にボタンを入れ、そのボタンが選択された状態になったら、戻り先のリンクを貼り、ボタンの前のAを消します。 　④残ったAAをBGMの挿入設定と置き換えます。 　⑤ここまでの操作で<label1></label1>内は、下記の様になります。  　記　載　文  　内　　容 <label1> <a href="main.html" target="_top"><img src="Data/back.gif" width="60" height="20" border="0" /></a> <audio id="audio" loop><source src="hanyu.mp3"></audio><font face="$ＪＳ明朝" size="+2" color="#0000ff">♪</font><font face="$ＪＳ明朝" color="#0000ff">埴生の宿 <input type="button" value="演奏" onclick="audio_play()" /> <input type="button" value="停止" onclick="audio_pause()" /></font> <script type="text/javascript"> function audio_play() {audio.play();} function audio_pause() {audio.pause();} </script> </label1>  label1の内容表示  戻るボタンを表示。戻り先にリンクを貼る。    BGM表示と｢演奏｣｢停止｣ボタンの表示  演奏曲は｢埴生の宿｣   （BGMの設定は､今勉強会でのケース4です） label1を閉じる ４：ボタン風白抜き文字 　上記の｢♪+曲名表示｣は背景写真によっては鮮明に表示されない場合があります。｢ｊｐｇ｣や｢gif｣で画像を作らなくても、ボタンの様な表示をさせる方法を調べてみました。 　｢css｣は｢cascading style sheets｣の略で、文字の見た目の設定に使用しますから、｢css｣を使った表示設定例は随分ありましたが、最終的にはできるだけ単純で表現できる方法を２つにたどり着きました。 　下記２列が代表的な設定例です。 ①<span style="padding:0px 7px; background:#00aa00; color:#ffffff;"><b>タイトル</b></span> ②<div style="display: inline-block; padding: 0px 7px; background: #00aa00 ; color: #ffffff;"><strong>タイトル</strong></div> ＊両設定の個別の意味  記　載　文  意　　味  padding:0px 7px;  文字列からのの上下と左右の枠幅  background: #00aa00;  文字列を囲んだ四角い枠内の塗りつぶし色  color: #ffffff;"  文字の色 尚、<b>と<strong>は見た目は太文字にしますが、<strong>は検索時にここが重要と指定するタグです 表示結果は で同じです。 画像上に重ねて表示したリンクボタンやBGM操作ボタン等は<label1>～</label1>に配置しますが、BGMのタイプ4でボタン風の白抜き文字は下記の青文字で表示した部分を、前記①か②に置き換えます。 <audio id="audio" loop><source src="hanyu.mp3"></audio><font face="$ＪＳ明朝" size="+2" color="#0000ff">♪</font><font face="$ＪＳ明朝" color="#0000ff">埴生の宿 <input type="button" value="演奏" onclick="audio_play()" /> <input type="button" value="停止" onclick="audio_pause()" /></font> <script type="text/javascript"> function audio_play() {audio.play();} function audio_pause() {audio.pause();} </script> 　①、②共に同じ様に動作しますが、今回の例題では①を採用します。 　<span style="padding:0px 7px; background:#00aa00; color:#ffffff;"><b>♪埴生の宿</b></span> 　　　　↑ 　　　　 ┗━━━数文字分空ける 　</audio>と<input type･･･>の間に①の<span type･･･>～ </span>を入れますが、<audio id･･･>の前に全角スペースを好みにより数文字入れます。 　以上の記載内容の追加で、全画面表示スライドショーの画像上へのリンクアイコンやBGMボタンを下図のように配置ができます。 BGM挿入のタイプ4でボタン風白抜き文字の採用例 (最初に全角スペースを入れています) 　　<audio id="audio" loop><source src="hanyu.mp3"></audio> <span style="padding:0px 7px; background:#00aa00; color:#ffffff;"><b>♪埴生の宿</b></span> <input type="button" value="演奏" onclick="audio_play()"> <input type="button" value="停止" onclick="audio_pause()"> <script type="text/javascript"> function audio_play() {audio.play();} function audio_pause() {audio.pause();} </script> 全画面スライドショー2に、BGM挿入のタイプ4でボタン風白抜き文字の採用例   2023-07-27　資料再々改訂：三宅　節雄