第11回ホームページ勉強会

22日目　西那須野公民館利用自粛要請により ⇒ 自宅学習

講師：三宅　節雄

今回の勉強会は皆さんのホームページに並べたサムネイル(小さい)写真にマウスを乗せると拡大表示する、PhotoChgで、数項目にわたって表示する設定です。

　この勉強は第10回HP勉強会では2020年の1月早々に実施しました、今回8月6日に西那須野公民館から私たちの勉強会の開催についても、8月中の利用自粛要請がありました。

　今回の勉強会の内容は、新しい知識を特に必要とする訳でもなく、写真を20枚ほど準備頂いて、その写真軍の説明を記載して頂くものです。

　定例会という勉強会は開催できませんで、今回の解説資料および設定事例を御覧頂き、皆さんは自宅学習で、作成事例も御覧になり作成してみて下さい。ｆｆｆｔｐでのアップまでが宿題です。

　皆さんのでき具合は、私ができるだけ確認してます

直ぐ返事できるかは疑問ですが、設定に関するご質問は常にお受けしています。できるだけ回答いたします。

１．作成事例(サンプル)
２．事前準備
３．圧縮ファイルのダウンロード
４．写真切替アプリの使い方

１．作成事例
　　作成事例はここをクリックします。

２．事前準備

　切替えて拡大表示したい写真を540×405ピクセルで数段分で更に３～5枚準備し、01-1.jpg～01-5.jpg、02-1.jpg～02-5.jpgの様な名前を付けて、数段分をPhotoChgのimgというフォルダーの中に保保存しておいて下さい。

　サンプルは4段で、格段に5枚の写真を使用する設定です。合計20枚です。

３．圧縮ファイルのダウンロード

　4段の写真5枚用のアプリ本体、cssファイルおよびサンプル写真は下記からダウンロードします。
(第10回HP勉強会に参加していた方は前回の物を使用しても構いません。)

　PhotoChg.zipはここからダウンロードして下さい。

　ダウンロードしたファイル｢PhotoChg.zip｣は圧縮されています。展開するにはファイル①PhotoChg.zipをクリックし、②展開タブから③全て展開をクリックします。

デフォルトで展開すると圧縮ファイルと同じフォルダー内にPhotoChgというフォルダーを作成し、その中に
『img』という写真のフォルダー、『page.css』と『PhotoChg.html』というファイルが作成されます。

展開されたフォルダーPhotoChgはMy-HPの中にフォルダー毎入れて下さい。

４．写真切替アプリの使い方

　以下の手順で作業を進めます。
　１．PhotoChgフォルダーの中のPhotoChg.htmlをホームページビルダーで開きます
　２．全体説明の内容はページ編集で編集できますが、ページ編集の画面では、各グループの写真の内容の設定が
　　　一部表示されません。全体説明の内容を皆さんのデータ用に変更します。

３．HTMLソースに切り替えると、下記に記載の様に、写真グループ毎にからの
　　　設定が表示されます。
　　　写真の名前をサンプルと同じ01-1.jpg～04-5.jpgにすれば見出しとコメント欄以外はそのまま使えます。
　　　下記ソースの深緑文字と赤文字で示した部分だけ自分用に変える。(これが一番簡単です)
　４．グループを追加する場合には
　　　 function myChgPic4(myPicURL){
　　　　 document.images["myBigImage5"].src = myPicURL;}を追加しのグループを追加します
　　　
　５．上書き保存します

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=yes,maximum-scale=2">
<link rel="stylesheet" href="page.css" type="text/css">
<title>Title</title>
<meta name="description" content="">
<script language="JavaScript"></script>

</head>
<body>
<div class="main">
<div class="main-title pure-g">
<div class="mt-white pure-u-1 pure-u-md-4-5">
<table width="844">
<tbody>
<tr>
<td width="210"><h2>私の思い出の山</h2></td>
<td align="right" width="624"><a href="../index.html" target="_top"><img src="img/Back.jpg" width="92" height="23" border="0"></a></td>
</tr>
</tbody>
</table>
</div>
<div class="mt-pink pure-u-1 pure-u-md-4-5">約45年前には南アルプスにライチョウを見たくて北岳～農鳥岳を縦走したり、富士山登山も実施しました。<br>
北岳へは新宿23:55発の超有名なギューギュー詰めの夜行列車で行きました。<br>
<br>
退職後に元会社の同僚と､約45年ぶりにトレッキングしました。初めて登った山は男体山で、1人で初めて<br>
登った山は日光白根山です。<br>
<br>
以下は私のお気に入りの山の一例です。</div>
</div>
<hr>


<div class="mainbox mainbox-sm">
<div class="mainpic mainpic-sm">
<img src="img/01-1.jpg" name="myBigImage1"></div>
<div class="maintitle maintitle-sm">
<p>日光白根山</p></div>
<div class="maint maint-sm">
<p>1回目の退職後2009年9月の、シルバーウイーク<br>
(秋の5連休)に行って来ました。<br>
左から<br>
①ロープウェイ駅付近<br>
②奥白根山神社<br>
③日光白根山山頂<br>
④山頂から眺めた富士山<br>
⑤山頂から眺めた中禅寺湖</p></div>
<div class="mainminipic mainminipic-sm">
<a href="javascript:void(0)" onmouseover="myChgPic1('img/01-1.jpg')"><img src="img/01-1.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic1('img/01-2.jpg')"><img src="img/01-2.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic1('img/01-3.jpg')"><img src="img/01-3.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic1('img/01-4.jpg')"><img src="img/01-4.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic1('img/01-5.jpg')"><img src="img/01-5.jpg"></a>
</div></div>


<div class="mainbox mainbox-sm">
<div class="mainpic mainpic-sm">
<img src="img/02-1.jpg" name="myBigImage2"></div>
<div class="maintitle maintitle-sm">
<p>安達太良山</p></div>
<div class="maint maint-sm">
<p>安達太良山に4回登りましたが、3回は安達太良山ロープウェーを使用して楽に登りました。ロープウェー頂上駅から少し進み、登山口方面に2-3分戻ると智恵子抄で有名な本当の空が見える場所に着きます
<br>
①安達太良山ロープウェー山麓駅 <br>
②必ず寄る智恵子抄の空の下 <br>
③これが｢ほんとの空｣です <br>
④頂上付近だけが盛り上がった独特の安達太良山山頂<br>
⑤安達太良山山頂の祠</p></div>
<div class="mainminipic mainminipic-sm">
<a href="javascript:void(0)" onmouseover="myChgPic2('img/02-1.jpg')"><img src="img/02-1.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic2('img/02-2.jpg')"><img src="img/02-2.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic2('img/02-3.jpg')"><img src="img/02-3.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic2('img/02-4.jpg')"><img src="img/02-4.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic2('img/02-5.jpg')"><img src="img/02-5.jpg"></a>
</div></div>


<div class="mainbox mainbox-sm">
<div class="mainpic mainpic-sm">
<img src="img/03-1.jpg" name="myBigImage3"></div>
<div class="maintitle maintitle-sm">
<p>男体山</p></div>
<div class="maint maint-sm">
<p>元会社同僚と裏男体林道を通り、志津避難小屋付近から登りました。<br>
8合目付近までは谷筋を通るために全く展望が利きませんが、そこを超えると最高です。<br>
①志津越付近の男体山登山口<br>
②こんな傾斜の場所もあります<br>
③9合目付近から眺めた大真名子山と女峰山<br>
④ 先代の大剣<br>
   (2012年に破損、現在はSUS製に)<br>
⑤二荒山神社奥宮</p></div>
<a href="javascript:void(0)" onmouseover="myChgPic3('img/03-1.jpg')"><img src="img/03-1.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic3('img/03-2.jpg')"><img src="img/03-2.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic3('img/03-3.jpg')"><img src="img/03-3.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic3('img/03-4.jpg')"><img src="img/03-4.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic3('img/03-5.jpg')"><img src="img/03-5.jpg"></a>
</div></div>


<div class="mainbox mainbox-sm">
<div class="mainpic mainpic-sm">
<img src="img/04-1.jpg" name="myBigImage4"></div>
<div class="maintitle maintitle-sm">
<p>早池峰山</p></div>
<div class="maint maint-sm">
<p>2011年の大震災後の7月に百名山で高山植物の<br>
花が咲き乱れる｢早池峰山｣へ行ってきました。<br>
①登山前日に薬師岳から眺めた｢早池峰山｣<br>
②小田越の｢早池峰山登山口｣<br>
③｢タカネナデシコ｣と｢ハヤチネウスユキソウ｣<br>
④山頂直前のほぼ垂直な｢2段梯子の上段｣<br>
⑤早池峰山山頂</p></div>
<div class="mainminipic mainminipic-sm">
<a href="javascript:void(0)" onmouseover="myChgPic4('img/04-1.jpg')"><img src="img/04-1.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic4('img/04-2.jpg')"><img src="img/04-2.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic4('img/04-3.jpg')"><img src="img/04-3.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic4('img/04-4.jpg')"><img src="img/04-4.jpg"></a>
<a href="javascript:void(0)" onmouseover="myChgPic4('img/04-5.jpg')"><img src="img/04-5.jpg"></a>
</div></div>


<div class="pagebt pure-g">
<div class="pline pure-u-1">
<hr>
<a href="#top"> <font SIZE="3">ページトップへ戻る</font></a></div>
</div></div>
</body>
</html>

資料作成：三宅