|
1. |
画像ソフトを使って、写真ファイルに名前をつけます。
ファイル名は統一した名前にして、末尾に連番をつけて保存するのがコツです。たとえば、ryokou01.jpg、ryokou02.jpg、ryokou03.jpg、ryokou04.jpgのようにすると、管理がしやすくてGoodです。日付を入れるのもいいですね。 |
|
2. |
画像ソフトを使って、保存した写真をそれぞれ小さくリサイズします。リサイズ（大きさの変更）もピクセル単位で同じ大きさに統一します。
この時、大きさと名前を統一するのがコツです。
たとえば、ryokou01s.jpg、ryokou02s.jpg、ryokou03s.jpg、ryokou04s.jpgのように、それぞれの末尾か先頭に「ｓ」をつけると、それぞれ同じ写真のサムネイル版だ、と一目でわかるので後々管理しやすくていいと思います。
名前順に並べ替えた時に、末尾に「ｓ」をつけると写真の順に並び、先頭に「ｓ」をつけるとサムネイルのファイルだけがまとまるので管理しやすいと思います。お好きな方にしてください。
|
|
3. |
アルバムを作ります。
たとえば、下記のようなソースを書きます。
（これは、せんむの実例ですが、あくまでも一例です）
IMGタグの部分は写真のファイル名にしてください。
リンク部分、その他のところも適当に変えてください。
「TOPへ戻る」というリンクを各ページにつけると親切です。（戻り先は任意に）
|
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=shift_jis">
<title>せんむのアルバム</title>
</head>
<body bgcolor="white"
text="black" link="blue"
vlink="purple" alink="red">
<p align="center">
<div align="center">
<table border="0" cellpadding="0"
cellspacing="0" width="350">
<tr>
<td width="443"
height="44" colspan="3"
bgcolor="#666666">
<p align="center">
<font size="5" color="white">筑波山 中腹林道一周サイクリング</font>
</td>
</tr>
<tr>
<td width="445"
height="195" colspan="3"
bgcolor="#666666">
<p align="center">
<img src="images/j_20020801_01s.jpg"
width="220" height="165"
border="0">
<br>
<font size="2" color="white">つくし湖畔</font>
</td>
</tr>
<tr>
<td width="97"
bgcolor="#666666">
<p align="center">
<a href="a_20020801_34.htm">
<font color="white">BACK</font>
</a>
<td width="242"
height="13" bgcolor="#666666">
<p align="center">
<a href="../../jitensha5.htm">
<font color="white">TOPへ戻る</font>
</a>
</td>
<td
width="96" bgcolor="#666666">
<p align="center">
<a href="a_20020801_02.htm">
<font color="white">NEXT</font>
</a>
</td>
</tr>
</table></div>
</body>
</html> |
|
|
|
|
|
4. |
作成したファイルのソースをコピーして、写真の枚数分だけHTMLファイルを新規に作ります。HTMLファイルの名前は拡張子のみを「.htm」にして写真と同じ名前にするか、連番にするとわかりやすくていいと思います。
ソースをコピーしてもいいですが、元のファイルを開いておいて「名前を付けて保存」で違う名前（連番部分のみ変える）にして保存すれば簡単です。 |
|
5. |
２番目のHTMLファイルのIMGタグ（写真の部分）のファイル名とリンク部分を変更します。連番にしてあれば、たとえば「01」を「02」に変えるだけですので簡単です。写真のコメントも入力しましょう。３番目以降のファイルも同様にします。
NEXTやBACKをまちがえないように注意しましょう。NEXTは次のファイル名、BACKは前のファイル名です。ファイル名を連番にしてあれば、連番部分のみ変更すればいいので楽です。
|
|
6. |
すべてのHTMLファイルと、画像（写真）ファイルをアップロードします。 |
|
7. |
出来上がりはこんな感じになります。
NEXT、BACKをクリックすると違う写真が表示されます。 |
|
8. |
サムネイル写真をクリックすると大きな写真へリンクするようにしてもいいと思います。レイアウトやデザインなど、工夫してみてください。 |
