Lightbox2の写真表示でフレームが表示されてしまうとき

WordpressのイメージエフェクトプラグインとしてLightbox2は実に美しく使いやすい。
しかしあるサイトにこのLightbox2プラグインを使用した際に、closeボタンの下にフレームが出てきてしまう現象が起きました。

せっかくのLightboxが実にかっこわるい。

firebugで調べてみると、リセット用CSSで設定したdiv, img要素のwidth:100%が干渉していることに気づきました。
修正するとすれば、Lightbox側のCSSの変更か、reset.css等内部CSSの変更です。
多くの場合、ページ用に自分で作ったCSSを変更する方が良いでしょう。
しかしLightbox2自体の持つCSSを修正することにしました。
下記はその際の対処法です。

Lightbox2内のCSSを修正する
挿入イメージ、そして下部の写真プロフィールとcloseボタンを囲むボックスにwidth:autoの設定をします。
設定箇所は２カ所です。

場所：wp-content/plugins/lightbox-2/Themes/Black（各背景色）/lightbox.css
・挿入イメージを囲むボックスを変更する
before:
#stimuli_imageContainer {
padding: 10px;
}

after:
#stimuli_imageContainer {
padding: 10px 0; /* 左右のpaddingを0にする */
width: auto; /* autoを指定 */
}
・キャプション部分を囲むボックスを変更する
before:
#stimuli_imageData {
padding:0 10px;
color: #666;
}
after:
#stimuli_imageData { /* キャプション部分を囲むボックス */
padding:0 10px;
color: #666;
width:auto /* autoを指定 */
}

デメリット：
プラグインがアップデートする際、CSSも更新されるときはリセットされてしまう可能性あり。
アップデート後には要チェック。
わたしはyahoo提供YUI CSSライブラリのreset.cssをカスタマイズして使っています。

参考：YUI2 reset.css http://developer.yahoo.com/yui/reset/

ブラウザにより各要素の定義内容が異なるためreset.cssでリセットし、basic.cssで再定義しているんですが、divやimg等主な要素のwidthは省きたくはないところ。
要素自体をまず大きく定義し、それぞれの小要素ごとに設定を行うことがセオリーなので、Lightbox2内のCSSにてIDを振られた要素のみを修正し対応することにしました。

CSS3を見据えたコーディングだけではなく、アップデートするブラウザやプラグイン事情に合わせて随時こうした細かな部分を見直し再定義していく「サイトメンテナンス」の重要性を感じました。