俺が今までずーっと使いたいと思っていたHP作成のテクニックを発見した。
他のHPで何度かこのテクニックを使っているのを見るたびに、「これどうやってやるのかな？」と思い、ネット検索で探し回ったが見つからなかった。
それが、最近ふとしたきっかけで見つけてしまった！
ラッキーである。
そのテクニックを使って作成したページが下である。
クリックして確認してみて欲しい。
小さい写真をクリックするとページ上に拡大した写真を表示するテクニックの例
このテクニックを使いたいと言う人のために以下に説明したいと思う。
まず最初に
このサイトへ行く
次に下の図の部分をクリックしてダウンロードする。
ダウンロードしたら解凍して保存する。
解凍するにはソフトが必要だが無料のソフトがネット上で配布されているのでそれを利用する。俺は「+Lhaca」を使っている。
保存したら下の図のように３つのフォルダと１つのHTML documentがある。
cssフォルダの中は下の図のようになっている。
jsフォルダの中は下の図のようになっている。
imagesフォルダの中は下の図のようになっている。
次に、レンタルサーバに「css」「js」「images」の３つのフォルダを新規で作成する。（※もともと同じ名前のフォルダが存在する場合は新規で作成する必要はない）
次に、自分のHPのレンタルサーバに、ダウンロードした３つのフォルダをアップロードする。
「css」の中身を全て、レンタルサーバの「css」フォルダ内にアップロードする。
「js」の中身を全て、レンタルサーバの「js」フォルダ内にアップロードする。
「images」の中身を全て、レンタルサーバの「images」フォルダ内にアップロードする。
アップロードが完了したら次に、このテクニックを使うページ作りである。
まず、<head></head>を下記のようにするのだよ。
<head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
次に、<body></body>を下記のようにするのだよ。
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
上の「title="この中には写真の説明分を入れると拡大した画像の下に表示される"」
あるカテゴリーでまとまった複数の写真には下記のようにすると、「Image 1of10」のように表示され、「prev」「next」という文字がマウスオーバーで写真上に表示され、前の写真、次の写真への移動が可能となる。
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
