Top > HP作成> 隠居のMT備忘録:Lightbox のカスタマイズ

2010年3月21日

隠居のMT備忘録:Lightbox のカスタマイズ

Internet Explorer 8(IE8:WindowsXP)に変えてから、私が管理しているブログのうち2つのブログ(Atelier Shuhei Weblog と Studio YAMAKO) メインページで lightboxの不具合が起こった。背景が黒くならない。個別ページでは、正常に表示されている。ただ、管理している3つのブログの一つ、Masjii's Blog では上手く機能している。
今まで学習したことを調べたり、ネットでサーチしてみても原因がわからない。両者のソースコードやStylesheet を1ヶ月以上かけて仔細に調べてみたが、全く解決の糸口が見つからなかった。

 先日、Atelier Shuhei Weblog をIE8 のWindows画面を開けようとすると、次のようなエラーメッセージのポップアップ画面が出て停止した。
HTML Parsing Error: Unable to modify the parent container element before the child element is closed

 このエラーについて調べると、どうやら DOM という API に関連しているらしい。DOM については全く知識がないが、どうやらプログラムとくに JavaScript の実行順序が起因しているように思われた。
そこから類推して、Atelier Shuhei Weblog Studio YAMAKOのメインページには、JavaScript を多用した Lightbox で開く写真が沢山あるので時間がかかるのではないか、それが原因ではないかと思われた。Masjii's Blog には、写真はあまりなくテキストが中心である。

 そこで、MovableType4.2 の「ブログ記事の設定」で、表示数を 30 から 10 に変更すると、写真の背景は黒くなり正常に表示されるようになった。Masjii's Blog はもともと10 ブログ記事だけの表示になっていた。メインページの表示が10 件だけでも問題は余りないと思われる。

 懸案の問題が解消したので、解決策をネットでサーチしている中で見つけた lightbox のカスタマイズを参考にいじってみた。以前にも、画面を「閉じる」「Next」「Back」ボタンをカスタマイズしている。
 今回は、写真の台紙を従来の白から薄緑色に(それに伴って、キャプチャーの文字を白に)、背景の overlay を黒一色から模様入りの壁紙風に変えてみた。 Studio YAMAKOの背景は、蝶の柄が入った壁紙にしてみた。私のは青空である。
 三つを並べてみたい。
sample1:Atelier Shuhei Weblog sample2:Masajii's weblogsample3:Studio Yamako

トラックバックURL

このエントリーのトラックバックURL:
http://n-shuhei.net/cgi/mt/mt-tb.cgi/2001

トラックバック

» カストマイズの履歴 from Atelier
 このページでは 2006年の1月から私のHomePageに手を入れた事柄につい... 続きを読む

コメントする

(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)
 MovableType または TypeKey のサインインができない方には、「匿名でコメントする」をクリックください。スパム・コメントを防止するためにコメント入力欄の下のCaptcha:画像で表示されている文字入力をお願いしています。
 できれば、MovableType または TypeKey の登録をしていただければ、Captcha:画像で表示されている文字入力の必要はありません。
MovableType のアカウントの取得は、下のサインインの文字をクリックするとでる画面で「サインイン画面のアカウントがないときはサインアップしてください。」のサインアップをクリックすれば登録画面が表示されます。「ウェブサイトURL」には、http://n-shuhei.net/atelier/ と入力ください。
 また、TypeKey は、 TypeKey サインインをクリックし新規登録ボタンから無料で取得できます。取得された TypeKey で他の多くのブログにコメントができます。)