〜h1タグ用コメントをここに書きます。重要な箇所なので適切なワードを盛り込みましょう〜

Gallery A

Gallery B

設置方法（lightboxのダウンロード）

※以下解説はv2.04公開時のものです。現在の最新版(v2.05)とは若干設定方法が異なるかもしれないので予めご了承下さい。

海外の配布サイトからlightboxをダウンロードします。
ページ中ほどにある「DOWNLOAD」の下の「Lightbox v2.05」をクリックすればダウンロードが始まります。
ダウンロード後、解凍して、cssフォルダとjsフォルダのみを当サイトのテンプレート内にコピー。

続いて、lightboxを使うページのhtmlソース側を開き、以下の5行を追加します。
<script type="text/javascript" src="js/script.js"></script> <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>の上の行にでも追加しましょう。

これで下準備は完成です。

展示用画像を準備しましょう

小さな写真と大きな写真をセットで準備します。
小さな写真は上記のサムネイル画像として使い、大きな写真はサムネイル画像をクリックした時の画像となります。
上記の場合、小さな画像はタテヨコ100pxにしています。段落タグにclass指定で「gallery」とすれば写真のフチの線や写真間の余白などが自動設定されます。
html側の例だと、

になります。（画像タグについてはこの下から説明をしています）

写真は大きな写真への通常のリンク設定でOKですが、rel属性に「lightbox[CategoryA]」と指定して下さい。
html側の例だと以下のようになります。（展示用写真はimagesフォルダ内のphotoフォルダに入れていますが他でも構いません）

「CategoryA」は他のワードでも構いません。「CategoryA」とある画像同士は、画像展開時に写真の上にカーソルを乗せると次画像へのリンクが出てきます。

ご利用の際の注意事項

lightboxは海外のサイトが公開しているもので、当サイトでは不具合の保証や利用方法のサポートは一切行っておりません。

lightboxはjavascriptとcssによって作られておりますので、javascriptやcssを無効にしている場合は意図通りの効果は得られません。

また、拡大写真にあまり大きすぎるものを準備するとレイアウトが崩れるようなのでほどほどにしましょう。

titleタグによってキャプションが入れられるようですが、javascriptを無効にした時にリンクが正常に機能しなかったのでここでは紹介しておりません。

lightboxに関する質問は当方では受け付けておりませんので、外部の紹介サイトなどを検索してみて下さい。