リンクをクリックすると周囲が暗くなって画像がバ～ンと大きく表示される演出はカッコイイ。
きっとどんなつたない絵でもかっこよく見せてくれる。はずだ。
というわけで『Lightbox』導入。

LightboxはJavaScriptだ。

LightboxよりSlimboxのほうが新しいみたいだけど、Slimboxに必要なjQueryがどれDLしたらいいのかよくわからない。
Lightboxの最新版をDLしたらjQueryも含まれているようなので、こっちからはじめてみることにする。

さて、「Lightbox　設置」でググること数十件・・・

header部分に入れるコードをコピペしてaタグにrelを追記してもうごかない。

ルートやソースを疑って半日・・・

【参考】lightbox（ライトボックス）のバージョン2.51からPrototypeじゃなくてjQueryになったから設置の時注意

５年前くらい前の記事が多かったからコード自体が違っていたらしい。
これでなんとかLightbox的にうごいた。
しかし、CLOSEのバッテン画像がリンクきれてて表示されない。

【参考】lightboxのcloseボタンがうまく出ない場合の確認

絶対リンクをはってしのぐ。

これで一応はOKだけど、周囲が真っ黒なのが納得いかない。
半透明のほうがカッコイイではないか。

jsファイルで透明度を0～1の値の間で変更できるというのだが、そんな記述は見当たらないのでまた古い記事かと深追いせず。

【参考】lightboxの背景透過がIEだと効かない

絶対リンクで半透明png背景画像をcssに設定した。

なかなかイイ感じになった。
ひとまず満足よ。