Atelier

　lightbox 2.0 の最新バージョン 2.04 の導入は失敗した。導入の手順を間違ったものと思うが、サイトそのものにアクセスできないという致命的な障害がでるので、すぐに元のバージョン 2.03 に戻した。

　そのときのドサクサにまぎれてテンプレートなどをいじったせいか、次の条件のときに、画像が現れるポップアップ画面の背景 overlay が黒くならないという現象がでた。

• Windows XP SP2
• Internet Explorer 7
• MovableType 4.1 テンプレート：小粋空間：two-column-liquid-right メインページ

　アーカイブページやWindowsVista　Mozilla(Firefox) では起こらない。
　上記は私の環境で、それ以外については確認していない。

　lightbox2.0 のページの support では、overlay については次の説明がある。


　スタイルシートでは、この設定は既に以下のようになっており、問題はなさそうである。

/* すべて */
* {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, sans-serif;
    word-break: normal;
    line-break: strict;
}

　ネットサーチもしてみたが、的確な示唆はヒットしなかった。見当はずれであるが、「小粋空間」さんの「Lightbox JS の Movable Type での不具合を修正する」のエントリーに、コメントとして質問を投げかけてみた。親切に以下のような返事をいただいたが、結局原因不明である。

　アクセス解析サービスの Artisan の分析では、私のサイトへの訪問者は、WindowsXP IE6/7 でのアクセスが最も多いから、早く修復したいと思ったが方途がない。

　運営している友人の２つのブログのひとつを見ていると、なんと上の条件でも、lightbox で拡大画像表示されるポップアップ画像の背景overlay が黒くなっていることが分かった。いじっているうちに偶然うまくいっていたらしい。

　このブログも同じ小粋空間：two-column-liquid-right のテンプレートを使っているので、lightbox　表示に関連していると思われるテンプレートモジュールの「ヘッダー」を子細に見てみると、正常に表示されるブログのテンプレートの<div> タグを閉じる </div> タグがひとつ少ないことを見つけた。
　どうやら、テンプレートモジュールの「ヘッダー」で<div> タグを閉じる </div> タグを余計にひとつつけたことが原因らしく思われた。テンプレートの構成上テンプレートモジュールの「ヘッダー」の<div> タグのひとつは、テンプレートモジュールの「フッター」で閉じられることになっていたのだ。

　「ヘッダー」の余計な </div> タグを削除すると上手く背景overlay が黒くなった。原因は、まったくそのせいと思っていたが、再現性を確認するために、「ヘッダー」テンプレートに余計な </div> タグをつけても、背景overlay は黒くなる。再現性はないのだ。
　どうやら修復は不可逆性だったようで釈然としないのだが、うまく表示されるようになっているので、まあ、いいか　という気分である。
　ブラウザーに依存する障害は、いつもよく分からない。

　恥ずかしながら、ブログのエントリーなどでかいた英単語が行末で分断されていたり、行頭に「。」がきていたりしてもスペースの関係で仕方ないのだと思いこんでいた。

　Word などのワープロソフトでは、この禁則処理は初期設定で組み込まれている（「ツール」→「オプション」→「文字体裁」）のは知っていたが、Movable Type のようなブログ HTML での禁則処理の方法を知らなかった。
　ほっておくのもぶさいくなので、ネットで「HTML　禁則処理」のような検索語で方法をサーチしてみると、CSS で設定できることが分かった。ブラウザーによっては、自動的に禁則処理をしているようだが、ブラウザーによって異なるらしい。IEではあまりうまく処理されていないらしい。

　早速、自分のサイトの CSS （もともとは、「小粋空間」さんのテンプレートを利用させてもらっている）に、左のような　id 属性（ word-break line-break ）を設定すると禁則処理ができるようになった。word-break は、英単語を行末で分断しないプロパティで、IE のみで有効なようである。詳しくは、HTML クイックリファレンスにでている。値に、keep-all を指定すると全ての言語で単語の途中では改行せず、単語の切れ目で改行されることになっているが、この設定では形が崩れてしまうようだ。
　また、line-break は、行頭・行末の禁則処理で、これも IE に独自なプロパティのようだ。これも詳しくは、HTML クイックリファレンスの line-break のページにでている。この方は、 normal と strict とでは余り変化がないように思える。最近のブラウザーでは、それ自身が禁則処理を行っているようである。

　スタイルシートに設定前と設定後を比較すると、下のような結果になる。CSS を設定した方があきらかに読みやすい。こんなことがすぐ分かるのも、ネットのおかげである。