image WindowsLiveWriterの編集画面にウェブサイトのテーマを適用する場合、テーマが崩れて困ることがあります。例えばこのサイトの新デザインもWLW対策を取らなければ右SSのように酷い状態になってしまいます。むしろ、崩れなければ僥倖で(打率一割ぐらいかなぁ…)、自分は崩れた時の対応を織り込んでサイトの製作期間を見積るようにしています。

崩れる原因

さて、WLWの編集画面ではなぜテーマが崩れてしまうのでしょうか?WLWの描画エンジンがアホの子だから?ノー。WLWのエンジンはTridentです。確かにTridentはアホの子ではありますが、少なくともデファクトスタンダードであるIEと同じ表示になるわけですから、ここでは問題になりません。

image答は「WLWが編集画面に読み込むページのソースでは記事に関係のない部分、つまりタイトルと本文以外の部分の要素を全て削除してしまうから」です。WLWが取得してきたテーマはC:Users<ユーザー名>AppDataRoamingWindows Live Writerblogtemplates<ブログのGUID?>のどこかに保存されているのですが、それをFirebugでツリー表示したのが左のSSです。 ん~、見事なまでのふたこぶラクダ。タイトルの要素と、本文の要素、そしてそれらを囲む要素だけしか残っていません。ヘッダーやフッター、サイドバーは情け容赦なく消されています。visibility:hiddenが適用されているのではなく、要素自体が残っていません。これにより、その消された要素にレイアウトが依存しているテーマは表示が崩れてしまうのです。このサイトの新デザインも、消された要素によってfloatをclearしていた個所があったので、本文部を囲っているfloat要素の高さがゼロになり、白い背景が伸びずその下の暗色の横ストライプが見えてしまっていました。

対策

では、こんな時どうするか。WLWは諦めてしまうにはあまりに便利で惜しいソフトです。何とか対策を考えてみましょう。

対策1:サイトのテーマを全面的に修正する

ページのHTMLの構造を書き換える、floatは必ずclearfixでクリアする、など八方手を尽くしてWLW上では消えてしまう要素への依存をなくし、WLW Compatibleなテーマに書き換えるという方策です。これはサイトの設計時点で取り組まないと難しいでしょう。確実ですが、サイトの表現力にも影響を与えますし、本末転倒な気がします。

対策2:WLWがテーマをDLする時だけサイトのデザインを差し替える

WLWがテーマをDLする時を見計らって、その時だけstyle属性などでガチガチに固めてWLW対策をしたテーマに差し替えるという方法です。どうせ回り込ませるはずだった要素が消えてしまうなら、その時はfloatも辞めてしまえ、とか対策をします。差し替えはマニュアル操作でもよいですが、WordPressのようにテーマがプログラマブルな場合は、WLWに設定するホームページのURLにwlwcompatiblemode=onなどの適当なgetパラメタを追加し、テーマの側でそのようなパラメタが付加された場合だけWLW対策用のCSSを追加で読み込ませる、といった方法を採ることもできます。(WLWはテーマをWLWの設定でサイトのホームページとして指定したURLの内容から生成するので。)ちなみに自分はこの方法を使っています。

対策3:ダウンロードされたテーマの書き換え

ダウンロードされたテーマはC:Users<ユーザー名>AppDataRoamingWindows Live Writerblogtemplates<BlogのGUID?>に保存されると述べましたが、これを編集することでも対処できるようです。ただ、WLWの想定していない操作なので、副作用もあるかもしてないので、注意して行った方が良いでしょう。また、自動でWLWがテーマをウェブサイトから再読み込みして上書きしてしまう場合もあるらしいので、その点にも注意してバックアップを取るなりの対策が必要でしょう。

テーマのDLに失敗する場合

エントリの本題からは少しずれますが、テーマのDLに失敗する場合の原因とその対策で自分が知っているものを一セット紹介してみます。

前述の通り、WLWはテーマをWLWの設定でサイトのホームページとして指定したURLの内容から生成するようです。このとき、ホームページとして設定されたURLに最新記事が表示されない場合は、WLWはどこがタイトルに置き換えるべきところで、どこが本文に置き換えるべきところか判断がつかず、テーマの生成に失敗してしまいます。例えば、WordPressでホームページに最新記事の代わりに固定ページを表示させるようにした場合などがこれにあたります。前述の対策2を行えばよいでしょう。

おわりに

以上、WLWでデザインが崩れた際の対応策をまとめてみましたが、いかがだったでしょうか?このエントリがWLWの快適な利用に繋がれば幸いです。

 

しかし…WLWが表示の必要のない要素の扱いを削除からvisibility:hiddenの適用に改めてくれれば多分全て解決するはずなんですけれどねぇ…レイアウトが崩れるリスクを取ってまで要素を削除する理由ってなんなんでしょうかね。