長文になるので気合いを入れていきましょう！

●STEP1
それでは早速必要なものをダウンロードしに行きます。
ダウンロードするものは Lightbox 2 です。海外サイトなので英語ですが Download（ダウンロード）と Lightbox 2 が分かれば簡単にダウンロードできると思います。『いただきます』と言う感謝の気持ちを込めてダウンロードさせて頂きましょう＾＾
念のため、キャプチャーを貼っておきます。ご参考にしてください。

※ Lightbox のバージョンやキャプチャー画像は２００７年５月のものです。バージョンの更新やサイトのリニューアルでキャプチャーや説明と異なる場合があります。

Lightbox 2 ダウンロードはこちら>>>

ダウンロードが完了しましたら、ファイルが Zip（ジップ）形式で圧縮されているので解凍しましょう。
解凍に成功したら STEP2 へお進みください。

上の説明の意味が分からない方は、「zipとは」で検索すればなんとなく何のことか分かると思います。
解凍できない方は「zip　解凍　ソフト」で検索すればフリーソフト（無料で使えるソフトウェア）が見つかると思います。 頑張ってゲットしてください＾＾
解凍に成功すると「 lightbox ●●」という名前のフォルダが作成されます。
※●●にはバージョンの数字が入ります。

●STEP2
次に、解凍されたフォルダの中身を確認しましょう。

• index.html（ファイル）
• css（フォルダ）
• images（フォルダ）
• js（フォルダ）

FC2ブログで Lightbox を使うには、ダウンロードしたファイルのソース（内容）を数カ所変更します。ソースの変更にはテキストエディタなどが必要になります。

上の説明で不安の無い方、多少なりとも HTML などに触れたことのある方は下のSTEP3へお進みください。

それ以外の方は当ブログのカスタマイズの基礎知識にある HTML の基礎知識と CSS の基礎知識を１度ご覧頂いたほうが、今後の説明に戸惑うことが少なくなるかも知れません。

●STEP3
それではまず、解凍されたフォルダの中の css フォルダの中にある lightbox.css を開いてください。css ファイルは１つだけです。もしも、２つ以上のファイルがある方はこれから下の説明では対応できない可能性があります。
※Web ブラウザで開いて閲覧すると言う意味ではなく、テキストエディタなど css ファイルを編集できるソフトウェアで開くと言う意味です。

44 行目付近の ID セレクタ「 #prevLink, #nextLink 」を見つけてください。
見つかりましたら、下の赤い部分を削除してください。

background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */

削除すると下のようになります。 ※私はいつものくせで「 "" 」で画像名を囲っておきました。

background: transparent url("blank.gif") no-repeat; /* Trick IE into showing hover */

次に 54 行目付近の ID セレクタ「 #prevLink:hover, #prevLink:visited:hover 」と、おそらくその下の行にある「 #nextLink:hover, #nextLink:visited:hover 」を見つけてください。
見つかりましたら、先ほどと同じように下の赤い部分を削除（２カ所）してください。

background: url(../images/prevlabel.gif) left 15% no-repeat;
background: url(../images/nextlabel.gif) right 15% no-repeat;

削除すると下のようになります。

background: url("prevlabel.gif") left 15% no-repeat;
background: url("nextlabel.gif") right 15% no-repeat;

削除（３カ所）が済みましたら、ファイルを保存し閉じてください。

●STEP4
続いて解凍したフォルダの中にある js フォルダを開いてください。

• effects.js
• lightbox.js
• prototype.js
• scriptaculous.js

上記した４つの js ファイルがあることを確認してください。もしも、４つ以外でしたり、ファイル名が異なるとこれから下の説明では対応できない可能性があります。 その js ファイルの中から「 lightbox.js 」を開きます。

64 行目付近にある変数「 var fileLoadingImage 」を見つけてください。エディタの検索機能を使うと簡単に見つけられると思います。 その変数の下に変数「 var fileBottomNavCloseImage 」も見つかると思います。
見つかりましたら下の赤い部分「 images 」を２カ所「 file 」に置換（書き換え）してください。

var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";

置換後は下のようになります。

var fileLoadingImage = "file/loading.gif";
var fileBottomNavCloseImage = "file/closelabel.gif";

置換（２カ所）が済みましたらファイルを保存し閉じてください。ファイルへの編集作業は以上です。

●STEP5
次に必要なファイルのアップロードを行います。
FC2ブログへログインし、ログイン画面の左メニューにあるツールの項目から「ファイルアップロード」をクリックし下記のファイルを全てアップロードしてください。

• lightbox.css
• js フォルダの中にある js ファイル４ファイル
• images フォルダの中にある gif や jpg 全部

※もし js ファイルの「 prototype.js 」を他の機能拡張でお使いの方は、prototype.js ファイルを開きバージョンを確認し、これからアップロードしようとしている prototype.js より、既存の prototype.js の方がバージョンが新しいようでしたらアップロードの必要はありません。
お使いのテンプレートによっては HTML の head 内で既に読み込んでいる可能性もありますのでご確認ください。 ちなみにバージョンはソースの１番上に書かれているのですぐに分かると思います。
※当ブログで配布しているテンプレートの中には既に上で記述したように head 内で prototype.js を読み込んでいるものがあります。

●STEP6
必要なファイルのアップロードが完了しましたら、次に HTML の head 内で下記のソースを使い、js ファイルと css ファイルを読み込みます。

<script type="text/javascript" charset="EUC-JP" src="http://★.fc2.com/★/★/file/prototype.js"></script>
<script type="text/javascript" charset="EUC-JP" src="http://★.fc2.com/★/★/file/scriptaculous.js? load=effects"></script>
<script type="text/javascript" charset="EUC-JP" src="http://★.fc2.com/★/★/file/lightbox.js"></script>
<link rel="stylesheet" href="http://★.fc2.com/★/★/file/lightbox.css" type="text/css" media="screen,tv" charset="EUC-JP"></link>

★部分はお使いのサーバーなどにより個々に変更する箇所です。先ほどアップロードしたファイルをアップロード画面で表示すると URL が簡単に確認できます。
上の必要なソース（URLの部分、つまり src 属性や href 属性の値）を正しく変更し、全てのソースをコピーします。

●STEP7
ログイン画面左メニューの環境設定の項目から「テンプレートの設定」をクリックし、現在設定されている（使用中）PC テンプレートの「編集」をクリックしてください。
※念のためテンプレートを複製しバックアップを取っておくことをお勧めします。

テンプレートの編集画面にある HTML 編集エリアから head の終了タグを探し、その head の終了タグの上に STEP6 でコピーしたソースをペーストします。

…（省略）…
<script type="text/javascript" charset="EUC-JP" src="http://blog-imgs-27.fc2.com/h/a/j/hajimetedesign/prototype.js"></script>
<script type="text/javascript" charset="EUC-JP" src="http://blog-imgs-27.fc2.com/h/a/j/hajimetedesign/scriptaculous.js? load=effects"></script>
<script type="text/javascript" charset="EUC-JP" src="http://blog-imgs-27.fc2.com/h/a/j/hajimetedesign/lightbox.js"></script>
<link rel="stylesheet" href="http://blog-imgs-27.fc2.com/h/a/j/hajimetedesign/lightbox.css" type="text/css" media="screen,tv" charset="EUC-JP"></link>
</head>

上のソースのように </head> タグの上に全てペーストします。
※ STEP5 でも記述しましたが、「 prototype.js 」が既に head 内で読み込まれていないか確認しましょう。また、ペーストする時に他のソースを消してしまわないように充分注意してください。

ペーストが済みましたらテンプレート編集画面の「更新」ボタンをクリックし、ソースを保存すれば「写真・画像を格好良く見せる」ための準備は全て完了です。次の STEP ではいよいよ格好良く見せつけるための JavaScript の適用方法を説明いたします！

●STEP8
それでは実際にサムネイルに格好良い動きを適用する方法を説明します。
まず、エントリー（記事）で使いたい画像データを「 STEP5 」と同じ要領でアップロードします。そして、アップロードした画像から「記事を書く（サムネイルを使用）」を選びクリック。
そうしますと「新しく記事を書く」画面が表示され、いつも記事の内容を書き込んでいる部分にサムネイルを表示させるためのソースが貼られています。

<a href="http://blog-imgs-27.fc2.com/h/a/j/hajimetedesign/hajime.jpg" target="_blank"><img src="http://blog-imgs-27.fc2.com/h/a/j/hajimetedesign/hajimes.jpg" alt="hajime" border="0"></a><br clear="all">

上のソースの赤い部分 a（アンカー）タグのターゲット属性（ target="_blank" ）を削除し

rel="lightbox" title="写真の下に表示させる文字"

替わりに上のソースを a タグに貼ります。
※ a タグに貼る際は属性と属性の間に半角スペースを空けるように注意してください。
※ title 属性の中身「写真の下に表示させる文字」はお好きな言葉に変更してください。省略も可能です。

ソースの変更が済みましたら、いつも通り記事を保存し、ご自身のブログで保存した記事のサムネイルをクリックしてみてください。格好良くいくはずです。

●STEP9
次にスライドショーのように順々に写真・画像データを格好良く見せる方法です。
まず、格好良く見せたい画像を任意の数（順々に見せたい画像全部）アップロードします。
※今回は３枚の画像をアップロードしたことを前提として説明を進めます。
画像のアップロードが完了しましたら、アップロードした画像から「記事を書く（サムネイルを使用）」を選びクリック。
そうしますと「新しく記事を書く」画面が表示され、いつも記事の内容を書き込んでいる部分にサムネイルを表示させるためのソースが貼られています。使いたい画像のソースを１つの記事にまとめます。

<a href="http://blog-imgs-27.fc2.com/h/a/j/hajimetedesign/sample1.jpg" target="_blank"><img src="http://blog-imgs-27.fc2.com/h/a/j/hajimetedesign/sample1.jpg" alt="sample1" border="0"></a><br clear="all">
<a href="http://blog-imgs-27.fc2.com/h/a/j/hajimetedesign/sample2.jpg" target="_blank"><img src="http://blog-imgs-27.fc2.com/h/a/j/hajimetedesign/sample2.jpg" alt="sample2" border="0"></a><br clear="all">
<a href="http://blog-imgs-27.fc2.com/h/a/j/hajimetedesign/sample3.jpg" target="_blank"><img src="http://blog-imgs-27.fc2.com/h/a/j/hajimetedesign/sample3.jpg" alt="sample3" border="0"></a><br clear="all">

上のソースの赤い部分 a（アンカー）タグのターゲット属性（ target="_blank" ）を削除し

rel="lightbox[同じ名前]" title="写真の下に表示させる文字"

上のソースをそれぞれの a タグの属性として貼ります。lightbox[同じ名前]は半角の英数字とアンダースコアやハイフンなどで、それぞれ同じ名前になるようにします。
例）rel="lightbox[hajime_sample]"

ソースの変更が済みましたら、いつも通り記事を保存しご自身のブログで保存した記事のサムネイルをクリックしてみてください。またしても格好良くいくはずです。画像の上にマウスカーソルを乗せると「 NEXT 」や「 PREV 」と表示されるので、その状態で画面上をクリックすると画像が入れ替わります。また、キーボードの「 N 」キーで次の画像「 P 」キーで前の画像も見られます。

いかがでしたでしょうか？
FC2ブログ運営者で写真や画像を扱う方は、格好良く見せつけてやってください＾＾
また、サムネイルの写真部分のソースをテキストなどにしてもお洒落なことができそうですよね。たとえば、「当ブログについて」なんて感じのテキストリンクで格好良い画像付きの説明を表示させたり。アイデア次第で使い道も色々あると思いますので、お時間のある方は是非挑戦してみてください。

最後に
Mac の Firefox だと、Close ボタンをクリックした時にスクロールバーが表示され、画面が気持ち良く閉じないことに気がつきました。 言葉で説明するのは難しいのですが、巧くクリックしないと１発では閉じない感じです。気になる方は、「 lightbox.css 」を開き ID セレクタ「 #imageDataContainer 」を探し、その中のプロパティ「 overflow:auto; 」を「 overflow:hidden; 」にして再度 css ファイルをアップロードすると、取り敢えず解決します。
しかし、私のまったくの「勘」に頼った解決方法ですので、極端に画像が大きいものや、古い Web ブラウザなどでは何かしらの不具合が発生するかも知れません。私は上記のように CSS 内を「変更しましたよ」と言う報告だと思ってください。
しかし、Mac の Firefox でも気持ち良く Close ボタンで閉じるようになりましたし、今のところ他のブラウザ（ Win や Mac のモダンブラウザ）でも問題ありません。