＊検索から来られた方へ
2014年5月に書いた新しい記事(rel属性指示不要改造あり)もご覧下さい。
後で見るときにわかりやすいよう独立記事にしました。
設置に関して、drk7.jpさんのこちらのページを参考にさせていただきました。
ありがとうございます。
では手順。
動作環境
ｂｌｏｇｎｐｌｕｓ ver.2.56
lightboxplus ver. 20060131
1、lightbox_plusをtoy boxさんのページからダウンロード。
解凍したら、sample/resourceフォルダ内のlightbox.cssを自分で好きなようにカスタマイズします。
私はオーバーレイは濃い方が好きなので、不透明度を0.8に変えてます。
#lightboxOverallView,
#overlay {
background-color： #000;
opacity： 0.8;
それと、ライトボックス自体の背景は白に。
これで写真の雰囲気が。
#lightbox {
background-color: #fff;
ぶろぐんのindex.phpと同じ階層へアップするか、全部コピーしてスキンのｃｓｓファイルに貼り付けます（場所はどこでもいいですが一番最後に付け足す形が無難でしょうか）。
ｃｓｓファイルを別にしたときは読み込みタグをスキンのhtmlファイルに書くことを忘れずに。
ぶろぐんスキンに合体させたのならlightbox.cssについての作業は終わり。
２、同梱のlightbox_plus.jsをそのまま使ってスキンhtmlファイルに呼び出しタグを書き、記事のa href属性にrel=”lightbox”加えてもいいのですが、いちいち入れるのが面倒ですよね。
そこで今回はhref 属性が画像の時にlightbox が機能するよう改造した、drkさんが作られたlightbox_plus.jsを使用します。 href 属性が画像の時にlightbox が機能するよう改造した、lightbox_plus.jsをこちらから入手。(ソースをコピーしてエディタに貼付け、ファイル名をightbox_plus.jsとして保存すればOK。)
エディタで、画像のある場所（「/MT/images/lightbox/」部分）を自分の環境(２でアップした場所)に合わせて書き換える。（相対パスでも、絶対パスでも可。）
書き換えたlightbox_plus.jsをindex.phpと同じ階層にアップ。
３、sample/resource内の画像ファイルすべてを適当な場所にアップ。
ぶろぐんのindex.phpと同じ階層か、files内か、skin/images内あたりがいいのではと思います。
４、スキンの
＜script language=”JavaScript” src=”lightbox_plus.js”＞＜/script＞
または
＜link rel=”stylesheet” href=”lightbox.css” type=”text/css”＞
＜script language=”JavaScript” src=”lightbox_plus.js”＞＜/script＞
これで終了。
ほとんどのブラウザに対応しているのでとても便利！
オススメです。