Blogのデザインを変更するべく、Movable Typeのテンプレートと格闘している。 標準のHTMLコードは非常に複雑で、異常なdiv要素のネストを繰り返している。 デザインを変更するためにスタイルシートを変更しようにも、HTML文書の構造が理解できなければ、まともなスタイルの指定は出来ない。 そこで、構造を理解することを優先することにした。

divのネストを何とかしないと、そのまま構造を理解するのは非常に困難なのだが、構造を理解せずにむやみにネストをはずしてしまうと、根本から訳がわからなくなってしまう。 div要素のネストがわかりづらいのは、ネストが深いことに加えて、Webブラウザ上の表示のため、どの深さでネストされているのか、一目でわからないことが原因だ。 そこで、Movable Typeに用意されている、テンプレートのモジュールを利用して、ネストの解消を行うことにした。

これまでおこなったのは、主にメインページについてで、検索ボックスやカテゴリリストなどをそれぞれモジュールに移し、メインページへは<$MTInclude$>で入れ込むことにした。 こうすることによって、小さな単位でネストが確認でき、非常にわかりやすくなった。 ついでに、DOCTYPEやxml宣言などまでモジュール化し、後から変更しやすいようにした。 我ながら良い仕事だと自画自賛したくなる（笑）。

これからやるべきは、div要素のネストが何のためにおこなわれているのか、スタイルシートファイルを見比べながら解析することだ。 うすうす予想されるのは、見た目を指定するためにいろいろネストしている、と言うことで、仮にそうだとすると無駄なことなので、見た目を変更するなどしてシンプルな構造にしたい。 私は複雑な構造を把握するのが苦手だし、面倒で嫌になってやめてしまう。 だから、後々のために始めに少し苦労しておこうと思う。

目標とするデザインとしては、まず私にとっての反面教師を紹介したい。 今、多くのBlogやウェブサイトで良くおこなわれていることだが、横幅がサイト側で指定されている。 現在、このBlogのデザインもまさにそうなっているが、私はこのレイアウトがあまり好きではない。 と言うのも、ブラウザがそれ以上の幅を使ってサイトを表示できるのに、その分がサイト側の都合で利用できないからだ。 もったいない感じもするし、スクロールする手間も増える。 ひどいときには、ブラウザウィンドウの半分くらいの面積しか使わないことになるサイトもある。

そこで、このBlogでは横幅を指定しないように作りたい。 これまで作ってきたサイトもそう言う思想で作ってきている。 Blogでも同じように出来るのかどうかわからないが、これを目標にしていきたい。