隠居のMT備忘録：Lightbox のカスタマイズ
Internet Explorer 8（IE8：WindowsXP)に変えてから、私が管理しているブログのうち２つのブログ（Atelier Shuhei Weblog と Studio YAMAKO） メインページで lightboxの不具合が起こった。背景が黒くならない。個別ページでは、正常に表示されている。ただ、管理している３つのブログの一つ、Masjii's Blog では上手く機能している。
今まで学習したことを調べたり、ネットでサーチしてみても原因がわからない。両者のソースコードやStylesheet を１ヶ月以上かけて仔細に調べてみたが、全く解決の糸口が見つからなかった。
先日、Atelier Shuhei Weblog をIE8 のWindows画面を開けようとすると、次のようなエラーメッセージのポップアップ画面が出て停止した。
このエラーについて調べると、どうやら 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の背景は、蝶の柄が入った壁紙にしてみた。私のは青空である。
三つを並べてみたい。
今まで学習したことを調べたり、ネットでサーチしてみても原因がわからない。両者のソースコードやStylesheet を１ヶ月以上かけて仔細に調べてみたが、全く解決の糸口が見つからなかった。
先日、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 weblog | sample3:Studio Yamako |
コメントする
(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)