Atelierで“テンプレート”タグの付いているブログ記事

2008年9月21日

隠居のMT備忘録:lightbox 2.0 の背景 overlay が黒くならない

 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 については次の説明がある。

The shadow overlay doesn't stretch to cover full browser window.
Remove the default margin and padding from the body tag. Add body{ margin: 0; padding: 0; } to your stylesheet.

 スタイルシートでは、この設定は既に以下のようになっており、問題はなさそうである。
/* すべて */
* {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, sans-serif;
    word-break: normal;
    line-break: strict;
}


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

もし何か分かりましたら別途エントリーしたいと思います。
それではよろしくお願い致します。


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

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

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

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

2008年6月10日

(続)隠居、MovableType 3.35 から 4.1 へのアップグレード(全面改定)

 MovableTYpe3.35 から MOvableType4.1 へのアップグレードは、3.35 でのテンプレートをそのまま引き継いで実行した。一見上手く成功したかに見えたが、コメント入力での認証で不具合が出て丸1日くらい調べてみても対処の方法が見つからなかったので、思い切って 4.1 用のテンプレートに切り替えることにした。

 新しいテンプレートは、従来と同じように「小粋空間」さんの MovableType4 用のテンプレートセットを導入した。これはこれで、分からないことの連続であったが、同じ苦労でも今後につながると思っている。

 手を入れなければならないことがたくさんあるが、一つずつ勉強しながら治していくつもりである。いくつかの新しい発見があったり、これからも出てきそうなので、詳細についてはぼちぼちと記録していくつもりである。

2006年4月 5日

What'sNew?をテンプレートに

 今まで What'sNew?は、エントリーの一つとして扱ってきた。したがって、新しい事項が増えるたびにエントリーを修正する作業を繰り返してきた。しかし、What'sNew?の日付がいつまでも古いままではおかしいので、テンプレート化したほうが良いではないかと思い、メインページのテンプレートを土台に新規のテンプレートを作った。
 このテンプレートは頻度高く修正することになるであろうが、ほかに良い方法が思いつかない。

Atelier Shuhei Weblogで“テンプレート”タグの付いているブログ記事

2006年4月 5日

What'sNew?をテンプレートに

 今まで What'sNew?は、エントリーの一つとして扱ってきた。したがって、新しい事項が増えるたびにエントリーを修正する作業を繰り返してきた。しかし、What'sNew?の日付がいつまでも古いままではおかしいので、テンプレート化したほうが良いではないかと思い、メインページのテンプレートを土台に新規のテンプレートを作った。
 このテンプレートは頻度高く修正することになるであろうが、ほかに良い方法が思いつかない。

2006年3月31日

レイアウトの細かな修正

 3月28日に、Weblogの背景画像を設定したことに伴い、全体に細かな修正を行った。修正の大部分は「小粋空間」テンプレートのCSSに手を入れることであった。この作業は、全体のレイアウトがすっきりすることが目的であるが、スタイルシートの学習にもなった。

2006年2月 1日

最近学んだことなど

 DreamWeaver2004 MXの基本機能だけを使っての古典的手法でHomePageらしきものを昨年(2005年)の秋から立ち上げてきた。その前には、Livedoorのblogで写真日記的なものを公開していた。ごく親しい仲間に、DIYで創った作品や旅行記などを知らせるためであった。メールでは重すぎるからである。
 この冬の寒さで、DIYなどの屋外活動がやりにくくなったことも起因して、HP作成にどっぷり浸かるようになった。
 今年(2006年)に入って、lolipopとレンタルサーバー契約をした。このlolipopのドメイン取得サービスを利用して、n-shuhei.netというドメイン名を取得することができた。これだけでも、年寄りにとっては大事業なのに、ここにMovable Type(MT)をDownLoadしてweblogサイトを開設することにした。Livedoorのblogがいつまで続くか危うさを感じたことも拍車をかけた。Movable Typeというソフトは、それまで全く知らなかったが、ML仲間の一人が使っていることもあって、思い切ってトライしてみることにした。
  HTML, CSS, JavaScriptなど基本的な学習ができていないなかでのMTへのトライはかなり無謀と思っているが、インターネットの関連サイトや参考書を頼りに、少しづつ体裁を整えている。「小粋空間」という洒落たサイトで提供されているMT3.2用のテンプレート body class="layout-two-column-liquid-right" を使わさせてもらって、カスタマイズを始めた。
 本日(2006/2/1)は、CSSとメインページ、 エントリー・アーカイブを少しいじって、掲載した写真へ間隔を開けてのテキストの回り込みやサイドカラムLink部分のカスタマイズを試みた。時間を忘れてはまっている。